Barrierefreies SVG
SVGs (Scalable Vector Graphics) sind auflösungsunabhängig und vielseitig einsetzbar, ohne zusätzliche semantische Auszeichnung bleiben sie für Screenreader aber unsichtbar oder werden falsch interpretiert – relevant für WCAG-Kriterium 1.1.1 (Nicht-Text-Inhalte).
In der Praxis
Informative SVGs, etwa aussagekräftige Icons oder Diagramme, brauchen role="img" zusammen mit einem über aria-labelledby verknüpften -Element und optional einer ausführlicheren <desc>. Rein dekorative SVGs, die keine zusätzliche Information tragen, erhalten stattdessen aria-hidden="true" sowie focusable="false", damit sie Screenreader und Tastaturfokus nicht unnötig belasten.</desc>