The 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:
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 alt attribute:
<img src="logo.gif" alt="Washington and Lee University School of Law Logo">
Keep the alt text short (140 characters, or "tweet" length, is sufficient). 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 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.
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.