Pictures, diagrams, maps, charts, and icons can be effective ways to communicate information. Some people can’t see images, including people who use screen reader software. Providing text alternatives helps people who can’t see images access the information provided.
It's important not to over-describe images, such as if you were to use both a text alternative (through the
alt attribute) and a title (through the title attribute). Redundant text alternatives make for an overly verbose user experience. Also, if some images aren’t relevant to the content, make these images hidden to screen reader users by leaving alt and title attributes blank.
Provide text alternative for images:
- Provide a short description for content images. A short phrase describing the image will make its purpose known to screen reader users.
- Don’t use the title attribute for images. There is no real need to provide a title as well as alternative text.
- Don't describe decorative images. For images that don’t contribute to the content and functionality of the page, hide them from screen reader users. With OpenScholar you can do this by not providing information in the Alternative text and Title inputs when loading an image.
- Describe the action for images that are inside a link. And when you’re using images as controls or links to other pages, the text alternative should describe the action (such as “Print page”) rather than the image (“Printer icon”).
- Look to other means to describe complex images. You can provide a full description of a complex image in a variety of ways—such as in the text of the page, as an image caption, as a data table, or on a separate page linked from the image.
Follow these best practices for text alternatives:
- If the photo is being used to show something generally, the description should name the person, place, or thing: “Photo of Harvard Yard.”
- If the photograph is being used to provide detailed information, the description should be more specific: “Photo of the Old Yard section of Harvard Yard showing the bronze statue of John Harvard in front of University Hall.”
- If the image is being used to link to another page, its short description should describe the link’s destination, not the image. For example, an image of a question mark that serves as a link to a help page should be described as “help”—not “question mark.”
- If the image is informational, such as a chart, diagram, or illustration, its short description might be “Diagram of John Harvard statue.” Its long description should include the details conveyed visually, such as dimensions and materials used. Note that a long description should be provided for images that are the sole source of that information, but you don’t need to describe a chart if the same data were also displayed on the page in a data table.
- If the image is a map, its short description might be “Map showing location of John Harvard statue.” If the map is intended to provide directions to the statue, then its long description should provide step-by-step text directions.
- For icons, their short descriptions should be the equivalent to the information provided by the icon, such as “PDF document” for a PDF icon.
- For images that require a long description, consider using a figure caption to display the long description. That way, the descriptive information is available to all users.
- Use one of the testing tools to hide images and display their alt text. Does the page make sense with the images hidden, replaced by their text alternatives? Do all linked images meaningfully describe their action rather than their appearance?