Web Accessibility: How to Make Your Site Accessible to Blind Visitors

Setting up a new business? Starting a new blog? Get clued up on web accessibility first...

We set up our Audio Description Matters blog with the intention of providing valuable insights into the world of audio description and accessibility. So it wouldn't be a great look if we failed to practice what we preach. Before starting the blog, we did our homework on web accessibility and the key points to bear in mind to accommodate blind and visually-impaired visitors to your site. 

Why does web accessibility matter?

Web accessibility means designing websites in a way that doesn't prevent anyone from being able to use them. In other words, any visitor should be able to access and use your site, regardless of any disabilities and impairments.

Around 15% of the world's population has some sort of disability. And over two-thirds of people in this category will leave a website if they find it inaccessible. So no matter how fantastic you feel your services, product or content might be, an inaccessible website is going alienate a lot of visitors and make them want to click away.

What guidelines are out there to help us?

To help people and companies setting up websites, there are various sets of guidelines for reviewing web design and usability. For example, the Web Accessibility Initiative (WAI) defines several levels of accessibility, including minimum thresholds that are considered acceptable. Laws and regulations also need to be considered, since accessibility is a legal matter.

But don't start despairing just yet – we've drawn up a few easy-to-follow steps to make your site more accessible and increase your potential readership.

1. Choose the right Content Management System (CMS)

We use Chimpify as the CMS for our blog, since the platform ensures its codebase conforms to the minimum accessibility standards. Alternatively, you could opt for WordPress, as all its code meets Web Content Accessibility Guidelines (WCAG) 2.0, a worldwide standard used by government and public service websites. Contao is another option that specializes in providing back-office and front-office accessibility. Be sure to shop around before purchasing a CMS plan.

2. Think about accessibility widgets

Be on the lookout for CMS providers that use accessibility widgets. These are simple overlays built into the site. When the widget is clicked on, a control window opens up, allowing users to adapt the presentation and operability of the website to their needs. Functions within the widget include adjusting the font size, increasing the colour contrast, and visually highlighting focused elements. 

Having widgets doesn't automatically mean your site conforms to WCAG standards though. You also need to ensure your widgets don't interfere with a user's assistive software such as screen readers and screen enlargers.

3. Use headers properly

Now that you're using an appropriate CMS, you can start writing something. Most platforms include useful built-in features that can help you create accessible content. For headings, it's bad practice to simply make your font larger and bold, since screen readers won't recognize the text as the header of a section. Instead, you should highlight the text and apply the header mark-up. 

Headers are usually marked as H1, H2, H3, etc. You should structure your headings hierarchically, with H1 used solely as your blog post's primary title. Use H2 and those below to organise the rest of your content.

As well as helping screen readers navigate through your content, headers provide useful insights for search engines.

4. Describe your images correctly

You should add descriptive text to any images appearing in your post, including those that form part of your template. In HTML view, you can provide alternative text for your pictures by adding alt="describe your image" within the image tag. Some CMS platforms will let you add alt text by simply clicking on the picture.

For the image description, we recommend:

• keeping the text as succinct as possible
• including any words included in graphics within the image
• being informative
• putting the most important information first
• avoiding abbreviations
• checking everything is spelled correctly

5. Make video content accessible

Adding videos can be a nice touch for your site's overall appearance, but be sure to have visitors with visual impairments in mind. So that blind and visually-impaired users know what's happening on screen, the video should include an audio description.

Text-to-speech audio description (TTS AD) is usually the most viable choice for the web format. TTS AD is where a synthetic voice reads out text describing what's going on in the video. Frazier, an audio description tool developed by VIDEO TO VOICE, provides an affordable option in this respect. The software allows users and businesses to create TTS AD to tight deadlines at a low cost.

6. Use relative font sizes

Avoid using absolute font sizes. These are usually shown as points or pixels. Instead, it's best to use relative font sizes, which are expressed in percentages or ems. With relative font sizes, low-vision visitors to your site can make the text larger if they need to. WGAC standards also recommend ensuring that text can be zoomed to at least 200%. 

7. Use accessible colour palettes

Some colour palettes can be troublesome for users with visual impairments such as colour blindness. The measures drawn out in the WCAG recommend using colours with lots of contrast, so your text is easy to read. 

8. Avoid vaguely-worded links like "Click here"

Visitors using screen readers will usually tab from link to link, skipping over any explanatory text in between. It's a quick way to see what options there are on the page. Therefore, having links that are vaguely worded will be confusing for the visitor. As well as providing no context, link names such as "Click here" represent a poor call to action. Descriptive links are also better for search engine optimisation. 

If you use image links, be sure to provide alt text. Otherwise, these types of links can be hard to understand for visually-impaired visitors to your site.  

9. Don't force links to open in new windows

It can be quite confusing for a visually-impaired visitor to your site if links within your blog post open up in a new tab. Older screen readers often provide no indication that a new window has been opened. Therefore, avoid using target="new" in your links.

10. Go easy on the emojis

Beaming face with smiling eyes emoji, face with medical mask, hand with fingers splayed... Getting annoyed yet? This is what blind and visually-impaired website users have to deal with when you put rows of emojis in your text. Screen readers will read out the descriptions of the emojis, so having one after the other will soon get tiring with visitors wanting to click away.

When faced with the numerous standards defined in the WCAG and WAI guidelines, the world of accessibility may seem quite daunting. But if you follow our advice above, you're well on your way to creating a website that ticks all of the accessibility boxes. 

Read the full article here: https://blog.videotovoice.com/blog/web-accessibility-sites/

Learn more about text-to-speech audio description: https://www.videotovoice.com/en/text-to-speech-audio-description/

Follow VIDEO TO VOICE: https://www.dhirubhai.net/company/videotovoice/