What is alternative text?
Alternative text, often simply called alt text, is a short description embedded in an image's code that conveys the image's content and purpose to people who cannot see it or are relying on assistive technologies.
The text is primarily used by screen readers but also appears in place of the image should it fail to load. It is considered a critical component of digital accessibility and search engine optimization. Providing alternative text has been a WCAG criterion since its first iteration.
When to use alternative text
There's some debate about when alternative text should be used, and, to be blunt, I don't think we'll ever reach complete consensus. Some advocate that nearly all images should be described, while others believe only value-adding media should include alt text to avoid overwhelming assistive tools with unnecessary information.
I'll strive to remain impartial and provide some facts to help you make your own decision. That said, there are a few widely accepted rules:
- Image of text: When an image contains text, that text should always be included in the description. For example, an image of a ribbon with the text "50% off" should have the alternative text of "50% off."
- Data and charts: The data represented in images, like charts or graphs, should always be provided. This can be done through alternative text or by presenting the data in text format or as a data table, where appropriate.
- Informative images: If the image conveys information or enhances the content, it should be described.
- Functional image: For icons and images used in place of text, like a magnifying glass representing "Search", the purpose of the image should be included in the alternative text (e.g., "Search").
When not to use alternative text
There are cases where you should mark an image as decorative rather than provide a description. Decorative images are ignored by screen readers, ensuring users aren't overloaded with unnecessary information.
- Aesthetic images: When an image is used purely for decoration or visual flair, like a swirl or flourish, and does not convey information, it should be marked as decorative.
- Repetitive images: When an image, like a logo, appears multiple times on a page, only the first occurrence needs a description. Subsequent instances can be marked as decorative.
- Filler images: When an image is used solely to fill space or appears as part of a background, it should be marked as decorative.
- Redundant images: When an icon is used to illustrate information already provided in the text, like a phone icon next to a "Call Us" label, the icon can be marked as decorative.
How to add alt text or mark an image as decorative
The method for providing alternative text or marking an image as decorative depends on the platform or file format being used.
HTML
Use the <img> element's alt attribute to provide alternative text. To mark an image as decorative, set the alt attribute to an empty string.
<img src="photo.png" alt="Alternative text of my image"><img src="decorative.png" alt="">Microsoft Office
To manage alternative text, right-click the image and select View Alt Text from the context menu, or use the Alt Text button in the Picture Format tab. In the alt text panel, you can add a description or check the Mark as decorative option.
Adobe Acrobat
To add alt text, navigate to the Tags panel and inspect the properties of a <Figure> element. To mark the image as decorative, use the Reading Order tool. Select the image and assign it as Background/Artifact from the menu.
How to write good alt text
Effective alt text communicates the essential information of an image without being verbose. It should describe the image's content in a way that is relevant to its context. When writing alt text, ask yourself: What is the purpose of this image in its context? What would I tell someone who can't see it?
Avoid using phrases like "Image of" or "Photo of" in your alt text. Screen readers already announce the presence of the image. However, do indicate if the image is a cartoon, a drawing, or when the medium is important.
Keep your descriptions concise but complete; don't omit important details. Contrary to popular belief, there is no strict character limit for alt text. However, keeping it short is often more practical.
A general recommendation is to aim for under 125 characters. While this isn't a hard limit, some screen readers may pause or truncate text beyond that. Focus on conveying the essential details without overwhelming the user.
And finally, please end your alt text with a period. It helps with the screen reader's intonation.
Examples of alternative text
The descriptions below are my interpretations of three images I've asked ChatGPT to generate. Since they are presented without any specific context, these descriptions only serve as generic examples and would need to be adjusted to suit different uses or scenarios.
A vibrant bowl of oranges, strawberries, grapes, and bananas, on a wooden table with sunlight streaming in from a nearby window.
A lake reflecting snow-capped mountains at sunset with the sky glowing in shades of pink, orange, and purple.
Word cloud of terms such as accessibility, inclusion, and usability, which are displayed most prominently, followed by adaptability, compatibility, and others.
Describing complex images
Graphs, charts, and other complex visual elements must be described, but it's often impractical to do so using alt text. Instead, include a transcription of the data in text form or as a table, where appropriate.
In the following example, a chart is interpreted two ways: as a short description, and a full table of the data. This approach not only benefits non-visual users but also provides information that may not be immediately apparent even to visual users.
Description of Figure 1
The bar chart illustrates unit sales from 2022 to 2024 across four models: A, B, C, and D.
- Model A: Sales are very high in 2022 but experience a sharp decline in 2023 and 2024.
- Model B: Sales are consistently strong, peaking in 2023, where it records the highest sales of any model.
- Model C: Sales are moderate, dipping in 2023 before slightly increasing in 2024.
- Model D: Sales remain consistently high across all years, with a slight increase in 2024 compared to previous years.
| Variant | 2022 | 2023 | 2024 |
|---|---|---|---|
| Model A | 5.2 | 2.0 | 2.1 |
| Model B | 4.7 | 6.9 | 5.4 |
| Model C | 4.6 | 2.6 | 3.3 |
| Model D | 5.5 | 4.8 | 5.8 |
Using AI to generate alternative text
With the advent of artificial intelligence, we now have access to powerful tools for generating alternative text. However, it's important not to rely solely on AI-generated descriptions without human intervention. Context matters, and a single photo uploaded to an AI tool will rarely produce the most accurate or relevant result.
Take, for example, a photo of a glass of wine. I might describe it as: Golden white wine being poured into a white wine glass.
This description is short, concise, and highlights the key details of the image.
I then asked ChatGPT's GPT-4o model to generate alternative text for the same image, and it responded with:
Close-up of white wine being poured into a glass with soft bokeh lights in the background, creating a warm and elegant atmosphere."
While concise, this description feels literal and potentially adds unnecessary details. Is it appropriate? The short answer is yes, if the context supports it. This example highlights a potential danger of using AI: the inability to consistently provide contextually appropriate results.
If my article were about glassware, the AI's description would no longer fit. In that case, I might adjust the alt text to Golden white wine being poured into a tall, crystal-clear, and tulip-shaped glass.
When asked to describe the photo as if it were part of an article about wine glasses, ChatGPT responded:
White wine being poured into a tulip-shaped glass, designed to preserve aromas and maintain temperature.
While not entirely incorrect, the AI adds information about preserving aromas and maintaining temperature; details that are not visually apparent in the image. This can mislead users and detract from the purpose of the alt text.
The takeaway is that AI is a helpful tool, but it should not replace human judgment. The technology, while impressive, is still developing and requires careful oversight. Always review AI-generated alt text to ensure it is accurate, contextually appropriate, and aligned with accessibility best practices.
Takeaways
- Alternative text should be concise, descriptive, and contextually relevant. Avoid generic phrases like "Image of" and focus on the essential details the image conveys.
- Images that don't convey meaningful information, like fillers or aesthetic images, should be marked as decorative to ensure screen readers skip them.
- For charts, graphs, and other intricate visuals, pair alt text with long descriptions or data tables.
- While AI can assist in generating alt text, human judgment is crucial to ensure accuracy and context. Always review and edit AI-generated descriptions.