The EAA — what changed in 2025
On 28 June 2025, the European Accessibility Act (EAA) became applicable across the EU. Member states transpose it into national law (in Germany, for example, as the BFSG), and it obliges a broad range of websites and apps to be accessible. The mandatory standard: WCAG 2.2 Level AA.
Directly affected: e-commerce sites, banking and payment services, e-books, streaming platforms, telephone services, travel bookings, all apps. Micro-enterprises (<10 employees, <€2M revenue) are exempt — but a voluntary accessibility level is recommended there too.
The two central WCAG rules for images
WCAG 2.2 names two success criteria that directly concern images:
- 1.1.1 Non-text Content (Level A): every non-text element needs a text alternative that serves the same purpose.
- 1.4.5 Images of Text (Level AA): avoid text in images, except for logos or when text images are essential.
Writing alt text correctly
A brief reminder of the basic rule (more in the glossary entry): alt text is not a caption substitute but a text alternative for people who can't see the image. Four classifications:
Content images
Images that carry information. Alt text mandatory: express the information in words, concise and factual.
Example: a photo of a shop's new product. Bad: alt="image product". Medium: alt="Black sneakers, Olympia model, side view". Good: alt="Black low-top sneakers with a white sole and a yellow Olympia logo on the heel, side view".
Decorative images
Images that only reinforce layout and atmosphere, without information. Mandatory alt="" (empty). Screen readers then skip them entirely — correct.
Example: a background photo under a hero section that only sets a mood. Mark it with alt="", don't omit it — otherwise the screen reader reads the filename.
Functional images
Images as buttons or links (a magnifying-glass icon for search, a cart icon). Alt text describes the function, not the image.
Example: a cart-icon button. Bad: alt="cart symbol". Good: alt="Open cart".
Complex images (charts, diagrams, maps)
When the information is complex, a short alt text isn't enough. Three options:
- aria-describedby + a longer description. The alt text is short, referencing a detailed description that sits on the page as visible or CSS-hidden text.
- figcaption with a detailed description. A
<figure>structure with the image and a detailed<figcaption>. - A data table in parallel. For diagrams: show the diagram plus the underlying data table. The screen reader uses the table, sighted users the diagram.
Embedding SVG icons accessibly
Inline SVG icons need special markup:
<!-- Decorative: aria-hidden --> <svg aria-hidden="true" focusable="false">…</svg> <!-- Informative: title + role --> <svg role="img" aria-labelledby="warn-title"> <title id="warn-title">Warning</title> … </svg> <!-- Functional in a button: aria-label on the button --> <button aria-label="Open cart"> <svg aria-hidden="true">…</svg> </button>
Avoid text in images
WCAG 1.4.5 requires: don't bake text into images. Reasons:
- Screen readers can't read the text (not even via OCR).
- On zoom the text scales blurry — real HTML text stays sharp.
- Translations require new images per language.
Exceptions: logos and brand text (essential for brand identity), briefly embedded text images that can't be replaced by layout CSS.
Practical tip: better to lay a "Sale 50%" banner over the photo via CSS than to bake it into the JPG.
Contrast and legibility
When text sits on a background image, WCAG 1.4.3 (contrast) applies:
- Normal text: at least a 4.5:1 contrast ratio.
- Large text (18 pt or 14 pt bold): at least 3:1.
For photo backgrounds: lay a dark overlay (rgba(0,0,0,0.5)) between photo and text, or darken the photo strongly. Tools like the WebAIM Contrast Checkermeasure it automatically.
Animations and prefers-reduced-motion
WCAG 2.2.2 requires: animations longer than 5 seconds must be pausable. WCAG 2.3.3 (Level AAA): moving content must respect prefers-reduced-motion. More on that in our web animation post.
Captions and audio descriptions for video
Video as a "moving image" has additional obligations:
- 1.2.2 Captions (Level A): subtitles for all audio content in videos.
- 1.2.3 Audio Description (Level A): for videos with visual information not explained in the audio, an audio description is needed between the original dialogue or as an alternative track.
Tools and audit workflow
- axe DevTools (Chrome extension). Auto-scans a page for WCAG violations, including image obligations.
- Lighthouse accessibility audit. Built into Chrome DevTools, does a quick check.
- NVDA screen reader (Windows, free). Actually test with a screen reader, not just auto-audits.
- VoiceOver (macOS, built in). The Apple equivalent.
- An accessibility statement. Required for all sites subject to the EAA; update at least annually.
Common mistakes 2026
- alt text with "image of …". The screen reader already says "image", this only repeats unnecessarily.
- SEO keywords in the alt text. Not helpful for screen readers, and has also hurt SEO since 2023.
- Identical alt texts on multiple images. "Product image" as alt for 30 product photos makes the screen reader useless.
- Decorative image without an alt attribute. The browser interprets that as "no value" — the screen reader reads the filename.
- Complex charts with only a short alt text. "Sales chart Q3" says nothing about the data.
Legal consequences
Non-compliance can be sanctioned with fines under the national transpositions of the EAA (in Germany, for example, up to €100,000). In practice, sanctions usually follow complaints to the market-surveillance authority. More important than the threat of fines: consumer trust and the market pressure observed by competitors. Being accessible benefits from a ~15% larger reachable audience (the share of people with disabilities).
Sources
W3C WCAG 2.2 Recommendation · EU Directive 2019/882 (European Accessibility Act) · W3C WAI — Image Tutorial · WebAIM Contrast Checker · axe DevTools (Deque) · NVDA Screen Reader.