SVG zugänglich
SVGs brauchen Semantik, wenn sie Inhalte transportieren.
Das Thema dieser Seite: SVGs müssen entweder eindeutig beschriftet oder bewusst als dekorativ markiert sein.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check erkennt SVGs ohne semantische Informationen und bewertet, ob sie für Screenreader sinnvoll beschrieben sind.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| SVG mit Titel/Label | Inhalt ist zugänglich | OK |
| SVG ohne Semantik | Unklare Bedeutung | Warnung |
| SVG als Icon ohne Kennzeichnung | Screenreader liest Kauderwelsch | Kritisch |
Kontext & Problemraum
SVGs werden häufig als Icons, Logos oder Infografiken eingesetzt. Ohne Semantik gehen wichtige Informationen für Screenreader verloren.
| Situation | Symptom | Risiko |
|---|---|---|
| SVG-Icons im Menü | Keine Label | Navigation nicht bedienbar |
| Infografik als SVG | Kein Titel/Desc | Inhalt nicht zugänglich |
| Logo-Icon im Footer | Fehlende Beschreibung | Marke wird nicht erkannt |
Entscheidungslogik
Wie SVGs korrekt beschrieben werden.
| Wenn | Dann | Empfehlung |
|---|---|---|
| SVG ist informativ | Beschriftung nötig | role="img" und aria-labelledby |
| SVG ist dekorativ | Keine Semantik | aria-hidden="true" setzen |
| SVG als Icon neben Text | Text erklärt Inhalt | SVG dekorativ behandeln |
Erklärende Details
SVGs können per <title> und <desc> beschrieben werden. Ohne diese
Informationen sind sie für assistive Technologien wertlos.
Beispiel: Informative SVG
<svg role="img" aria-labelledby="titel desc">
<title id="titel">Standort Berlin</title>
<desc id="desc">Karte mit Pin für Berlin</desc>
...
</svg>Beispiel: Dekorative SVG
<svg aria-hidden="true" focusable="false">...</svg>Risiken, Grenzen & Einschränkungen
| Risiko | Folge | Gegenmaßnahme |
|---|---|---|
| SVG ohne Label | Screenreader liest unklare Inhalte | title/desc oder aria-label setzen |
| Zu viele beschreibende SVGs | Länge in Screenreadern | Nur informative SVGs beschreiben |
| Inline-SVG ohne focusable | Fokus-Probleme in manchen Browsern | focusable="false" für dekorative Icons |
Interne Vernetzung
Verwandte Checks: Alt-Texte vorhanden, Formate sinnvoll, Saubere Dateinamen.