Overview
Images add visual interest to content, help people orient themselves within the content, and provide complementary information to assist with understanding the content. However, images can add a barrier when they are not accessible. Let’s fix that!
Alternative (Alt) Text is a brief text description of images and graphics. When adding images and other graphic elements, be sure to add alt text so your content is accessible for all users. Alt Text is read by screen readers and provides information about the image to the reader.
Alt Text Examples
- Do not convey important content.
- Are used only for layout or aesthetic purposes.
- Do not have a function (e.g., are not links).
- Decorative images must be implemented in a way that can be ignored by assistive technology.
- Some people experience adverse reactions to animated content (e.g., blinking/flashing, scrolling, and animated backgrounds).
- Provide a way to pause, stop, or hide any movement that starts automatically, lasts for more than five seconds, or flashes more than three times in any one-second period.
- Complex images convey a lot of information in the form of charts, graphs, diagrams, and maps. When an equivalent textual substitute cannot be provided as short alternative text, the textual substitute must be provided elsewhere.
- When to use two-part descriptions (short and long):
- Charts, flow charts, algorithms, graphs, and diagrams.
- Detailed infographics.
- Complex, multi-part illustrations.
- How to use the two-part descriptions:
- Add short alt text to the image that describes the high-level reason for including the complex image.
- Write a detailed description near the image on the same page (i.e., caption or regular text).
- Link to a separate page with detailed information about the image. The link can be in a caption or regular text, or the image can be the link.
- Example:
- Short alt text: Bar chart of monthly sales for Q1 2025 showing a 20% increase in February, with a peak in March.
- Long description (adjacent text or caption): The bar chart shows monthly sales from January to March. January sales were 50 units. February saw a spike to 60 units. March had the highest sales at 75 units, driven by product X launch.
- Alternative text is required on linked images and must describe the link action, kubj destination, and function instead of the image content.
- If an image without alternative text is the only content in a link, assistive technology may read the image file name or the URL which does not help people understand the link action, destination, or function.
- Alternative text on linked images can be provided using application formatting tools or as adjacent visible text within the link.
- Convey information rather than images of text unless:
- The presentation of the text is essential to the information being conveyed, and
- The presentation cannot be reproduced with the technology being used (e.g., a logo or traffic sign).
- If an image with text is necessary, all text that is part of the image must be duplicated as alt text by using application formatting tools or by placing visible text near the image on the page.
Add Alt Text to Images
Context Matters
When writing alt text, consider the context of where and how the image is being used. Surrounding text may determine the most important parts of the image to describe. Look at this example (the same image is used in two different contexts and requires different alt text):
Alt Text Examples
Accordion Content
Accordion Content
Accordion Content
Accordion Content
Accordion Content
Accordion Content
Decide How Best to Add Alt Text
Question 1: Does your image contain text?
- And the text is also present as real text nearby?
Mark the image as decorative. - And the text is only shown for visual effects?
Mark the image as decorative. - And the text has a specific function, such as an icon?
Indicate the function of the image. - And the text in the image is not nearby.
Add alt text to the image following the guidelines on this page.
Go to the next question.
Question 2: Is the image used in a link?
Use alt text to tell the destination of the link.
Go to the next question.
Question 3: Does the image contribute meaning to the context or the content?
- It’s a simple graphic or photograph.
- Use a brief description of the image in a way that conveys the meaning.
- It’s a graph or complex image.
- Explain the information in the image elsewhere on the page.
- It shows content that is redundant to text nearby.
- Mark the image as decorative.
Go to the next question.
Question 4: Is the image purely decorative?
- Mark the image as decorative.
Not all cases are covered in this tutorial. Please contact the Digital Accessibility team for assistance.
Best Practices
- Keep the alternative text short (less than 150 characters) and use proper punctuation.
- Adjust alternative text so it is meaningful within the context of the content the image is used with.
- Use visible text such as a caption for information meant for everyone, e.g., image copyright/attribution.
- Describe complex images by providing the image's purpose in the alt text and a detailed description in text near the image.
- Do not begin the alternative text with phrases such as image of, photo of, or graphic of as assistive technology automatically announces images.
- Do not repeat information that is already provided in nearby text.
- Do not use Square or Tight, or the image will be skipped by screen readers.
FAQ
It’s a good place to start, but don’t rely solely on what you get. Remember context matters and sometimes the information is not accurate.
Resources
- Add alt text to images in Word.
- Add alt text to images in PowerPoint.
- WSU Core Concepts: Images.
- WEBAIM: Alternative Text
Need assistance?
Contact the Digital Accessibility Team if you have questions, need one-on-one support, or need additional training.
Contact the Digital Accessibility Team