General Information
Making images and graphics “visible” to all users is one of the first principles of accessibility. Adding alternative text (alt text) to an image or graphic allows it to be discoverable and understood by users in a variety of ways. Don’t shy away from using images.
“Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content.” — World Wide Web Consortium (W3C). (2017).
Why using alternative text (alt-text) is important
- Adding alternative text (“alt text”) will make images and graphics “visible”.
- Text alternatives serve as labels for controls and functionality to aid keyboard navigation and navigation by voice recognition (speech input).
- For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
- Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command.
- Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
- Alternative text (alt-text) covers POUR principles perceive, operate understand, robust.
How to create good alt-text?
- Remember that context matters when creating alt-text.
- Describe the content and function represented by the image/graphic.
- Always ask yourself “What is the context and purpose of this image/graphic?“ and make sure the text alternatives convey the purpose or function of an image to provide an equivalent user experience. For instance, an appropriate text alternative for a search button would be “search” rather than “magnifying lens”.
- Create alt-text which provides a textual alternative to non-text content.
The World Wide Web Consortium (W3C) has created a very useful guide on how to create useful alt-text.
Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Decorative images: Provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
Complex images such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.
PRO TIP:
- Place a “.” period at the end of alt-text. This notifies screen readers the alt-text is done and there will be a longer pause.
- Don’t use words like “image of”, “picture of” etc. it is redundant. Assistive technology already announces the item is an image.
- Add alt-text to images in documents, web sites and social media posts.
NEXT PAGE: Accessible Videos