SVGKit
Back to blog

A practical guide to accessible SVG

Accessible SVG starts by deciding whether the graphic communicates information or is purely decorative. That decision determines its label, role, and fallback content.

Classify the graphic

Decorative icons should be hidden from assistive technology. Informative images need an accessible name, while complex charts and diagrams also need a longer text alternative that communicates the important relationships.

Provide the right accessible name

Use surrounding text, aria-label, aria-labelledby, or title and description elements according to the embedding context. Avoid repeating a nearby visible label because duplicate announcements make interfaces harder to navigate.

<svg role="img" aria-labelledby="t d" viewBox="0 0 24 24"> <title id="t"> Download report <desc id="d"> PDF, 2 pages </desc> <path d="…" /> </svg> role="img" tells assistive tech this is one meaningful graphic, not shapes. title + desc the accessible name and a longer description, wired by aria-labelledby. Decorative? No title, aria-hidden="true" — keep it out of the a11y tree. The guide walks each case.
The minimum accessible anatomy of a meaningful inline SVG icon.
An inline SVG icon markup annotated with role img, aria-labelledby, title and desc elements, plus side notes on decorative graphics.

Preserve focus and contrast

Interactive SVG controls need keyboard access, visible focus, and a clear role. Strokes, fills, and state changes should retain sufficient contrast across light, dark, forced-color, and high-contrast environments.

Test the final context

The same SVG can behave differently as an image, inline markup, CSS background, or component. Test the shipped embedding method with keyboard navigation and at least one screen reader, not only the source file.