Provide text alternatives for non-text content that serves the same purpose.
Users who cannot see images, hear audio or perceive video benefit from having text alternatives in their place. These can be read by the user or voiced by assistive technology.
Text alternatives must therefore provide the same information as the non-text content.
How to Pass
- Add a text alternative to your images
- If the content is video or audio, add a short description of the topic
- If a control or input field is non-text, add a name
For the following examples, you must provide a text alternative, but it doesn’t have to give the same information as the non-text content.
- Tests (if it would invalidate the test)
For these final examples, implement them in a way assistive technology can ignore them (for example by using blank alt text).
- The non-text content is decorative and has no meaning
- The non-text content is only used for visual formatting
- The non-text content is invisible to all users
For images, alt text should describe the image and give the same information as 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.
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.
Blank (or null) alt text is as easy as adding an alt tag without just a space between the quotes.
<img src="location-of-image.jpg" alt="" />
Screen readers will skip the image rather than reading the filename or trying to substitute an alt text.