Making Your Web Content Accessible - Part 1

How your content affects people with visual or hearing impairments

Making sure your charity’s website is built to WCAG accessibility guidelines is a great start, but for a truly accessible website, you also need to make sure the text and images you add to your website are accessible too. This is especially important if you are running a not-for-profit website. There may be stricter accessibility laws to meet, more vulnerable groups you wish to reach, and often the primary purpose of your website will be getting information to the people who need it.

1 Generic wording for links

If a visitor to your website is using a screen reader, they may get a list of all the links from your text out of context. For this reason, it is very important to make sure that the words that are linked make sense on their own. So for example “to find out more about the history of our organisation click here” would not work well, as a screen reader would just show “click here” without the rest of the sentence. Instead, try “read more about the history of our organisation”

2 Missing alt text for images

“Alt text” is a short description of an image which can be used by screen readers to describe images on your page to visually-impaired visitors. Missing alt text for images is one of the most common mistakes, affecting 61% of homepages^[i] . You don’t need to provide alt text if an image is purely decorative, but if it adds any useful information to your page, make sure to add alt text. (Please note, you don’t need to add “image of” or “illustration of” as that context will be added by the screen reader.)

3 Using an image of text

It’s best never to make text a part of an image, as this can’t be resized by users with poor vision who have set a larger font size in their browser. Since the alt text is only for visitors using a screen reader, the alt text won’t be sufficient to solve this problem. Additionally, text that is integrated within an image may not be readable for users on mobile phones as it might be displayed at too small a size. It also can’t be translated for users who don’t speak English as a first language. The one exception is logos - here it is best to use an SVG file so it can be scaled up when needed, and to make sure all the wording from the logo is in the alt text.

4 Text overlayed on an image

It’s quite common on websites to have banners with an image background and text overlayed on top. When doing this, it is crucial to think about the contrast between the text and the image behind it, as this can be a very common issue with making text legible for the visually impaired. It is possible to use this style, but you need to make sure that every part of the image that might have the text over it has a minimum contrast of 4:5:1 to the text colour. And remember you can’t just rely on how it looks on your current screen. The text may overlap different parts of the image on different screen sizes and with different font sizes set in the browser. Good solutions here can be to put a tint over the image or a shadow behind the text to increase the contrast.

5 No captions for audio content

For hearing-impaired visitors, it’s important to make sure any video or audio content you add to your website has subtitles, or a transcript of the text, so that hearing-impaired users can still access the content. Just like subtitles on a TV, these can often also be useful for hearing visitors who are in loud environments or who can’t/won’t turn on the sound.

Eonic Digital are experts in accessibility. Not only will we build your website to WCAG guidelines, we can also advise you on how best to add content to your website in a way that works for disabled users.

[i]https://moz.com/learn/seo/alt-text#:~:text=97.4%25%20of%20homepages%20have%20accessibility,of%20all%20homepage%20accessibility%20errors