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.
- Alternative text is required on linked images and must describe the link action, 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.
- 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.
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):
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 best practices for the application you’re using.
Go to the next question.
Question 2: Is the image used as 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.
- Use the two part description: Short alt text and nearby text description.
- 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
Here are some options to help you get started:
- What would a user miss if they couldn’t see this image?
- What is the purpose of the image? Why are you including it?
- Is a link included? Say where it goes.
- Is the image informative? Describe the context in 1–2 sentences.
- Try AI. You’ll need to review the text to make sure the context and information is correct.
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.
Your alt text should be concise, ideally under 150 characters. A short sentence or two is great.
If it needs a longer explanation, add a short explanation for the alt text and add a caption or additional text near the image for further information.
- Do not start with image of or photo of. A screen reader already identifies the item as an image.
- Avoid using the file name.
Yes! Use all proper punctuation for a sentence, including commas and periods. This allows for better comprehension.
No. If an image is for design, leave the alt text blank, so the screen reader will skip it.
- If the caption fully explains the image, the alt text should be brief to avoid repetition.
- It is best that the alt text complements the caption and fully explains the context of the image.
If an image contains text (like a quote or heading), that text should be included in the alt text.
Summarize the main takeaway of the complex image in the alt text and provide a detailed information elsewhere if necessary.
Need assistance?
Contact the College of Medicine Digital Accessibility Team if you have questions or need one-on-one support or additional training.
Contact the Digital Accessibility Team