Accessible SVG
Was Ihr SVG dem Vorleseprogramm sagt
Dekoration, Logo-Link, Symbol-Schaltfläche, Karte: vier Aufgaben, vier Ansagen.
SVG-Werkstatt
Eine Form. Vier völlig verschiedene Ansagen.
Entscheidend ist nicht die Zeichnung, sondern ihre Aufgabe. Diese Tafel zeigt, was sichtbar bleibt, was im Accessibility Tree landet und welcher Code beides verbindet.
Dekoration
Die Route steht bereits im Text.
aria-hidden="true"Logo im Link
Das Bild ist der einzige Linkinhalt.
title → aria-labelledbySymbol im Bedienelement
Die Aktion braucht den Namen, nicht der Pfeil.
aria-label am buttonInformative Grafik
Stationen und Verlauf sind der Inhalt.
Bahnhof Aussichtspunkt See Bahnhof
Danach folgen Verlauf und Stationen aus desc.
Namensweg
So wird aus einer ID eine verständliche Ansage
Das sichtbare text-Element im SVG benennt die Grafik nicht automatisch. Die Verknüpfung macht den Unterschied.
role="img"fasst die Zeichnung als ein Bild zusammenaria-labelledby=
"route-name"sucht genau diese ID<title id=
"route-name">liefert den kurzen Namenaria-describedby="route-description" führt auf desc. Dort steht die längere Erklärung. Für komplexe Diagramme gehört dieselbe Kernaussage zusätzlich sichtbar neben die Grafik, damit sie allen zur Verfügung steht.
Zum Kopieren
Der vollständige Code für jede Aufgabe
Dekoratives Inline-SVG
Aus dem Accessibility Tree entfernen. Es darf weder Inhalt noch Aktion tragen.
<svg viewBox="0 0 360 150"
aria-hidden="true" focusable="false">
<path d="M31 111l71-44 62 24 71-52 92 60"></path>
</svg>SVG-Logo als Linkinhalt
Der Name beschreibt das Ziel. Das Wort „Logo“ ist dafür nicht nötig.
<a href="/">
<svg viewBox="0 0 180 48" role="img"
aria-labelledby="logo-name">
<title id="logo-name">spanier.one – Startseite</title>
<path d="M8 30h72l18-18h74"></path>
</svg>
</a>SVG im Symbol-Button
Die Schaltfläche nennt die Aktion. Ihr Symbol bleibt stumm.
<button type="button" aria-label="Karte herunterladen">
<svg viewBox="0 0 48 48"
aria-hidden="true" focusable="false">
<path d="M24 6v24m0 0L14 20m10 10 10-10M8 40h32">
</path>
</svg>
</button>Informative Inline-Grafik
Ein kurzer Name identifiziert sie. Die Beschreibung liefert den Inhalt.
<figure>
<svg viewBox="0 0 560 240" role="img"
aria-labelledby="route-name"
aria-describedby="route-description">
<title id="route-name">Rundweg mit drei Stationen</title>
<desc id="route-description">
Vom Bahnhof über den Aussichtspunkt zum See und zurück.
</desc>
<path d="M65 180C102 114 169 63 243 80S420 157 481 70">
</path>
</svg>
<figcaption>
Rundweg: Bahnhof, Aussichtspunkt, See; Rückkehr zum Bahnhof.
</figcaption>
</figure>So prüfen Sie es
Vier Fragen reichen für den ersten Durchgang
- Hat es eine Aufgabe? Dekoration bleibt stumm.
- Löst es etwas aus? Dann benennt der Link oder Button das Ziel.
- Trägt es Information? Dann braucht es einen knappen Namen.
- Ist der Inhalt komplex? Dann ergänzen Sie eine sichtbare Erklärung.
Prüfen Sie im Accessibility Tree des Browsers und mit einem Vorleseprogramm. Erwartet wird pro SVG genau die oben gezeigte Ausgabe – ohne Dateinamen und ohne einzelne Pfade.
Aus dem Prüfbericht
Vier Fälle, vier Befunde
Kritisch Das SVG-Logo hat nur einen Dateinamen Regel image-alt
Ein img ohne alt liest den Dateinamen vor. alt="Nordroute Wandertouren" nennt die Marke.
Kritisch Die Symbol-Schaltfläche hat keinen Namen Regel button-name
Das SVG im Button ist kein Text. aria-label="Karte als PDF laden" liefert das Wort.
Kritisch Das Inline-SVG hat keinen Namen Regel svg-img-alt
Wörter in der Grafik sind nicht der Name. role="img" und aria-label am svg beschreiben die Karte.
Kritisch role="img" ohne Beschriftung Regel role-img-alt
Die Gruppe mit fünf Sternen heißt nur „Grafik“. aria-label="4 von 5 Sternen" sagt die Wertung.
Zum Mitnehmen
Die SVGs, korrigiert
Ein Attribut pro Fall. Kein Pixel ändert sich.
Korrektur in 2 Schritten ansehen
Logo und Schaltfläche benennen
alt am img, aria-label am button. Das SVG selbst bleibt unverändert.
KorrekturvergleichSchritt 1 · HTML Vorher
<img src="logo-nordroute.svg"> <button type="button"> <svg aria-hidden="true"><use href="#icon-download"></use></svg> </button>Nachher
<img src="logo-nordroute.svg" alt="Nordroute Wandertouren"> <button type="button" aria-label="Karte als PDF laden"> <svg aria-hidden="true"><use href="#icon-download"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Nordroute Wandertouren, Grafik“ und „Karte als PDF laden, Schaltfläche“.
Inline-SVG und Sterne als Bild benennen
role="img" macht die Gruppe zu einem Bild, aria-label nennt, was es zeigt.
KorrekturvergleichSchritt 2 · HTML Vorher
<svg viewBox="0 0 320 200"> <text x="40" y="60">Bucht</text> … </svg> <div class="stars">★★★★☆</div>Nachher
<svg viewBox="0 0 320 200" role="img" aria-label="Karte der Nordroute mit Bucht, Bach, Altstadt und Hügel"> <text x="40" y="60">Bucht</text> … </svg> <div class="stars" role="img" aria-label="4 von 5 Sternen">★★★★☆</div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Karte der Nordroute …, Grafik“ und „4 von 5 Sternen, Grafik“.