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.
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.