Provide text alternatives for non-text content
Some users browse websites with images turned off (as do some users with slow internet connections). These must be true alternatives to the content: they must provide the same information.
What to do
- Add a text alternative to all of your images.
- Add a text alternative to your audio and video (a succinct description of the topic).
- Add a name to all of your controls (such as ‘Search’ or ‘Submit’).
Alternative (or ‘alt’) text is a written replacement for an image, not an addition to it. This means that the text should describe the image and give the same information that the image would if seen. This isn’t always easy and people don’t always agree on what the ‘same’ information is. Ask yourself: what does the picture convey?
If the image is your company logo, your company name is a good bet. If the image is of text, replicate the text exactly. For all other images, describe the image helpfully and succinctly: we don’t need to know it’s a picture of 17,387 trees if the word ‘forest’ will serve the same purpose.
Whatever you do, alt text is not an opportunity for keyword stuffing. Adding out-of-context keywords as alt text is terrible for accessibility, it does not meet WCAG 2.0 guidelines and it can even harm search engine rankings.
Alt text is relatively simple to audit and easy to fix, making this a quick win. One of the best ways is to add the WAVE Chrome Extension and check a page. As most sites have a standard template, you can catch your biggest issues with one sweep. Banners, sidebar images and footers only need fixing once to improve every page on your site. After that, you’ll need to check your website page by page.
There are a few types of image that don’t need alt text: spacers, icons, purely decorative, tests and CAPTCHA images.
Icons are usually used to complement text, rather than replace it, so there’s no need to duplicate your efforts here. Customers with screen readers would just hear the same thing twice anyway, which is the opposite of what we’re trying to do.
Spacers are images used for padding, often for ease and not good coding. They are often used to preserve formatting and present no information, so they don’t need alt text.
Decorative images are ones used just because they look nice. They have no information or use other than for their aesthetics.
Tests and CAPTCHAs that would be undermined by text alternatives don’t need them. Although if you do use CAPTCHA, use one with an audio alternative or add your contact details somewhere close by to help your users if they get stuck.
In all these cases, use ‘null’ alt text by simply leaving the alt text out, but do put the quotes in:
<img src="location-of-image.jpg" alt="" />
Screen readers will then skip the image rather than reading the filename or trying to substitute an alt text.
- Guideline 1.4.5 – Images of Text
- Guideline 1.4.9 – Images of Text (No Exception)
- Understanding Success Criterion 1.1.1 (W3C)
Free Developer Resources
Join over 3,500 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.
Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.