Image ALT Attributes

The Google webmaster site has a useful Youtube Video explaining the importance of altTags not only to enhance accessibility, but also because “providing useful, accurate information in your ALT attributes can make your photos and pictures more discoverable on the web”

alt tag code for image of AAC symbol worksheets

“The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.” (W3C tips for webmasters)

The importance of adding alternative text may be lost in the hurry to add photos and graphics to websites that are built by using online page makers or working in wikis and blogs often associated with Web 2.0. However, as Webaim state “Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text.”

Method

It is possible to use the Webaim Wave online checker to look for missing alt attributes or as suggested by Patrick Lauke the Web Developer add-on for Firefox. However, automatic checkers cannot tell you whether they are appropriate or relevant, this has to be done by listening to the output of screen reading software whilst checking the images.

Terrill Thompson uses the Web Accessibility Toolbar (WAT) to generate a list of images and their alt texts, but as he says you still have to ‘critique the use of alt texts for meaningful texts and proper use of null texts’. (There is a similar toolbar for Firefox - the Firefox Accessibility Extension)

Example of JAWS reading an image caption by Karen Sorensen

References

This technique may be used to test the following section of best practice.

Document Section Heading
WCAG 2.0 1.1.1 Non-text Content More Info

See Also

WCAG 2.0: Guideline 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A) How to Meet 1.1.1 | Understanding 1.1.1

Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.