July 20, 2020 Quick WCAG wins to help ensure your content is accessible

By Ali Pinch

Natalie, Avion Director

How often do you think of accessibility when you’re publishing content or creating a website? If you’re like one in five Aussies who live with a disability, accessible content could make or break how you connect with a brand, product or service.

Making your website accessible is not an all or nothing task — anything you can do to improve your accessibility is a step in the right direction. To get you started, we’ve put together a quick WCAG checklist to help make your content accessible to all.

What is WCAG?

WCAG is a set of guidelines developed to help content builders, organisations and developers make more accessible websites and content for those with disabilities.

The guidelines speak to four principles your website should abide by to ensure people with a disability can access your content; it must be perceivable, operable, understandable and robust.

Making your website perceivable

As a principle, perceivable means that every element on your website, from text to audio and video, needs to be recognised in more than just its original form. For example, someone who is blind or visually impaired will most likely use a screen reader.

Quick win #1: Introduce alt tags and captions to make your website content more accessible

Alt tags are the perfect bridge between your website and a screen reader. Embedded into your website’s HTML code, an alt tag is a piece of written copy that provides a text alternative for screen readers and search engines. So, having alt tags ensures that all users, regardless of ability, can appreciate and understand the content on your website.

When writing an alt tag or a caption, the full meaning should be inferred by the text. Think, if you’re visually impaired and need a screen reader, what information would you need to get a good snapshot of what’s in front of you?

Better yet, test it out yourself with a screen reader.

Ensuring your website is operable

People with physical limitations should be able to navigate your website in the same way as an able-bodied person. For example, users with motor difficulties, such as tremors that impact their fine motor skills, may use an on-screen keyboard to browse your content. People who are vision impaired may also use a braille-keyboard. By providing easy pathways to get from A to B to C, this ensures everyone can get what they need from your website without hitting any roadblocks.

Quick win #2: Prioritise keyboard-only navigation

As some people may use a keyboard to navigate between pages, you need to make it easy for them to do so. Imagine how frustrating it would be for someone who is ready to buy, but can’t get to the next page where they can confirm their order! Some keyboard basics:

  • The Tab key should allow users to navigate from button-to-button or from link-to-link
  • Shift + Tab should let you go backwards
  • The Spacebar, Return or Enter keys should allow you to interact with links, videos and buttons.

Building a website that’s understandable

To cater to people for whom English is a second language (ESL), or those with dyslexia or learning difficulties, it’s important to make your content as clear as possible. Anything you can do to make the content on your website more understandable will help them to feel more confident with your website or service.

Quick win #3: Write in plain English

Keep it simple, and your content will be able to be understood by many. As a rule of thumb, aiming for a year 9 level of readability should do the trick:

  • Make sentences short and sharp
  • Cut the jargon
  • Use inclusive language, like ‘you’ and ‘we’
  • Don’t be afraid to use lists and instructions
  • Use active voice (rather than passive).

For more techniques, check out our blog on writing inclusively.

Creating a robust website

A robust website allows third-party technologies, like screen readers, media plug-ins and voice assistants, to pick up the information, and communicate it back to the user. This means your website has to be formatted in a way that’s easy to be read by assistive technologies. If they can’t pick up what’s on your website, chances are the user will get frustrated and leave.

Quick win #4: Use header tags and proper heading hierarchy

Think about how often you skim an article and read just the headlines. A heading can act as a signpost to help guide readers through the page. Header tags in your HTML code do the same for assistive technologies and screen readers — they help them navigate and prioritise the important bits of the page for the user. Here’s how a heading hierarchy works:

  • H1 — The most important idea on the page
  • H2 — Your sub-sections
  • H3 — How you can divide your sub-sections further.

How to check if your content is accessible

Now you have a better understanding of web accessibility and WCAG, how do you inject this into your current and future content? Well, a website accessibility audit could be in order.

If you’re looking to revamp your website or take on a new project, it’s always good to have some experts at-hand. Here at Avion, we champion inclusive content and we’ve worked with top web accessibility experts to help our clients better connect with their customers. Get in touch with us today.