Images are a core aspect of most website designs today. They can even increase the accessibility of a webpage for many users, such as employees and job seekers with cognitive and learning disabilities. Adding graphics, drawings, illustrations, graphs, and charts can benefit many users by increasing a person’s ability to understand the concepts at hand. In order for a screen reader to describe images to the user, the website/content creator must add alternative text to each image with an ALT attribute.
A good ALT attribute must be tailored specifically to the website and the context it is used in. This does not always mean that you describe the actual image–and it definitely shouldn’t mean 1000 word ALT attributes. Instead, you need to thoughtfully consider how and why you are using each image.
Overview of image type requirements
| ALT attribute | Text description on page | Color-contrast requirements | Used as links | |
|---|---|---|---|---|
| Simple content-related images | Yes–should describe the purpose of the image | No | Yes | Yes–and must describe target location in ALT attribute |
| Complex images | Yes–title of image and reference text description | Yes | Yes | Yes–but only to open a larger version of the image and this must be noted in the ALT attribute |
| Presentational images | Empty | No | No | No |
| Logo images | Yes | No | No | Yes–and must describe the target location in ALT attribute |
| Image gallery images | Yes–should describe the image itself and should not be the same as the caption | No | Not essential | Yes–but only to open a larger version of the image and this must be noted in the ALT attribute |
Simple content-related images
Simple content images add general, content-added value. They must:
- Have an ALT attribute that describes the purpose of the image, including the relevant legible text in the image
- Meet color-contrast requirements
- Describe the target location if it is also a link
Writing accurate ALT attributes
The ALT attribute should be descriptive and concise.
ALT attributes should not:
- Be longer than 100 characters
- Contain any HTML
- Repeat any text on the page, including the caption
- Include the filename of the file
- Include words such as “click”
- Include words such as “image,” “graphic,” or “photo” unless these are accurate descriptors of the image (for example, “1977 photo of the inauguration of Jimmy Carter”)
- Contain any information that is not visible in the image (such as figure, copyright or author information)
Complex images
Examples of complex images include maps, charts, graphs, and other data visualizations. These situations generally require a two-part text alternative.
The first part is an ALT attribute to identify the image and to indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image.
The ALT attribute should concisely describe the chart type, the type of data, and why the visual is included. It should include a reference to the longer text description on the same page as the complex image (or a link to the longer text description must be provided immediately next to the complex image).
- Example: “Line graph showing the rising rate of tablet ownership in the U.S. since 2015. Described under heading Tablet Ownership Full Text”
The long description should include a link to the data source, and ideally, the raw data.
For more information about writing ALT attributes for complex images, please see the following links:
- W3C: Complex Images
- Writing Alt Text for Data Visualization | Amy Cesel
Presentational images
Presentational images, such as spacers, borders and underlines, must have an empty ALT attribute. These images are strictly ornamental and do not convey any information to the user.
Other images are sometimes considered presentational if they are used alongside text that already conveys the exact same information. In those case, adding text to the ALT attribute for the image would be repetitive.
For example, in the screenshot below you can see that adding an ALT attribute to these icons just repeats the text already on the page (the section with the yellow highlight is the ALT attribute). In this case, the ALT attributes should be left empty.
Logo images
Logo images must:
- Have an ALT attribute, and
- Describe the target location if it is also a link.
Image gallery images
The purpose of an image gallery is essentially visual, therefore the ALT attributes should describe the image itself.
How to add an ALT attribute
- Visit WebAim’s Alt Text & Accessibility page for detailed guidance on adding alt text to HTML code.
- Microsoft Office provides detailed instructions for their products.
- Most social media platforms include an option for adding alt text to images.
Explore other ALT attribute guides
- Alt Text & Accessibility | Web Aim
- How to Write Great Image Alt Text | Catherine McNally
- The Right Way to Write Alt Text | Natalie Gotko
