Accessible SVGs
Also Known As
SVG accessibility
aria-hidden SVG
TL;DR
Decorative SVGs need aria-hidden=true; informative SVGs need role=img and aria-label or title+desc elements.
Explanation
Decorative (icon in labelled button): aria-hidden=true. Informative (standalone chart): role=img, aria-labelledby pointing to title inside SVG. Interactive: full ARIA widget pattern. Inline SVG: add title as first child, desc for description, aria-labelledby to title id. Img tag SVG: alt attribute works normally.
Watch Out
⚠ An unlabelled SVG icon inside a button with no other text produces an announced button name of "" — screen readers read the button as completely empty, making it unusable without a mouse.
Common Misconception
✗ SVG icons are automatically read correctly — without aria-hidden, browsers may read file paths or class names.
Why It Matters
SVGs used as images without title and desc elements are either announced as their filename or completely skipped by screen readers, depending on the browser. Inline SVGs used for interactive controls — charts, diagrams, custom checkboxes — require ARIA roles and keyboard handlers that are easy to omit. Decorative SVGs should explicitly have aria-hidden='true' to avoid cluttering the accessibility tree. Getting this right matters most for data visualisations, where the information exists only in the graphic.
Common Mistakes
- No aria-hidden on decorative SVGs
- No alt on informative SVGs
- title not first child of svg
Avoid When
- Do not add aria-label to a decorative SVG already inside a button with visible text — it creates redundant announcements.
- Avoid embedding critical data only inside SVG paths with no text alternative — screen readers cannot parse drawn content.
When To Use
- Add aria-hidden="true" to purely decorative SVGs — icons inside labelled buttons, dividers, background flourishes.
- Add role="img" and aria-label (or <title>+<desc>) to informative SVGs that convey meaning independently.
- For interactive SVGs (charts, maps), add focusable elements with keyboard handlers and descriptive labels.
Code Examples
💡 Note
The bad button has an SVG icon with no label; a screen reader announces "button" with no name. The fix adds aria-label to the button so the action is clearly announced.
✗ Vulnerable
<button><svg><!-- icon --></svg>Search</button>
✓ Fixed
<button><svg aria-hidden="true" focusable="false"><!-- icon --></svg>Search</button>
<svg role="img" aria-labelledby="t"><title id="t">Monthly Revenue</title></svg>References
Tags
🤝 Adopt this term
£79/year · your link shown here
Added
16 Mar 2026
Edited
31 Mar 2026
Views
42
🤖 AI Guestbook educational data only
|
|
Last 30 days
Agents 1
Amazonbot 1
Perplexity 1
Amazonbot 16
Perplexity 12
ChatGPT 3
Unknown AI 3
Google 2
Ahrefs 2
Majestic 1
Meta AI 1
Also referenced
How they use it
crawler 38
crawler_json 2
Related categories
⚡
DEV INTEL
Tools & Severity
🟡 Medium
⚙ Fix effort: Low
⚡ Quick Fix
Decorative SVGs: aria-hidden=true. Informative SVGs: role=img + aria-label or title+desc. Interactive SVGs: full ARIA widget pattern with tabindex and keyboard handlers
📦 Applies To
any SVG1.1
web
🔗 Prerequisites
🔍 Detection Hints
Inline SVG without aria-hidden on decorative icons; informative SVG without role=img or title element; SVG icon button with no accessible name
Auto-detectable:
✓ Yes
axe
lighthouse
⚠ Related Problems
🤖 AI Agent
Confidence: Medium
False Positives: Medium
✗ Manual fix
Fix: Low
Context: File