Use Best Practices for Describing Images
When you use images (including diagrams, maps, charts, or icons) in your course content, you must provide text alternatives that provide information equivalent to the visual content, or that identify the purpose of such non-text content.
The text alternative for an image depends on the image’s context and purpose, and might not be a simple description of the image’s visual characteristics. In general, for every image, Xen.ed recommends that you provide a text alternative that provides the equivalent information that a sighted learner would obtain from viewing the image. If the image contains words that are important for understanding the content, include the words in the text alternative. If the image itself is being used as a link, the text alternative should describe the destination or action that will be performed when the link is activated.
The primary mechanism for providing a text alternative for an image in HTML is the alt attribute. The text value of this attribute is what screen reader users hear when they encounter the image in your content.
Note: All images must include an alt attribute. There are some cases, noted below, when an empty alt attribute (alt="") is desirable. However, the alt attribute must never be omitted.
Note: For SVG elements, use aria-label instead of alt attributes. Non-interactive SVGs should also have role="img" and focusable="false".
If an image description that captures the essential information in an image does not fit in 200 characters, you can instead add a Create useful and meaningful text alternatives for images in your course by following these guidelines for particular situations.
1. Images That Are Links or Controls
If your image serves as a link to additional content or is an interactive form control such as a button, the value of the alt attribute should describe the destination of the link or the action that will be performed when the user clicks the image. For example, if a linked image of an envelope opens an email program to send an email, a useful text alternative is “Send message”, rather than “Envelope.”
2. Images That Contain Text
If your image contains text, the alt attribute would typically consist of exactly the same text as is contained in the image. However, there are a couple of conditions when having an empty alt attribute (alt="") is the preferred solution.
If the text contained in the image is also available in nearby HTML, or otherwise accessible text, including it in the alt attribute would be redundant. In this case, setting an empty alt attribute (alt="") is acceptable. Doing so effectively “hides” the image from screen reader users.
Note: All images must include an alt attribute so do not omit the alt attribute entirely. If the alt attribute is omitted entirely, screen readers will read the value of the src attribute (the path to the image on a web server) as a fallback. This is rarely helpful to the user and often results in a poor user experience.
If the text contained in the image is for decorative purposes only and adds no value to the content of the page, an empty alt attribute is also acceptable.
3. Images That Contribute Meaning or Additional Context to the Page
If the image is a simple graphic or photograph that provides additional context to the surrounding content, the alt attribute should briefly describe the image in a way that conveys that context.
Consider the following examples of meaningful alt attributes for a photo of the famous stone bridge, Ponte Vecchio in Florence, Italy.
For a representative image of the bridge included on a page about Florence, a meaningful alt attribute would be “Photo of Ponte Vecchio, a famous bridge and shopping center in Florence, Italy.”
If the context of the page is about the bridge itself a meaningful alt attribute would be more specific: “Photo of Ponte Vecchio showing its three stone arches which span the Arno River.”
For a technical diagram, or illustration, on a page about the construction of the bridge the alt attribute would include the details conveyed visually, such as dimensions and materials used: “The Ponte Vecchio is a stone bridge with three arches and a span-to-rise ratio of 5 to 1.”
For a map intended to provide directions to the bridge, the alt attribute would provide directions as text.
4. Graphs or Complex Visual Representations of Information
If the image is a graph or represents a complex piece of information, include the information contained in the image as accessible text adjacent to the image, or provide a link to the information. The alt attribute should convey a summary of what the complex image conveys visually. For example, a line graph that represents the price of a stock over time might be “The price of the stock rises from $45 in January of 2015 to over $76 in June of 2015 with a significant drop of 30% during the month of March.”
Note: For most charts, all of the data in the chart should be accessible. Summarization is not always appropriate. In some cases this means making a table available (visibly, as screen-reader-only text, or as a downloadable spreadsheet file).
Consider using a caption to display long descriptions so that the information is available to all learners. In the following example, the image element includes the short description as the alt attribute and the paragraph element includes the long description.
<img
src="image.jpg"
alt="Photo
of
Ponte
Vecchio">
<p>Photo
of
Ponte
Vecchio
showing
its
three
stone
arches
and
the
Arno
river</p>
Alternatively, provide long descriptions by creating an additional unit or downloadable file that contains the descriptive text and providing a link to the unit or file below the image.
<img
src="image.jpg"
alt="Illustration
of
Ponte
Vecchio">
<p><a
href="description.html">Description
of
Ponte
Vecchio
Illustration</a></p>
5. Images With Unknown Descriptions at The Time of Publication
If a suitable text alternative is unknown at the time of publication (for example, a webcam image that updates every 10 minutes) provide an alt attribute that includes as much useful information as possible. For example, “Traffic on Interstate 90 at 5:45 PM June 26, 2015.”
6. Non-Informative Images
Images that do not provide information, including purely decorative images, do not need text descriptions. For example, an icon that is followed by link text that reads “Course Syllabus (EPUB)” does not need alternative text.
For non-informative images that should be skipped by screen reading software, include an alt attribute but leave it with an empty value (also known as a NULL alt attribute).
<img src="image.jpg" alt="">
Note: While it is appropriate to have an empty alt attribute, it is never acceptable to omit the alt attribute entirely. If image elements do not include an alt attribute at all, a screen reader will read the path to the image, or, in the case of a linked image, announce the linked URL. This is rarely helpful to the user and often results in a poor user experience. Don’t make blind learners guess what information an image conveys!
7. Information Graphics (Charts, Diagrams, Illustrations)
Graphics are helpful for communicating concepts and information, but they can present challenges for people with visual impairments. For example, a chart that requires color perception or a diagram with tiny labels and annotations will likely be difficult to comprehend for learners with color blindness or low vision. All images present a barrier to learners who are blind.
Xen.ed recommends that you follow these best practices for making information graphics accessible to visually impaired learners.
Avoid using only color to distinguish important features of an image. For example, on a line graph, use a different symbol or line style as well as color to distinguish the data elements.
Use colors that have a minimum 3:1 luminance contrast vs. the background color.
Whenever possible, use an image format that supports scaling, such as .svg, so that learners can employ zooming or view the image larger. Consider providing a high-resolution version of complex graphics that have small but essential details.
For every graphic, provide a text alternative that provides the equivalent information that a sighted learner would obtain from viewing the graphic. For charts and graphs, a text alternative could be a table displaying the same data. See Use Best Practices for Describing Images for details about providing useful text alternatives for images.
8. Accessible Images Resources
W3C Resources on Alternative Text for Images
W3C WAI Images Tutorial
HTML5 - Requirements for providing text to act as an alternative for images
WebAim provides general guidance on the appropriate use of alternative text for images.
The DIAGRAM Center, established by the US Department of Education (Office of Special Education Programs), provides guidance on ways to make it easier, faster, and more cost effective to create and use accessible images.
DataViz Accessibility working group
FROGED