SVG Accessibility: Complete Guide
Every SVG on your site should be accessible. Here are the patterns to make SVG work for all users, including screen reader users.
Decorative vs Meaningful SVG
The first decision: is the SVG decorative (visual only) or does it convey meaning?
- Decorative SVG (icon with adjacent text, background pattern): add aria-hidden='true'
- Meaningful SVG (standalone icon, chart): add role='img' and aria-label or aria-labelledby
- Interactive SVG (clickable chart, map): add role='button' or role='link' with keyboard handlers
Pattern 1: Decorative SVG
Hide from screen readers completely:
- <svg aria-hidden='true' focusable='false'>...</svg>
- focusable='false' prevents IE11 from focusing the SVG
- No need for title or description — screen reader skips it entirely
- Use for: icons alongside button text, background graphics, dividers
Pattern 2: Standalone Meaningful SVG
Describe the SVG to screen readers:
- <svg role='img' aria-labelledby='title-id'>
- <title id='title-id'>Description of the graphic</title>
- Optionally add <desc id='desc-id'>More detailed description</desc>
- <svg role='img' aria-labelledby='title-id desc-id'>
Pattern 3: Interactive SVG
For clickable SVG elements (buttons, links, chart interactivity):
- Add tabindex='0' to make the element keyboard-focusable
- Add role='button' or role='link' as appropriate
- Handle both click and keydown (Enter/Space) events
- Include aria-label: <circle role='button' aria-label='Region: West Coast. Sales: $2.4M' tabindex='0'>
Frequently Asked Questions
Do SVG elements need alt text like <img> elements?
Not in the same way. Use <title> inside the SVG for the equivalent of alt text. For SVG in <img src='file.svg'>, add the alt attribute to the <img> tag.
Does aria-hidden on SVG hide it from keyboard users too?
No — aria-hidden hides from screen readers but focusable elements inside the SVG may still be reachable. Add focusable='false' on the SVG and tabindex='-1' on all interactive children.
Can screen readers read text inside SVG?
Inline SVG text elements (<text>) are generally read by screen readers. However, behavior varies — always test with VoiceOver (macOS/iOS), NVDA (Windows), and TalkBack (Android).
How do I make a chart accessible?
Add role='img' and a descriptive aria-label to the chart SVG. Include a visible or visually-hidden data table as an alternative representation. Use ARIA live regions to announce updates in dynamic charts.
What is the WCAG standard for SVG accessibility?
WCAG 2.1 covers SVG under the Perceivable and Operable principles. Success Criteria 1.1.1 (non-text content), 2.1.1 (keyboard access), and 2.4.3 (focus order) apply to SVG graphics.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free