principlejavascriptMajor
Alt text best practices — describe function, not appearance
Viewed 0 times
WCAG 2.1 1.1.1 Level A
alt textimage accessibilitydecorative imagesfunctional imagesWCAG 1.1.1
Problem
Developers write alt text that describes what an image looks like ('A blue button with rounded corners') rather than what it communicates or does ('Submit form'). Decorative images are given redundant alt text that pollutes the screen reader experience.
Solution
Rule of thumb: if an image conveys information or action, write alt text that communicates that meaning. If decorative, use alt=''.
// Informative image
<img src="error-icon.svg" alt="Error: " />
<span>Your password is too short.</span>
// Functional image (button)
<button><img src="search.svg" alt="Search" /></button>
// Decorative — alt='' hides from screen readers entirely
<img src="background-wave.svg" alt="" role="presentation" />
// Complex image — describe in nearby text or via aria-describedby
<img src="chart.png" alt="Q3 revenue chart" aria-describedby="chart-desc" />
<p id="chart-desc">Revenue grew 23% from $1.2M to $1.48M between July and September 2024.</p>
// Informative image
<img src="error-icon.svg" alt="Error: " />
<span>Your password is too short.</span>
// Functional image (button)
<button><img src="search.svg" alt="Search" /></button>
// Decorative — alt='' hides from screen readers entirely
<img src="background-wave.svg" alt="" role="presentation" />
// Complex image — describe in nearby text or via aria-describedby
<img src="chart.png" alt="Q3 revenue chart" aria-describedby="chart-desc" />
<p id="chart-desc">Revenue grew 23% from $1.2M to $1.48M between July and September 2024.</p>
Why
Screen readers read alt text in place of images. Redundant alt text like 'image of...' or 'photo of...' wastes user time. Meaningful but poorly worded alt text can actively mislead.
Gotchas
- Never start alt text with 'Image of' or 'Picture of' — screen readers already announce 'image'
- An <img> without an alt attribute at all is inaccessible; alt='' (empty string) is the correct way to mark decorative images
- SVGs used inline should use <title> and aria-labelledby instead of alt
- When an image is the only content of a link, the alt text must describe the link destination, not the image
Context
Any page with images, icons, or SVG graphics
Revisions (0)
No revisions yet.