Non-text elements such as images must be perceivable by all users, including those with visual impairments.
To support this, meaningful images that convey information must include alternative text (alt text).
Alt text is a brief, descriptive text that is not visually displayed on the page but is programmatically associated with the image.
It is announced by screen readers to users who are blind or visually impaired, helping them understand the purpose or content of the image.
Alt text also benefits sighted users when images fail to load, ensuring that the core message of the image is still conveyed.
When to Use Alt Text
- Informative images such as charts, product images, Classroom discussions etc
- Functional images such as icons that serve as a link
- An image that adds no additional information can be marked as decorative
Benefits
- Supports screen reader users by conveying the purpose of images, icons, and charts.\
- Improves comprehension when images fail to load or are blocked by the browser
- Enables equal access to visual information for people with visual disabilities.
How to write a Good Alternative Text
Concise and Descriptive
Keep it short (typically under 125 characters) while clearly describing the essential content or function of the image
Do not use these characters in your alternate text: # % & ‘ ^ ` ~ + ; = ) ( \ / : * “ < > | [ ]
Meaning, Not Appearance
Focus on what the image conveys rather than its visual details
Example, “Smiling student holding a certificate” instead of “A person with a blue shirt standing in front of a brick wall”.
Do not include every detail of the image in the alt text.
Avoid Redundancy
Do not repeat information already provided in surrounding text or labels.
Example, don’t say ” Image of …” as screen readers identify images by default and announce them to users
Functional Images
If the image is a link or button, describe its function, not its appearance.
Example, “Search” instead of “Magnifying glass”
Decorative Images
Use empty alt="" for purely decorative images so screen readers skip them.
If your content can be understood by your users without the image then that image can be marked as decorative
Avoid using decorative images as links.
Alt text for Word and Powerpoint Documents
Best Practices
Summarize Graphs and Charts
- Include only salient or key takeaway, not every data point
- Example: “Line graph showing a steady increase in enrollment from 2015 to 2025
Don’t Duplicate Captions
- Avoid repeating captions word-for-word unless they are critical for understanding
- Alt text and captions should complement each other
Use the Accessibility Checker
- Go to Review > Check Accessibility to find missing or incorrect alt text in Word or Powerpoint.
Please refer to the How to write a Good Alternative Text above to learn more about writing accessible alt text.
Steps
- Right-click on the image or object
- Select “View Alt Text” from the context menu
- Type a short, meaningful description of the image in the text box or use AI to generate the alt text, however double check to ensure it is accurate.
- If the image is decorative, check the box that says “Mark as decorative”
- Your alt text is saved automatically
Please, it is paramount to note that even though we can use the AI feature to generate alt text, there is the need to verify the text thoroughly as they are not always accurate.
Creating Alt Text for QR Codes
Alt text for QR codes are very essential for users who are visually impairment and cannot visually scan the code and therefore rely on screen readers like NVDA and VoiceOver to access it.
Best Practices
Convey the purpose, not the technical description
- ❌ Avoid: “QR code”
- ✅ Use:
"<img src="qr-code.png" alt="QR code linking to our accessibility guide">"or"Scan to access the accessibility resources page"
Alt text must tell users the destination or action of the QR code
- ✅ ” QR code linking to accessibility-guide
Avoid vague Alt Text
- ❌ “Scan this QR code”
- ❌ “Image with QR code”
