This is perhaps one of the most important elements of an accessible website. Failure to include ALT tags with images represents a Priority 1 WCAG error and would mean your website would not be able to comply with UK DDA. A text equivalent for every image should be be provided. (e.g., via “alt”).
Explanation
Non-text elements include: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.
Text is considered accessible to almost all users since it may be handled by screen readers, non-visual browsers, and braille readers. When a text equivalent is presented to the user, it fulfills essentially the same function (to the extent possible) as the original content. For simple content, a text equivalent may need only describe the function or purpose of content. For complex content (charts, graphs, etc.), the text equivalent may be longer and include descriptive information.
Non-text element does not mean all visible elements. The types of non-text elements requiring identification is limited to those images that provide information required for comprehension of content or to facilitate navigation.
Techniques
- When an image indicates a navigational action such as “move to the next screen” or “go back to the top of the page,” the image must be accompanied by actual text that states the purpose of the image, in other words, what the image is telling you to do.
- When an image is used to represent page content, the image must have a text description accompanying it that explains the meaning of the image.
- HTML allows content developers to specify text equivalents through attributes (“alt” or “longdesc”) or in element content (the OBJECT element).
<IMG src=”filename.gif” alt=”Place alt-text here”>
A very useful tip is to include empty alt tags for spacer images or graphic elements on a page used only for design purposes.
<IMG src=”filename.gif” alt=”">
This helps assistive software ignore these elements when ‘reading’ out the contents of a page instead of reading out “image, image, image” etc.
