<svg role="img"> must have an accessible name
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Screen reader users rely on text alternatives to understand the purpose of images and image-based controls. Without accurate alternatives, critical information and controls are invisible to non‑visual users.
How to fix this issue
Provide concise, meaningful alternatives. Use `alt` for `<img>` and `<input type="image">`. For `[role="img"]` or SVG, provide `aria-label` or `aria-labelledby`. For image maps, include `alt` on each active `<area>`; use empty alt for decorative images.
Developer guidance
Enforce alt/name props in your component library. Lint for missing alt and invalid roles. Test with NVDA/VoiceOver that the purpose is announced.
Code examples
Incorrect Implementation
<svg role="img" viewBox="0 0 10 10"><title></title></svg>Correct Implementation
<svg role="img" aria-label="Company logo" viewBox="0 0 10 10"></svg>
Trusted by organizations across Europe working toward WCAG and EAA conformance