alt attribute, used inside the
<img> 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:
- graphical representations of text (including drop caps, equations, and symbols)
- form controls and text fields
- graphical buttons and links
- audio files and podcasts
- audio tracks of video
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. The following is an example
<img src="mlogo.gif" alt="University of Michigan Block M logo">
alt text short (140 characters, or “tweet” length, is sufficient). Ideally, you want to describe both the content 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 src="spacer.gif" alt="">) so screen readers will ignore the image. More complicated images, graphs, or charts requiring longer descriptions should make use of the
longdesc attribute or should be summarized in the inline text of the web page. View more information about alternative text»
Note that if the above banner logo, or any image, is being used as a link, you should make the destination page of the link the alt text and not "U-M logo". The reason for this is that, as far as a screen reader user is concerned, the main function of the logo is a navigation element, not a look-and-feel element. Therefore a more functional alt text in this instance would be "University of Michigan Home Page".
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 form labels, fieldsets, and legends. 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».