Accessible SVG

Accessible SVG means marking up scalable vector graphics so that assistive technology can interpret them: SVGs are resolution-independent and versatile, but without semantic markup they stay invisible to screen readers or are announced incorrectly – which matters for WCAG success criterion 1.1.1 (non-text content).

In practice

Informative SVGs, such as meaningful icons or diagrams, need role="img" together with a element linked via aria-labelledby and, optionally, a more detailed <desc>. Purely decorative SVGs that carry no additional information get aria-hidden="true" and focusable="false" instead, so they do not burden screen readers and keyboard focus unnecessarily.</desc>

Matching service

Sources

← Back to the glossary