Making sure your 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 public sector or 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 blind and partially sighted 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.
It’s best to keep this fairly short. If your image contains a lot of detail, consider using a short alt text and then a fuller description of the image on your webpage, or have a link through to another page with the full description.
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. If text has to be displayed as part of an image, for example in a graph, use an SVG when possible and make sure to explain the information elsewhere in your content or link to a text based summary of the information.
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 cause of low contrast text. 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 block of colour behind the text to increase the contrast.
5 No accessible alternatives for audio and video content
For Deaf and hard-of-hearing 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 Deaf and hard-of-hearing 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. Automatically generated subtitles for a video often contain mistakes, so if using these it is important to make sure you check them manually for accuracy.
For visitors who are blind and partially sighted, it’s best to make sure any visual information that is required to understand the video is also explained in the audio, for instance making sure any text featured is also read aloud. If the video contains important visual information that blind and partially sighted users will miss out on, the WCAG guidelines require an audio description track is available for any pre recorded videos.
Getting Further Support
If you’d like to learn more about making your website content work for your disabled users, please contact me. I specialise in web accessibility, so not only can I build a website to WCAG guidelines, I 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