Web Accessibility Made Easy: Alternative Text
March 12th, 2009
This is one of the easiest web accessibility guidelines to implement. Though this is easy to code, creating a proper alternative text is not always the easiest thing to do. (And yes, technically the Alt attribute is actually an attribute of an element, but the more common phrase will be used here.)
Alternative Text Basics
The alternative text attribute, commonly referred to as the “alt” attribute, is an attribute of the image element
<img> in HTML. Alt attributes are read by most browsers. They provide an alternative text description for images or other elements so that those using screen readers have access to information conveyed by graphics. Also, if the image doesn’t load or only loads partially, the alt attribute provides information conveyed by the graphic.
Guideline for Alternative Text
Provide a text equivalent for every non-text element used. One option for doing this is to use an “alt” attribute. 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.
The reason to do this is so that meaningful graphically represented information can be conveyed to assistive technology users who use programs like screen readers. Having short descriptions of graphics provided by alt tags also makes it easier for users of assistive technology to navigate pages with lots of images. If more detailed information about the image is needed, provide it using a long description in addition to the alt attribute. The long description, coded as “longdesc”, is a link to an external document with a “longer description” of the image or element. This gives you, the developer, the opportunity to go into as much detail about the picture as you think is important. It also gives user of assistive technology users the option to skip or view the extended description.
Alternative Text Best Practices
The alternative text guideline states that every non-text element needs an alt attribute. However, little guidance on formatting alt attributes is provided. Here are some best practices to follow when using alt attributes:
- Use empty alt attributes when non-text elements contain no relevant or meaningful content so that they will be skipped by screen readers. If an image element is used for layout, it most likely has no associated meaningful information to convey. The code
<alt="">tells the screen-reading software to treat the image as if it weren’t there.
- Alt attributes should be concise. If you need a longer description, use the “longdesc” attribute in tandem with an alt attribute. Alt attributes should be like captions for pictures in newspapers —short and to the point. A good rule of thumb is that an alt attribute should be no more than 10 words and 140 characters. Short alt attributes make it easy for screen reader users to quickly navigate graphical elements of a page.
- If more information about the graphic is needed than can be conveyed by an alt attribute, use the long description attribute—“longdesc”. Longdesc is a link to an external document with a “longer description” of the image or element. This gives you, the developer, the opportunity to go into as much detail about the picture as you like, and it gives the user of assistive technology the option to either skip or access the extended description.
- Alt attributes should accurately describe the image. Many websites contain alt attributes for images that say “picture” or “screenshot”. These descriptions don’t provide useful or relevant information about the image and therefore are not useful. The alt attribute should either give a terse, accurate description of the graphic, or should be coded as an empty alt attribute for graphics conveying no relevant information.
- Do not use the words “image”, “graphic”, “picture of” as part of the alt attribute. Assistive technology already recognizes and announces image elements.
- Graphical links should have alt attributes that describe where the link takes you, not the image associated with the link. Assistive technologies identify and report graphical links on a page. The user needs to know where the link will take them, not what the link is an image of. And text associated with or embedded in the image will not be read by a screen reader.
Here is a step-by-step explanation for adding an alt attribute to an image. When appropriate, all the tutorials in this series will use these example websites: Bad example web page and Good example web page.
- Open the bad example web page in your choice of web development software.
- Using the code view, locate this line of code:
<a onclick="parent.location='http://www.indiana.edu'"><img src="Images/iu_white.gif" width="171" height="44"></a>
- Now add the alt attribute to the img element so the line of code looks like this:
<a onclick="parent.location='http://www.indiana.edu'"><img src="Images/iu_white.gif" alt="Indiana University Homepage" width="171" height="44" ></a>
- It’s this simple. For this example, we used a graphical link so we followed all the best practices for alt tags listed above but needed to pay special attention to #4.
Adding alt tags to images is not difficult. Just follow the alt tag guideline to make sure your alt tags concisely and accurately describe images that convey meaningful information.