In this example, we're going to provide a text alternative for a graph, using HTML to give an alt attribute to the graph and some visible text to provide additional information. But for complex graphics, it's not enough to provide a screen reader user with only short alternative text, such as "population graph." You also need to think about the information that the graphic conveys, such as the categories of data being shown, trends, and maximum and minimum values. For people who use screen readers, a good text equivalent of the information that’s presented graphically is essential for their understanding.įor simple graphics, providing a succinct, informative text alternative is usually fine. Some people understand complex information best when it's presented visually, such as as a chart or diagram, while others find that reading the information suits them better.
Example of an accessible infographic (WebAIM).Understanding SC 1.1.1-Non-text Content (WAI).
Making Images Accessible (a collection of resources from the DIAGRAM Center for describing complex images).Accessibility: Image Alt text best practices (Siteimprove).Does the page make sense with the images hidden, replaced by their text alternatives?ĭo all linked images meaningfully describe their action rather than their appearance? Use one of the testing tools to hide images and display their alt text. See an example of an accessible infographic from WebAIM. Images with complex information: If the image is a chart, diagram, or illustration, consider how to convey the information contained in the image using both the alt-text and the adjacent page text. For example, the alt text for an image of a question mark that links to a help page should be “Contact Support” rather than “question mark.” Images as Links: If the image is being used to link to another page, the alt text should describe what will happen when the image is clicked (rather than what it looks like). Icons: alt text for icons should be the equivalent to the information intended by the icon, such as “Download PDF” or “Visit our Facebook Page” Harvard Stadium with cracked concrete pillars. Harvard Stadium with two lone runners bounding up the steps.Īlt-text on page about renovation projects: It's not necessary to add text in the Title field.Įxample of Alt Text with Various ContextsĪlt-text on a page about recent turnout for track tryouts: Leave alt text blank if the image is purely decorative Keep it short and descriptive, like a tweet. It also displays on the page if the image fails to load, as in this example of a missing image.
It is read aloud to users by screen reader software, and it is indexed by search engines. Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage.
0 kommentar(er)
