Image descriptions provide textual information about non-text content that appears on your website, allowing it to be presented auditorily, as visual text, or in any other form that is best for the user.
Who Do Image Descriptions Help?
- Screen readers can’t interpret images and must rely on text to read out loud the information on the page to people who are blind, as well as others who use them.
- When content must be enlarged to be seen, text often scales better than images, which can become pixelated and/or can easily take over the entire screen, causing users to have to scroll the image vertically and/or horizontally.
- Some people with cognitive disabilities can understand text better than they are able to interpret images.
- People who use voice recognition software need text alternatives for controls that are displayed as images so they know what to speak to activate the control. Furthermore, if there is text on the control, it should be the same as the alternative text.
- Text allows information to be presented in other formats, such as tactilely or in ways we don’t even know about yet.
What Do Image Descriptions Mean?
WCAG 2.0 says that all non-text content, except for the items listed below, should have a text alternative that provides an equivalent meaning as the image. The exceptions are:
- Controls or other elements that accept user input should already have a name that describes their purpose.
- Videos and other time-based media must have text alternatives that identify the content.
- Tests or exercises that would be invalid if presented as text must have text alternatives that identify the content.
- Information that is intended to create a specific sensory experience must have text alternatives that identify the content.
- CAPTCHAs must have text alternatives that identify the CAPTCHA, as well as offer alternative methods of accessing the content that accommodate different disabilities.
- Decorative, formatting, or invisible content that can be ignored by assistive technology doesn't need alternative text.
Following are some special cases that require thought when considering image descriptions. The Resources section of this page includes articles that offer further guidance.
- Image sprites with CSS
- Icon fonts
- Images that may need the "longdesc" attribute (such as in electronic books or in online courses)
How to Check
The first thing to do to check your text alternative is to identify all non-text content. Sometimes this is as simple as visually inspecting the page. However, if there are a lot of images, small images, hidden images, or images of text, it can be hard to find them all visually. Here are some approaches you can use to help you assess images:
- With the Web Developer Toolbar (Firefox), select Images > Outline Images > Outline Images Without Alt Attributes
- Also with the Web Developer Toolbar (Firefox), select Images > Display Alt Attributes
- For the Web Accessibility Toolbar (Internet Explorer), select Images > Show Images
- When using the WAVE service, red icons show images with missing alt text, and green icons show alt text
If you want to check one publicly-facing page quickly, you might like the very simple Juicy Studio Image Analyser. Go to the site, copy a url into the edit box, and you'll see the results.
Once images are identified, you need to decide whether any of the images qualifies as an exception listed above, and if it does, what needs to be done about it.
If it's not an exception, you will need to determine whether the text alternative provides an equivalent meaning to the image. This can be very subjective. Establishing a few basic guidelines for your site will make decisions about how to describe images easier. Consistency will also help your site visitors know what to expect.
In order to address the many scenarios that can arise, much has been written about how to craft alternative text. We have collected a number of the best pieces here, and we hope you will return to this page when specific situations arise for you. For the moment, however, what follows are several excellent overviews of the issue: