SVG Accessibility: Complete Guide
Make SVG graphics accessible to screen readers, keyboard users, and WCAG-compliant browsers with the right markup patterns.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Basic Accessible SVG Pattern
Every meaningful SVG should have a title and ARIA attributes.
- <svg role='img' aria-labelledby='svg-title'>
- <title id='svg-title'>Descriptive name of the graphic</title>
- For complex graphics: add <desc id='svg-desc'>Detailed description</desc> and aria-labelledby='svg-title svg-desc'
- Decorative SVG (no information): aria-hidden='true' — screen readers skip it
- Use role='img' for all non-interactive SVGs to correctly signal graphic to AT
Interactive SVG Accessibility
SVGs with clickable regions, tooltips, or form elements need additional patterns.
- Clickable paths: add role='button', tabindex='0', and keyboard handler (Enter/Space)
- Tooltip on hover: aria-describedby pointing to a hidden <desc> with tooltip content
- Data visualization: each data point should have aria-label with its value
- Keyboard focus: outline: 2px solid #005fcc on :focus for visible keyboard focus
- Screen reader virtual cursor: test with NVDA + Firefox and VoiceOver + Safari
WCAG Compliance for SVG Graphics
Key WCAG criteria affecting SVG presentation and interaction.
- 1.1.1 (A): All non-text content has text alternative — <title> + aria-labelledby
- 1.4.1 (A): Color not sole conveyor of information — add patterns or labels
- 1.4.3 (AA): Text contrast — SVG text must meet 4.5:1 contrast ratio
- 2.1.1 (A): Keyboard accessible — interactive SVG elements must be keyboard operable
- 4.1.2 (A): Name, Role, Value — interactive SVG elements have appropriate ARIA roles
Frequently Asked Questions
Do search engines index SVG <title> and <desc> elements?
Google indexes text content within inline SVG, including <title> and <text> elements. External SVG files referenced via <img> are less reliably indexed.
How do I test SVG accessibility?
Use a screen reader: VoiceOver (macOS/iOS), NVDA (Windows), TalkBack (Android). Also use aXe DevTools, Wave, or Lighthouse accessibility audit. Navigate to the SVG and listen to how it's announced.
Does adding ARIA labels affect SVG file size significantly?
No — title and aria attributes add minimal bytes to file size. The accessibility benefit far outweighs any file size concern.
Should I use <title> or aria-label for SVG?
Both. <title> is the SVG-native approach, visible in browser tooltips. aria-labelledby pointing to the title ID provides the most reliable screen reader announcement across browsers.
How do I make an SVG icon accessible when used as a button?
<button><svg aria-hidden='true' focusable='false'>...</svg> <span class='sr-only'>Home</span></button>. The button has visible text for screen readers; the SVG is decorative with aria-hidden.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG