Alt text, short for alternative text, is a vital component of web accessibility. It provides a textual description of images, graphs, videos, tables, and other visual content, making them accessible to people with visual impairments. This guide will provide you with comprehensive, updated instructions on how to write effective and accessible alt text.
What is alt text?
Alternative text (alt text) is descriptive text that conveys the meaning and context of a visual item in a digital setting, such as on an app or web page. When screen readers, such as Microsoft Narrator, JAWS, and NVDA, reach digital content with alt text, they will read the alt text aloud, allowing users to better understand what is on the screen. Well-written, descriptive alt text dramatically reduces ambiguity and improves the user experience.
When to use alt text
Images and pictures
The alt text should convey the content and purpose of an image in a concise and unambiguous manner. It should not be longer than a sentence or two—most of the time, a few thoughtfully selected words will suffice. Do not repeat the surrounding textual content as alt text or use phrases referring to images, such as, “a graphic of” or “an image of”.
Diagrams, flow charts, and charts
For objects conveying detailed information, use alt text to provide the information conveyed in the object. For instance, describing a chart as ‘A bar chart showing sales over time,’ would not be useful to a blind person. Instead, try to convey the insight, like ‘A bar chart showing sales over time. In July, sales for brand A surpassed sales for brand B and kept increasing throughout the year.’ Alt text should also clearly describe the beginning point, progress, and conclusion of flow charts.
Videos
Videos require alt text to describe the visual experience, even if the user hears music, background sounds, and speech. Alt text should describe the content and purpose of the video. Ideally, a video should contain a second audio track with a description of the video elements that are purely visual and not accessible to people with a visual disability.
Tables
Even though certain accessibility checkers may not flag if a table is missing alt text, it’s still beneficial to provide it. It’s a good practice to write clear, descriptive, and concise alt text for tables. This helps users with visual impairments to understand the content and purpose of the table, enriching their overall experience of your content1.
When not to use alt text
Not all visual content needs alt text. Decorative objects that add visual interest but aren’t informative, such as stylistic borders, don’t require alt text. Instead, they can be marked as decorative, which will be communicated to screen reader users.
Tips for using alt text
Here are a few additional tips to keep in mind when using alt text:
- Use accessibility checkers during your review process. These tools check that all relevant visual content has alt text and also provide other suggestions for improving the accessibility of your content.
- Don’t use a file name, duplicate text, or URLs as alt text. These are not useful to someone with a visual disability.
- If there is a group of objects that forms a semantic group, assign alt text for the whole group. If objects have been grouped together for formatting reasons, ungroup the objects and assign appropriate alt text for each object.
The pitfalls of automatic alt text
Automatic alt text generation, available in certain platforms like Microsoft 365, may seem like a useful tool, but relying on it can lead to inaccuracies and insufficient descriptions. When an image is inserted, these platforms might generate a description automatically. However, these auto-generated descriptions can be vague, generic, or completely miss the context of the image. For instance, an auto-generated alt text might describe an image as “a person standing near a tree,” but fail to capture that the person is waving or that the tree is in bloom. This lack of detail and context can lead to a less fulfilling experience for users who rely on alt text. Therefore, it is crucial to review and edit the auto-generated alt text to ensure it accurately and adequately describes the content.
Conclusion
Alt text plays a vital role in making digital content accessible to people with visual impairments. By understanding when and how to use it, and by using some of the tips provided, you can help ensure your digital content is inclusive and accessible to everyone. Remember, while automated tools can assist in the process, they should not replace careful, thoughtful creation of alt text. Through a blend of understanding, attention to detail, and commitment to accessibility, you can create alt text that makes a difference.