Use Accessible Images
Learning Objectives
After completing this unit, you’ll be able to:
- Summarize best practices for writing alternative text for images and graphics.
- Ensure images are accessible in your content.
- Explain the potential impact of using images without complete and accurate alt-text.
The Importance of Accessible Images
Accessible images provide crucial meaning and value for many types of users.
Users with impaired or no vision or users who have trouble processing a lot of information or are easily distracted rely on a screen reader to gain an understanding of images. In addition, many users without visual and cognitive impairments turn off images to save data.
All users must be able to get the same information from the alt text and surrounding text as if they could see the image.
Two requirements that help ensure images are accessible for screen readers are alternative (alt) text attributes and descriptive text.
Alternative (Alt) Text Attributes
An alternative (alt) text attribute is required for all images. For images that provide meaning and context to surrounding content, the alternative text attribute contains a brief description of the meaning or purpose of the image. The relevant information depends heavily on the image’s context. If the image provides no additional meaning or purpose, the alternative text attribute is set to an empty string.
Descriptive Text
Descriptive text is required when the information that must be conveyed exceeds the recommended alt text limit. It’s information about the image that you include in the main content. Descriptive text provides a brief summary (if one is apparent) of the image and describes the data provided in the image as it applies to the context surrounding it.
For example, if you include a chart or graph, the alt text summarizes the main theme of the data shown, and the descriptive text provides details about the data. To understand what information to convey about the image, think about why the image is being included.
For more complex images, such as diagrams, charts, and infographic information, provide as much information as possible in the descriptive text surrounding the image, not in the alt text. Describe the information, properties of the information, and how different pieces of information relate to each other. Whenever possible, use a table or list to describe the data that the chart or infographic conveys. Then use the alt text to note that the image corresponds to the descriptive text, for example: alt=“Corresponding chart of information”.
The combination of alt text and descriptive text must be an effective summary of the meaning of an image, so that nothing is lost for users with impairments or users who have turned off images. All users must be able to get the same information from the alt text and surrounding text as if they could see the image.
There is no single correct way to provide descriptive text and alt text, as long as the combination of these two elements provides the same level of meaning for screen reader users as the descriptive text and image provide for other users.
Search engines use alt text to index images, so by providing a well-thought-out image description in the alt text, you also increase the searchability of your content! However, while there are SEO benefits to alternative text, your first task is to correctly convey descriptive information. Use keywords where necessary and applicable, but only as they apply to the image being described.
Image Types
Images can be either decorative or informative.
Decorative images, such as page borders and colored banners, convey no meaning. Their only purpose is to make a page visually interesting.
Because decorative images don’t add meaning, we want screen readers to skip over them. To do this, set the alt text to an empty string, like alt=””.
Informative images provide information and meaning for the user, such as screenshots, flowcharts, architectural diagrams, and graphs. Because they convey information or meaning, informative images always need alt text that summarizes the meaning conveyed by the image. More complex images need descriptive text to provide more detail about the data or other information contained in the image. Make sure you do not duplicate information in the alt text and descriptive text.
If you’re unsure whether an image is informative or decorative, remove it from the content and determine if any needed information or meaning is missing. If information is absent without the image, then the image is informative and requires alt text.
Types of images that are always informative include:
- Images that are links
- Images included in a link
- Images that contain meaningful text
- Logos
Keep in mind that many images provide abundant visual details without a lot of important information. If an image’s meaning is understood by a brief look, then the description should also be brief. When writing alt text for an image, think about how you would verbally describe it to another person.
Alternative and Descriptive Text Best Practices
The following table contains important considerations when creating alt text.
Alt Text Considerations
| Accessible | Inaccessible |
|---|---|
|
Writing specifically and concisely—alt text should be 125 characters or less. |
Writing lengthy alt text that includes extraneous details. |
|
Focusing on image details relevant to the image's context. |
Including unclear alt text or leading alt text with the phrases “image of…” or “graphic of…”. Screen readers and other assistive technologies already alert the user that they’re focused on an image, so in this case, the user hears the word image twice. |
|
Using the same tone and voice as the surrounding text. |
Using all-caps text. Some screen readers don’t recognize words written in all capital letters as words, but assume they’re acronyms. When this happens, they read each letter individually, meaning IMPORTANT becomes I, M, P, O, R, T, A, N, T. Instead, use CSS to convert text to uppercase if this effect is required. |
|
Treating alt text as user-facing text and use sentence capitalization, proper grammar, and proper punctuation. When it makes sense, you can use incomplete sentences for image descriptions. Screen readers briefly pause after reading a period in the alt text, which provides a better experience for the user. |
Putting file names, paths in alt text. A blind user gets no meaning from alt text like: 00451.jpg. |
|
Including an empty alt text attribute if an image is decorative. An empty alt text attribute forces screen readers to skip over them. |
Skipping an alt text attribute. If a screen reader encounters an image without an alt text attribute, it reads out the <image src> tag, which often is something like: /images/weji2362iofweio6.png. |
|
Writing unique alt text that differs from descriptive text. |
Duplicating alt text in your document and in the alt attribute. |
Alt text is part of your content, not extra content. Write alt text and descriptive text when you write the content that surrounds the image. Alt text written after the initial content is drafted is usually less complete and effective. You might not remember why you included an image or details about that image. As a best practice, write alt text while you’re authoring the content rather than adding it later.
Good descriptive and alt text requires thought and effort. There is no single right answer. It requires you to consider users with and without disabilities, and how best to convey the necessary meaning and purpose to everyone. Writing concise yet meaningful alternative text takes time and practice.
When you write descriptive and alt text for an image, you might discover that the image is more complex than you realized, which then requires additional surrounding text to convey the needed meaning. Or you might determine that an image doesn’t convey any additional information and remove it.
The more you think about the user experience and empathize with users, the better writer you will be.
Let’s Sum It Up
When using images, providing alternative and descriptive text effectively communicates the information in images to a variety of users who otherwise would not have access to that information. Without the meaning provided in images, the user experience for those users is greatly reduced. Addressing the basic principles for alternative and descriptive text ensures greater accessibility of your content to everyone.
In the next unit, we take a look at some examples for creating alt text.
Resources
- W3C: Page Structure Concepts
- WebAIM: Alternative Text
- National Center for Accessible Media: Experience + Learn / Educational Media / Effective Practices for Description of Science Content within Digital Talking Books / NCAM