We set up our 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.
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.
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.
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.
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.
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.
The various types of 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.
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:
You can find more information in our alt text and image description guide.
Adding videos to your blog entries 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.
VIDEO TO VOICE developed the Frazier to provide an affordable option.
The software allows users and businesses to create TTS AD to tight deadlines at a low cost.
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%.
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.
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 (SEO).
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.
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.
On social media, longer hashtags using multiple words have become increasingly popular.
In most instances, people write out the entire hashtagged phrase in lowercase like this:
However, this way of writing hashtags is problematic for people using screen readers.
If long hashtags are written in lowercase, the screen reader can't recognize the individual words.
Instead, hashtags should be written in upper camel case.
This means the first letter of each word is capitalised for easier readability:
You can find out more about camel case in our camel case guide.
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.