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.
Why this matters and how to fix it
Why this matters
Screen readers cannot interpret images. Without alternative text, users who are blind or have low vision miss important information or context. Alternative text communicates the purpose of the image so all users receive the same information.
How to fix this issue
Add a concise, meaningful `alt` attribute describing the purpose of the image. If the image is decorative and conveys no information, use an empty alt (`alt=""`) so assistive technologies ignore it.
Developer guidance
Describe the purpose or meaning of the image, not its visual details. Avoid starting with 'Image of…'—screen readers already identify images. If the image contains text, include that text in the `alt` description. If the image is purely decorative or repeated branding, hide it from assistive technologies by using `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 Examples
Before
<img src="logo.png" alt="Company Logo Company Logo Company Logo"> <!-- Redundant and noisy -->After
<img src="logo.png" alt=""> <!-- Decorative; removed from accessibility tree since logo is repeated in text nearby -->Manual testing
- 1. Turn on a screen reader and navigate the page.
- 2. When the image is focused or encountered, listen to what is announced:
- • Expected: A short, clear description of the image’s purpose.
- • Failure: The screen reader announces the file name (e.g., 'chart.png'), or provides no context.
- 3. Temporarily disable images in your browser:
- Chrome DevTools → Command Menu → 'Disable Images'.
- • The page should remain understandable without visual cues.
- 4. If the image is decorative (e.g., spacer, flourish, background art): ensure it has `alt=""`.
- 5. For data visualizations, confirm the alt text communicates the key takeaway (trend/result), not just 'chart'.
Trusted by organizations across Europe working toward WCAG and EAA conformance