SVG elements must have non-empty titles when used for meaning
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.
Meaningful SVGs need a real title; decorative SVGs must be hidden from AT.
Overview
Why this matters
Meaningful SVGs are often used as icons or data visuals. Without a text alternative, screen reader users cannot understand what the graphic represents, leading to missing or incomplete information.
How to fix this issue
If the SVG conveys meaning, include a non-empty `<title>` and expose it through an accessible naming path (typically `aria-labelledby`). If the SVG is decorative, mark it `aria-hidden="true"` or `role="presentation"`.
Developer Guidance
Inline SVGs should provide one clear naming source to avoid duplicate announcements. For SVG delivered via `<img>`, use `alt` on the `<img>` instead. Empty or generic titles like 'icon' are not sufficient.
Code Examples
Incorrect Implementation
<svg role="img"><title></title><circle cx="10" cy="10" r="10"/></svg>Correct Implementation
<svg role="img" aria-labelledby="chartTitle">
<title id="chartTitle">Revenue growth chart</title>
<circle cx="10" cy="10" r="10"/>
</svg>Real-World Implementation
Before
<svg role="img"><path d="..."></path></svg> <!-- Screen reader hears: 'graphic' with no context -->After
<svg role="img" aria-labelledby="iconDesc">
<title id="iconDesc">Download file</title>
<path d="..." />
</svg> <!-- Screen reader announces: 'Download file, graphic' -->Manual Testing
- 1. Classify each SVG as meaningful or decorative.
- 2. For meaningful SVGs, verify a descriptive non-empty title/name is exposed to AT.
- 3. Ensure name source is valid and not duplicated by conflicting ARIA labels.
- 4. For decorative SVGs, confirm they are hidden from the accessibility tree.
- 5. Test with a screen reader and verify expected graphic name (or silence for decorative).
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance