22.1% of home pages have missing alt text
1.1.1 Non-text Content
In Plain Language
Every image, icon, and non-text element that conveys meaning needs a text alternative that serves the same purpose. Screen readers cannot interpret images, so they rely on alt text to describe visual content to users who cannot see it.
Decorative images that add no information should have an empty alt attribute (alt="") so screen readers skip them entirely.
Why It Matters
- Screen reader users hear alt text read aloud in place of images -- without it, they miss critical information or hear unhelpful filenames.
- Search engines use alt text to understand image content, improving SEO alongside accessibility.
- When images fail to load, browsers display the alt text as a fallback so all users can understand the intended content.
- This is the second most common accessibility failure, found on 53.1% of home pages.
Examples
Do: Meaningful alt text
<img
src="team-photo.jpg"
alt="Five volunteers sorting books at the 2024 spring literacy drive"
>
Don't: Missing or useless alt text
<!-- FAILS: no alt attribute at all -->
<img src="DSC_0482.jpg">
<!-- FAILS: filename is not meaningful alt text -->
<img src="photo.jpg" alt="DSC_0482.jpg">
Do: Empty alt for decorative images
Don't: Decorative image with alt text
How to Fix It
- Ask: does this image convey information? If yes, write alt text describing its content and purpose. If no, use
alt="". - Describe the content, not the file. Instead of "photo.jpg" or "image of", describe what the image shows and why it matters in context.
- Keep it concise. Alt text should be brief but complete. For complex images (charts, diagrams), use a longer description via
aria-describedbyor a visible caption. - SVG accessibility: Use
role="img"andaria-labelon inline SVGs, or wrap in afigurewith afigcaption. - Never use "image of" or "picture of" -- screen readers already announce it as an image.