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 attributeText description on pageColor-contrast requirementsUsed as links
Simple content-related imagesYes–should describe the purpose of the imageNoYesYes–and must describe target location in ALT attribute
Complex imagesYes–title of image and reference text descriptionYesYesYes–but only to open a larger version of the image and this must be noted in the ALT attribute
Presentational imagesEmptyNoNoNo
Logo imagesYesNoNoYes–and must describe the target location in ALT attribute
Image gallery imagesYes–should describe the image itself and should not be the same as the captionNoNot essentialYes–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:

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.
Icon with ALT attribute of ‘New item’ next to text ‘new item’, followed by a different icon with ALT attribute of ‘Edit item’ next to text ‘edit item’

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

Explore other ALT attribute guides