a. Problem: Images Without Text Equivalents
Blind people, those with low vision, and people with other disabilities that affect their ability to read a computer display often use different technologies so they can access the information displayed on a webpage. Two commonly used technologies are screen readers and refreshable Braille displays. As discussed above, a screen reader is a computer program that speaks the text that appears on the computer display, beginning in the top-left corner. A refreshable Braille display is an electronic device that translates text into Braille characters that can be read by touch. These assistive technologies read text. They cannot translate images into speech or Braille, even if words appear in the images. For example, these technologies cannot interpret a photograph of a stop sign, even if the word “stop” appears in the image.
Because they only read text, screen readers and refreshable Braille displays cannot interpret photographs, charts, color-coded information, or other graphic elements on a webpage. For this reason, a photograph of a mayor on a city’s website is inaccessible to people who use these assistive technologies, and a blind person visiting the website would be unable to tell if the image is a photo, a logo, a map, a chart, artwork, a link to another page, or even a blank page.
Solution: Add a Text Equivalent to Every Image
Adding a line of simple HTML code to provide text for each image and graphic will enable a user with a vision disability to understand what it is. Add a type of HTML tag, such as an “alt” tag for brief amounts of text or a “longdesc” tag for large amounts, to each image and graphic on your agency’s website.
The words in the tag should be more than a description. They should provide a text equivalent of the image. In other words, the tag should include the same meaningful information that other users obtain by looking at the image. In the example of the mayor’s picture, adding an “alt” tag with the words “Photograph of Mayor Jane Smith” provides a meaningful description.
In some circumstances, longer and more detailed text will be necessary to convey the same meaningful information that other visitors to the website can see. For example, a map showing the locations of neighborhood branches of a city library needs a tag with much more information in text format. In that instance, where the map conveys the locations of several facilities, add a “longdesc” tag that includes a text equivalent description of each location shown on the map – e.g., “City Center Library, 433 N. Main Street, located on North Main Street between 4th Avenue and 5th Avenue.”
User Comments/Questions
Add Comment/Question