Accessibility Guidelines
Meaningful visual content is described with text
When visual elements such as graphics, photos, charts, and graphs, among other things, are presented in web content, the meaningful information in that visual must be described in text to make it accessible to people who cannot see the image.
Images first require a short text description, up to 125 characters, that describes briefly the key meaning one might expect a person to take away from viewing the image. What gets described often depends on the context. Describing a graph in a statistics course may differ from the description of that very same graph in a social sciences course, for example. One perhaps describing the structure of the graph for a stats audience, and the other describing the data being represented for a social sciences audience.
Text descriptions are usually added with the “alt” attribute for an image element, like that presented below.
Technical Details: Text description with alt
<img src=”/images/bobthecat.jpg” alt=”A picture of my cat Bob.” />
There are other ways to add a text description to an image, but alt text is sure to be supported by all available screen readers. Other ways of describing an image may involve using an “aria-label” attribute that has text equivalent to what might appear as alt text, or an “aria-labelledby” attribute that refers to the ID of an element elsewhere on the page that contains the description. These latter methods using ARIA are relatively new, though their use is encouraged, and may not be supported across all available technologies. When these are used, for the time being, duplicate alt text should also be provided. The examples below demonstrate how ARIA attributes can be used to describe an image, but with alt text as a backup if the ARIA fails.
Technical Details: Text description with aria-label
<img src=”/images/bobthecat.jpg” alt=”A picture of my cat Bob.” aria-label=”A picture of my cat Bob” />
Or
Technical Details: Text description with aria-labelledby
<img src=”/images/bobthecat.jpg” alt=”A picture of my cat Bob.” aria-labelledby=”bobdescription” />
<p id=”bobdescription”>This is a picture of Bob, my cat.<p>
Most web content authoring tools will have a field available when adding an image to include a text description. It may be referred to as “alt text,” though some tools may call it a title or a description, or something else.
If an image requires more description than can fit in 125 characters, a longer description can be provided in addition to the alt text. This may be a few sentences in a surrounding paragraph or perhaps in a figure caption. This longer description could be referenced in the alt text by adding words like “…as described below” to refer to the location of the description. Or, aria-labelledby might be used to associate the text of a paragraph (or whatever element contains the description) with the image, which gets read automatically by current screen readers when an image has focus without having to navigate to the description.
NOTE: You may come across the HTML “longdesc” attribute, which was intended to refer to a URL location where a long description for an image is located. Avoid using this attribute for long descriptions. It is not supported in current browsers and assistive technologies.
In the Accessibility Maze you would have experienced the need for a text alternative in Level 1. The combination to open the lock is the cat’s name, but the name on the cat’s collar is not visible because ink was spilled over the area where the name appears. You are essentially blind for a moment, not being able to see the meaningful information in the image. The name of the cat on the back of the photo acts as the text alternative, presenting the meaningful information in the image that sighted users would normally be able to read.
