Not everyone can see images; therefore text equivalents should be included in every
img element. If there is a textual equivalent for an image, users who are visually impaired will be able to listen to that text with a screen reader or talking browser.
img element must have alternative text specified in the
alt attribute. That text is referred to as alt-text. Alt-text should convey the information in the image or the purpose (function) of the image.
Alt-text should be short and descriptive. It is recommended that it be less than 60 characters long. If a longer description is needed for a more complex image like a graph or chart, use the longdesc attribute.
Writing alt-text can be very straight forward. The photo of the planet Saturn below is very simple. The alt text could be:
img alt="Planet Saturn" src="/webaccessibility/img/saturn.jpg" width="310" height="222"
Some images, like the one below, are a little more complex. The little character's name is Toad. The alt-text could say
alt="Toad running away from a bullet", but a visually impaired person may think of the amphibian, not a guy named Toad. More descriptive text may be needed:
alt="Guy named Toad running from a large angry bullet"
img alt="Guy named Toad running from a large angry bullet" src="/webaccessibility/img/toad.jpg" width="310" height="222"
Be very careful that alt-text reads well when images are placed next to each other. Alt-text may make sense and pass accessibility testing, but may not provide a good user experience:
"Chainsaw squirrel cycling? That sounds horrible," exclaimed a screen reader user while testing the parks section of a Web site. Three images in a row had the alt-text "chainsaw", "squirrel", and "cycling". The actual images were "forestry", "wildlife conservation," and "outdoor activities".
CSS should be used for all decorative images and formatting (ie. fancy corners on a page or a decorative horizontal rule). If using the
img element to format a page is unavoidable, alt-text is not needed for those decorative formatting images. These images should always have null alt-text. This means using alt="" (two quotes and no space).
The pie chart below depicts browser market share for October 2007. An image was used to create a greater visual impact for sighted users, but visually impaired users can't see it and the image contains too much information to be summed up in the
alt attribute. Therefore the
longdesc attribute of the
img tag must be used along with the
longdesc attribute references a text file version of the pie chart. The information presented in the text file is available only to screen reader users. Visual browsers cannot access the text file. Be sure to include alt-text or screen readers will not be able to access the
longdesc. Also, include an absolute path to the text file. A relative path does not work.
img alt="Browser Market Share Pie Chart" longdesc="http://www.crawforddesign.com/
web_accessibility/text-equivalents/browsers.html" src="/webaccessibility/img/browser_chart.gif" width="472" height="310"
There are alternatives to using images that contain complex information:
tablesinstead of graphical tables and charts.
Having only one text version of complex information saves times because there is only one file to update. When there is a text version and an image version of the same data, errors can be made and the files may not coincide with each other.
A sensory experience is a video or image that is not purely decorative and does not primarily convey important information or perform a function.
If non-text content is primarily intended to create a specific sensory experience, text alternatives such as a long description, alt text or a simple text description before or after the sensory experience provide descriptive identification of the non-text content.
Image buttons are input elements with type="image". Image buttons must contain alt-text. When screen readers encounter an image button, they treat it much like a push button and use the alt-text instead of the value. Here are two examples of buttons.
input tabindex="1" type="submit" name="search" value="Search"
input tabindex="1" type="image" src="/web-accessibility/img/search_button.gif" alt="Search"
Some buttons may make sense in context to sighted users, but may get confusing to screen reader users. The button below says "Find Out How." But what does Find Out How refer to? Even if the button is in context of a title or paragraph, it is always good to add some more descriptive alt-text to describe the meaning of "Find Out How."
input tabindex="1" type="image" src="/web-accessibility/img/find_out_how.gif" alt="Find out how to save 10% at Office Depot."
An image link is an image inside an anchor tag. The alt-text should specify the function of the link. The CHOP tumblers image in the intranet banner is a link to the home page. The alt-text should say, "Home."
img src="/web-accessibility/img/globalBanner.jpg" alt="Home" width="351" height="75" hspace="0" vspace="0" border="0