Write Helpful Alt Text
Overview
Alternative text, or alt text, briefly describes an image within content. People using screen readers rely on alt text to convey the content or function of the visual elements. Images make content more accessible and help orient the user to page content. Images must have accompanied text that conveys the same information.
Examples for Creating Alt Text
Bad Alt Text
An image of a gift.
Good Alt Text
A paper-wrapped gift with string.
Better Alt Text
A present wrapped in a brown paper bag with a striped red and white string.
Bad Alt Text
A picture of a golf ball on a tee.
Good Alt Text
Golf ball positioned on the tee, set against the lush green grass.
Better Alt Text
A golf ball positioned on the tee, set against lush green grass, waiting to be hit on a golf course.
Helpful Tools to Create Alt Text
- Image Accessibility Creator · Streamlit (asuo-ai-labs.streamlit.app)
- The Poet Training Tool for assistance in writing effective image descriptions
- AI Alt Text Generator
Alt Text for Complex Images
As described by W3C, complex images contain substantial information—more than can be conveyed in a short phrase or sentence.
Data Visualization Examples
A formula to use when creating alt text for data visualizations is Alt text = “Chart Type” of “type of data” where “reason for including chart.”
Chart Type
Make sure the chart type is included in the text. This gives context for understanding the visual.
Example: Pie Chart
Type of Data
What data is included in the chart? Tip: the x- and y-axis labels may help you determine this.
Example: number of apples sold per day in the last month
Reason for Including the Chart
Think about why the visual is needed. What information is it portraying? Every visual should have a point, and you should tell people what to look for.
Example: Fall months have increased apple sales.
Data Visual Alt Text Formula Results = Pie chart of number of apples sold per day in the last month. Fall months have increased apple sales.
Helpful links to describe the following types of items:
- Art, photos, and cartoons
- Chemistry
- Diagrams and illustrations
- Relational diagrams (Venn diagrams, hierarchy, flow charts, arrows, cycles)
- Graphs (bar graphs, line graphs, pie graphs, scatter plots)
- Maps
- Mathematics
- Tables
- Text only images (labels, timelines)
What is the difference between alt text and image descriptions?
Alt text and image descriptions are text-based descriptions of an image’s visual details. Alt text is displayed if an image fails to load on a website. Image descriptions are similar to alt text used by screen readers to recognize images. Descriptive images have a few key differences:
- Visibility – Alt text is usually only available when hovered over or only by screen readers and braille displays. Image descriptions are viewable to all.
- Location – Alt text is typically attached to an image’s metadata. Image descriptions can be in the image caption, a text link, or a post.
- Text Length – Alt text should be kept around 125 characters in length, and image descriptions can be longer.
WCAG 2.1 Success Criteria
The issues described on this page map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:
- 1.1.1 Non-text Content (Level A)
- 1.4.5 Images of Text (Level AA)
Tips
- Alternative text does not start with “Image of” or “Photo of”.
- Alternative text should be no more than 125 characters.
- Do not use Drop Caps.
- Do not use text boxes. The visual effects of a text box can be achieved by using a bordered paragraph.
- Mark alt text as decorative if the image is purely decorative and conveys no meaning.
- Do not add alt text to decorative images.
- Images as links, such as an icon, should include alt text.
- Complex images (tables, charts, etc.) need alternative text.
Steps to add alternative text in Word
Steps to add alternative text in Google Docs
Steps to add alternative text in Adobe
Steps to add alternative text in PowerPoint
Steps to add alternative text in Excel
Steps to add alternative text in Canvas
Steps to add alternative text in Canva