Praxisleitfaden Textalternativen für SVG
SVG-Grafiken zugänglich beschriften
Erkennen Sie namenlose SVG-Grafiken und prüfen Sie die passende Beschriftung.
svg-img-altWCAG 1.1.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-svg-img-alt.html
Befund verstehen
Die Karte hat Beschriftungen, aber keinen Namen
Scanner-Signal
svg-img-alt meldet .map-card svg: Das SVG mit role="img" besitzt keinen zugänglichen Namen.
Technische Einordnung
- Regel
svg-img-alt- Referenz
- WCAG 1.1.1
Die Karte zeigt San Pablo Bay, Pinole Creek und weitere Ortsangaben als SVG-Text. Diese sichtbaren Beschriftungen benennen das als Bild zusammengefasste SVG nicht automatisch. Auch die Bildunterschrift außerhalb des SVG ist hier nicht als Name verknüpft.
Bedeutung im Nutzungskontext
Wer die Seite mit einem Screenreader liest, kann die Grafik ohne Namen nicht verlässlich als schematische Karte von Pinole einordnen. Die räumliche Übersicht erschließt sich aus den gezeichneten Pfaden allein nicht.
Diagnose am SVG
Rolle: img
Name: fehlt
Kein <title>-Kindelement, kein aria-label, kein wirksames aria-labelledby und kein title-Attribut.SVG-Namen mit ihren Inhalten prüfen
Lokalisieren Sie unbenannte Grafiken und beurteilen Sie anschließend, welche Information jede Darstellung vermitteln soll.
Illustratives Beispiel · Unbenannte SVG-Grafiken
3 von 100 Seiten3 % mit diesem Befund im Beispiel
Ein Feld steht für eine Seite. Ein Kreuz markiert eine betroffene Seite.
Betroffene Seiten im Beispiel: 16, 43, 78.
97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.
Was soll die Grafik vermitteln?
Wählen Sie die Beschriftung nach Inhalt, Funktion und Einbindung des SVG.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Informative Karte | Das Inline-SVG vermittelt eine Übersicht wie die Landschaftskarte von Pinole. | Geben Sie der Grafik einen Namen, der Thema und Zweck benennt. Erläutern Sie notwendige räumliche Zusammenhänge zusätzlich im Text. |
| Reines Schmuckelement | Das SVG fügt dem vorhandenen Text keine Information hinzu und hat keine Funktion. | Blenden Sie es mit aria-hidden="true" für assistive Technik aus. Prüfen Sie vorher, dass es weder fokussierbar ist noch wichtige Inhalte enthält. |
| Symbol einer Aktion | Das SVG steht in einer Schaltfläche oder einem Link. | Benennen Sie das Bedienelement nach seiner Aktion. Ein dekoratives Symbol darin kann verborgen bleiben, wenn der Name des Bedienelements vollständig ist. |
Fundstelle betrachten
Die vollständige Karte im Zusammenhang
Der Ausschnitt enthält den Seiteneinstieg über Pinole, die Landschaftsübersicht und den Hinweis „nicht zur Navigation“. So bleibt die Aufgabe der Grafik nachvollziehbar.
Die umrahmte Karte ordnet Bucht, Bach, Innenstadt und Hügelland visuell ein. Der technische Befund betrifft ihren fehlenden zugänglichen Namen, nicht die Sichtbarkeit der eingezeichneten Wörter.
SVG beschriften
Den Namen direkt am SVG ergänzen
Das bestehende SVG erhält ein aria-label mit Thema, dargestellten Orten und Verwendungsgrenze. Die vorhandene Bildrolle bleibt bestehen. Pfade, sichtbare Beschriftungen und Layout ändern sich dadurch nicht.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
aria-label="Schematische Karte von Pinole: San Pablo Bay, Ufer, Pinole Creek, Innenstadt und Hügelland; nicht zur Navigation."
Im CMS oder Komponentenbaukasten Bearbeiten Sie die Komponente, die das Inline-SVG ausgibt. Ein Alt-Text-Feld der Medienverwaltung hilft nur, wenn es tatsächlich einen Namen am gerenderten SVG erzeugt.
Vollständigen Code vergleichen
Vorher
<svg role="img" viewBox="0 0 560 520">
<!-- Kartenpfade und sichtbare Ortsnamen -->
</svg>Nachher
<svg role="img" viewBox="0 0 560 520"
aria-label="Schematische Karte von Pinole: San Pablo Bay, Ufer, Pinole Creek, Innenstadt und Hügelland; nicht zur Navigation.">
<!-- Kartenpfade und sichtbare Ortsnamen -->
</svg>Markierte Zeilen wurden geändert
Einbindung prüfen
Die Beschriftung muss im fertigen SVG ankommen
Kontrollieren Sie den gerenderten Namen nach Export, Einbau und Veröffentlichung.
- 1
Für dieses Inline-SVG verwenden Sie aria-label. Ein alt-Attribut am svg-Element ersetzt diese Benennung nicht.
- 2
Ein nicht leeres <title> als direktes Kind ist eine weitere Möglichkeit. Bei aria-labelledby müssen die referenzierten IDs vorhanden und eindeutig sein.
- 3
Prüfen Sie bei wiederverwendeten SVG-Komponenten jede Instanz: Ein fest eingebauter Name passt nicht automatisch zu jedem Seitenkontext.
- 4
Wird eine SVG-Datei über <img> eingebunden, beschriften Sie das img-Element. Dieser Einbau gehört zur Regel image-alt.
Fehlversuche vermeiden
Sichtbarer Text allein genügt hier nicht
Auf die Ortsnamen im SVG vertrauen
Die <text>-Elemente sind Teil der Zeichnung. Der ursprüngliche Axe-Befund zeigt, dass sie dem SVG mit Bildrolle keinen Namen geben.
Nur die Bildunterschrift ändern
Eine benachbarte figcaption ist nicht automatisch der Name des SVG. Verknüpfen Sie geeigneten Text ausdrücklich oder benennen Sie das SVG direkt.
Die Karte zum Verschwinden bringen
aria-hidden="true" würde die informative Karte für assistive Technik verbergen. Ein ausbleibender Regelbefund wäre dann kein Beleg für eine gleichwertige Textalternative.
Ein beliebiges Wort als Erfolg werten
„Grafik“ kann eine nicht leere Beschriftung sein, erklärt aber weder Pinole noch den Zweck der Karte. Die Regel bewertet nicht die fachliche Qualität des Namens.
Dieselbe SVG-Grafik besteht den Re-Test
Nach Ergänzung des aria-label liefert svg-img-alt am unveränderten Ziel einen tatsächlichen Pass. Die rohe Darstellung vor und nach der Reparatur ist pixelgleich; geändert wurde die programmatische Benennung.
Im Beispiel dokumentiert
Gelöst
Das SVG besitzt jetzt aria-label="Schematische Karte von Pinole: San Pablo Bay, Ufer, Pinole Creek, Innenstadt und Hügelland; nicht zur Navigation.".
Was Sie zusätzlich beurteilen müssen
Der Re-Test belegt die technische Benennung dieser SVG-Grafik. Ob alle relevanten Karteninformationen gleichwertig vermittelt werden, bleibt manuell zu beurteilen.
Ein Name ist prüfbar, die Kartenaussage braucht UrteilPrüfauftrag für Ihre Umsetzung
- Prüfen Sie auf der veröffentlichten Seite, ob .map-card svg den ergänzten Namen besitzt.
- Führen Sie svg-img-alt erneut aus und kontrollieren Sie genau diese Grafik.
- Lesen Sie die Karte mit einem Screenreader: Wird sie verständlich benannt und reicht der begleitende Text für ihren Zweck?
Nach der Korrektur
Rolle: img
Name aus aria-label: Schematische Karte von Pinole: San Pablo Bay, Ufer, Pinole Creek, Innenstadt und Hügelland; nicht zur Navigation.
svg-img-alt: Pass am selben SVG.Prüfgrenzen kennen
Ein Name ist prüfbar, die Kartenaussage braucht Urteil
Der automatische Befund unterstützt die technische Korrektur. Die inhaltliche Prüfung ergänzt ihn.
Automatisch prüfbar
- Fehlende zugängliche Namen an SVG-Grafiken mit erfasster Bildrolle erkennen.
- Die betroffene Grafik anhand des Selektors und der Abbildung zuordnen.
- Nach der Änderung prüfen, ob dieselbe Regel am gleichen SVG besteht.
Im Kontext zu entscheiden
- Bewerten, ob Name und Begleittext die relevante Aussage dieser Karte vermitteln.
- Entscheiden, ob zusätzlich eine ausführliche Beschreibung von Lagebeziehungen oder Wegen nötig ist.
- Ausgabe mit Screenreader sowie interaktive Kartenfunktionen gesondert prüfen.