Text Equivalents

The alt attribute, used inside the tag, is probably the most recognized accessibility feature. It is important that all informative non-text elements are accompanied by text equivalents. Non-text elements without alt text are not accessible to users relying on screen readers and braille displays. Text equivalents can also make information contained in images and video available to search engines.

Common non-text elements include, but are not limited to:

  • images
  • graphical representations of text (including drop caps, equations, and symbols)
  • animations
  • form controls and text fields
  • graphical buttons and links
  • audio files and podcasts
  • audio tracks of video
  • videos

The simplest case is adding an alt attribute to an image tag to announce the purpose of the image to a screen reader. This is especially important for images used as links.

Keep the alt text short (generally just a few words). Ideally, you want to describe both the conent and purpose of the image. In the case of a linked image, you want to describe the link destination, rather than the content and purpose. Spacer images should be accompanied by an empty or null alt text value (e.g, <img alt="" src="spacer.gif" />) so screen readers will ignore the image. More complicated images, graphs, or charts requiring longer descriptions should be summarized in the inline text of the web page. View more information about alternate text. Here's a great decision tree about alternate text.

Form controls and text-entry fields need alternative text to make their context clear to screen readers. These elements, however, do not use the alt attribute, but rather the label, fieldset, and legend attributes. View more information about coding forms.

The most complicated case of alternative text is adding a captions to a video. View more information about captioning video.