A practical guide on svg accessibility guide — when, why, and how.

SVG images need accessibility markup to be usable by screen readers and assistive technologies. Without it, SVG content is invisible to a significant portion of your audience.

Meaningful vs Decorative SVGs

Meaningful SVGs convey information (icons with labels, data charts, diagrams). These need accessible names and descriptions. Decorative SVGs are purely visual (background patterns, divider lines). These should be hidden from screen readers.

Making SVG Accessible

  • Meaningful inline SVG: Add role="img", a <title> element, and aria-labelledby referencing the title's ID
  • Decorative inline SVG: Add aria-hidden="true" and focusable="false"
  • SVG in <img> tag: Use a descriptive alt attribute, same as any image
  • Complex SVGs (charts): Add <desc> with a text summary of the data, plus ARIA roles on data points

Testing

Test with a screen reader (VoiceOver on Mac, NVDA on Windows) to verify your SVGs are announced correctly. Also test keyboard navigation for interactive SVGs.

After converting PNG to SVG, add the appropriate accessibility attributes before deploying to production.