Provide alternative text for all meaningful images
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Alt text describes the *purpose* of the image, not what the image looks like.
Overview
Why this matters
If a meaningful image has no alt text, screen reader users miss the same information sighted users get instantly. That can hide key instructions, statuses, or outcomes and break task completion.
How to fix this issue
For each meaningful image, add a short `alt` that explains the image's purpose in context. For decorative images, set `alt=""`. If nearby text already communicates the same meaning, keep the image alt empty to avoid duplicate announcements.
Developer Guidance
Use this rule of thumb: if removing the image changes meaning, write alt text; if not, use empty alt. Keep alt outcome-focused (what users need to know), not appearance-focused. In component libraries, make `alt` required for informative image components and default decorative variants to `alt=""`.
Code Examples
Incorrect Implementation
<img src='chart.png'>Correct Implementation
<img src='chart.png' alt='Bar chart showing sales increase of 25% in Q2'>Real-World Implementation
Before
<img src="checkout-summary.png"> <!-- Critical checkout totals are shown in the image, but users hear only file name or generic 'image' -->After
<img src="checkout-summary.png" alt="Order summary: 3 items, total $129.00"> <!-- Users now receive the same key information through assistive tech -->Manual Testing
- 1. Open the page with a screen reader enabled and navigate to each image.
- 2. Confirm informative images announce a meaningful purpose, not a file name.
- 3. Confirm decorative images are skipped (empty alt).
- 4. Disable images in the browser and verify the page still makes sense.
- 5. For charts/graphs, verify the alt communicates the key takeaway, not just 'chart'.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance