Alternative (alt) text provides a textual alternative to non-text content, such as photographs, logos and other images. Missing alt text on webpages was the second biggest WCAG failure from the WebAIM Million.
Alt text serves several functions:
- People who use a screen reader will hear the alt text in place of the image.
- If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.
- Alt text helps search engines understand the content of images, contributing to better indexing and potentially improving search rankings.
Alt text tips
- Be descriptive and concise: Clearly describe the content and function of the image in a concise manner (2 or 3 sentences). Aim for a balance between being descriptive enough to convey the image’s purpose and concise enough to avoid unnecessary detail.
- Context matters: The alt text should reflect the image’s role in the content. For example, if an image is used to complement a piece of text, the alt text should enhance the understanding of that text.
- Avoid redundancies: Do not start alt text with phrases like “image of” or “picture of” since screen readers already announce it as an image. Jump straight into the description.
- Include relevant information: Focus on the important aspects of the image. If the image contains text, include that text in the alt description if it’s essential for understanding.
- Be mindful of function: If the image is a link, button, or serves a specific function, ensure the alt text describes the function rather than just the visual appearance. For example, “Search button” is more useful than “magnifying glass icon.”
- Decorative images: For purely decorative images that do not add meaningful content, use an empty alt attribute (alt=””). This allows screen readers to skip over these images.
- Avoid overloading with keywords: While it might be tempting to stuff alt text with keywords for SEO purposes, this can make the text less useful for users.
- Test with screen readers: Whenever possible, test your alt text with screen readers to ensure it provides the intended information and enhances the user experience.
This Alternative Text article from WebAIM, gives a good overview of alt text along with several best practice examples.
Also, the Accessibility Checker Rules in Microsoft products (Word, Excel, Outlook, OneNote, and PowerPoint) identifies missing alt text as an ‘Error” meaning that it makes the document difficult or impossible to read and understand for people with disabilities.
Data visualisations
What about charts?
When writing alt text for charts, it’s important to convey the key information and insights that the chart is meant to communicate.
In this article, Writing Alt Text for Data Visualizations, Amy Cesal shares a simple formula (and examples) for writing alt text for data visualisations:
Alt text = chart type of type of data where reason for including the chart.
Adding alternative text to images helps to make digital content more inclusive. By thoughtfully crafting descriptions, we ensure that everyone can access and understand visual elements.