Accessible SVG – Alternative Text & ARIA for Scalable Graphics
SVG (Scalable Vector Graphics) are resolution-independent and ideal for icons, diagrams, and interactive visuals. However, by default, SVGs are not accessible – unless explicitly enriched with semantic and descriptive elements.
Why SVG Accessibility Matters
Assistive technologies rely on alternative text and semantic structure to make visual content understandable. Whether decorative or informative, SVGs need to be appropriately labeled or hidden to ensure an inclusive experience.
Key Guidelines for Accessible SVGs
| Purpose | Technique |
|---|---|
| Informative | Marks an element as a clickable button |
| role="dialog" | Identifies a modal dialog window |
| role="navigation" | Defines a navigational region |
| role="alert" | Announces urgent messages immediately |
| role="region" | Groups related content for easier navigation |
Example – Accessible SVG with Title and Description
<svg role="img" aria-labelledby="title1 desc1" xmlns="http://www.w3.org/2000/svg">
<title id="title1">FINK Brot logo</title>
<desc id="desc1">Stylized bread with wheat spike</desc>
<path d="..." />
</svg>Example – Decorative SVG Hidden from Assistive Tech
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="..." />
</svg>Note: Use focusable="false" to prevent legacy screen readers from tabbing into the SVG.
Best Practices
- SVG does not support alt – always use title and desc instead.
- Use aria-labelledby to reference text elements.
- Apply role="img" for semantic clarity.
- Hide decorative SVGs from assistive tech with aria-hidden.
- Ensure interactivity is fully keyboard-accessible if applicable.
WCAG Relevance
Accessible SVG supports key WCAG 2.1 criteria:
- 1.1.1 – Non-text Content (alternative text)
- 1.3.1 – Info and Relationships
- 4.1.2 – Name, Role, Value (for interactive SVGs)
You can find out more about our services in the area of digital accessibility here.
