Barrierefreies SVG – Alternativtexte & ARIA für skalierbare Grafiken
SVG (Scalable Vector Graphics) sind flexibel, auflösungsunabhängig und ideal für Icons, Diagramme oder interaktive Visualisierungen. Doch: Von sich aus sind SVGs nicht barrierefrei – ohne zusätzliche semantische Auszeichnung bleiben sie für Screenreader unsichtbar.
Warum SVG-Barrierefreiheit wichtig ist
Assistive Technologien benötigen Alternativtexte und semantische Hinweise, um visuelle Informationen nutzbar zu machen. SVGs sollten deshalb immer konsequent ausgezeichnet werden – je nach Einsatzzweck dekorativ oder informativ.
Grundregeln für barrierefreies SVG
| Ziel | Technik |
|---|---|
| Informative SVGs (z. B. Diagramme, Logos) | title, desc, aria-labelledby |
| Dekorative SVGs (z. B. Icons ohne Bedeutung) | aria-hidden="true" oder per CSS display: none für AT |
| Interaktive SVGs (z. B. Buttons, Charts) | role, Fokussteuerung, Tastaturzugänglichkeit |
Beispiel – Barrierefreies SVG mit Titel
<svg role="img" aria-labelledby="title1 desc1" xmlns="http://www.w3.org/2000/svg">
<title id="title1">FINK Brot Logo</title>
<desc id="desc1">Stilisiertes Brot in einer Ähre</desc>
<path d="..." />
</svg>Beispiel – Dekoratives SVG verstecken
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="..." />
</svg>Wichtig: focusable="false" ist relevant für ältere Browser/Screenreader-Kombis.
Best Practices
- Nutze title + desc statt nur alt – SVG kennt kein alt-Attribut.
- aria-labelledby für kombinierte Textelemente.
- role="img" für semantische Einordnung.
- Dekoratives SVG per aria-hidden="true" ausblenden, nicht beschreiben.
- Interaktive SVGs zusätzlich mit tabindex, aria-pressed etc. ausstatten.
WCAG-Bezug
Barrierefreies SVG unterstützt insbesondere diese Kriterien:
- 1.1.1 – Textalternativen für Nicht-Text-Inhalte
- 1.3.1 – Informationen und Beziehungen
- 4.1.2 – Name, Rolle, Wert (bei interaktiven SVGs)
Mehr zu unseren Leistungen im Bereich Digitale Barrierefreiheit erfahren Sie hier.
