Image Alt Text When and How
Write alt text that conveys meaning for non-decorative images.
What Is alt Text?
The alt attribute provides alternative text for images:
- Read by screen readers instead of the image
- Displayed when the image fails to load
- Indexed by search engines
- Required for WCAG compliance
The Golden Rule
Alt text should convey the same information or function as the image would to a sighted user:
<!-- The test: if you removed this image,
would the alt text give you the same information? -->
<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">
<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">All lessons in this course
- Why Accessibility Matters WCAG Levels
- Heading Hierarchy for Screen Readers
- Image Alt Text When and How
- Keyboard Navigation and Focus Order