Praxisleitfaden Alt-Text bei Bildern
Fehlenden Alt‑Text richtig beheben
Vom markierten Bild zur passenden Textalternative. Sehen Sie am echten Beispiel, was fehlt und wie Sie die Korrektur prüfen.
image-altWCAG 1.1.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/alt-text-bild.html
Befund einordnen
Was der Scanner tatsächlich meldet
Im markierten Hero-Bild fehlt das alt-Attribut vollständig. Die Regel image-alt erkennt genau diesen strukturellen Fehler im HTML – unabhängig davon, wie gut die Illustration visuell gestaltet ist.
Warum das relevant ist
Ohne Textalternative bleibt Menschen, die das Bild nicht sehen, die Darstellung von Vulcanus vor der glühenden Esse verborgen. Dateiname und Bilddaten ersetzen diese Information nicht verlässlich.
Scanner-Signal
Das Element .forge-figure img besitzt kein alt-Attribut.
- Regel
image-alt- Referenz
- WCAG 1.1.1
Fehlende Alt-Texte gezielt finden
Ordnen Sie fehlende Alt-Texte ihren Seiten zu, bevor Sie Bildinhalte einzeln beurteilen.
Illustratives Beispiel · Fehlende Alt-Texte
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: 12, 48, 79.
97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.
Braucht dieses Bild einen beschreibenden Alt-Text?
Die richtige Korrektur folgt nicht aus dem Dateiformat, sondern aus der Aufgabe des Bildes an genau dieser Stelle.
Die Lehrskizze zeigt zwei Ebenen desselben Bildes. Der sichtbare Inhalt ändert sich nicht; das alt-Attribut ergänzt die Information für Situationen, in denen das Bild nicht wahrgenommen wird.
Passende Umsetzung auswählen
Originalbeleg
Die Fundstelle im Seitenkontext
Die Markierung zeigt das betroffene Bild innerhalb des vollständigen Ausschnitts. So lässt sich seine Aufgabe zusammen mit Überschrift, Begleittext und Motiv beurteilen.
Das Hero-Bild vermittelt mit Vulcanus vor der Esse eigene Information. Ohne alt-Attribut fehlt diese Aussage Menschen, die das Bild nicht sehen.
Im Code beheben
Die Korrektur im HTML
Die Illustration trägt an dieser Stelle eigenständige Information. Deshalb erhält das vorhandene img-Element ein nicht leeres alt-Attribut; Quelle und Layout bleiben unverändert.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
alt="Stilisierte Darstellung des Vulcanus vor einer glühenden Esse"
Ohne Code In einem CMS ergänzen Sie den Alternativtext im Bild- oder Medienfeld, speichern die Änderung und prüfen anschließend die veröffentlichte Seite erneut.
Vollständigen Code vergleichen
Vorher
<img src="vulcanus.svg">Nachher
<img src="vulcanus.svg"
alt="Stilisierte Darstellung des Vulcanus vor einer glühenden Esse">Markierte Zeilen wurden geändert
Text formulieren
So entsteht ein brauchbarer Alternativtext
Der Text soll dieselbe Aufgabe erfüllen wie das Bild – nicht jedes sichtbare Detail protokollieren.
- 1
Lesen Sie Überschrift, Bildunterschrift und Nachbartext zuerst: Was fehlt ohne das Bild?
- 2
Benennen Sie genau diese Information mit wenigen konkreten Wörtern.
- 3
Lassen Sie Einleitungen wie „Bild von“ weg, wenn die Bildart nicht selbst relevant ist.
- 4
Prüfen Sie den Satz im Zusammenhang, nicht als isolierten Dateikommentar.
Fehlversuche vermeiden
Häufige Korrekturen, die das Problem nur verschieben
Den Dateinamen einsetzen
alt="vulcanus-final.svg" beschreibt die Ablage, nicht die sichtbare Information.
Jedes Detail aufzählen
Eine lange Inventarliste belastet die Ausgabe. Relevant ist hier das Motiv Vulcanus vor der Esse.
alt="" pauschal verwenden
Ein leeres Attribut behebt zwar den strukturellen Scanner-Befund, wäre bei diesem informativen Bild aber fachlich falsch.
Nur den title-Text ergänzen
Das title-Attribut ist kein verlässlicher Ersatz für die Textalternative des img-Elements.
Korrektur nachprüfen
Beim erneuten Scan wird am ausgewählten Bild kein image-alt-Verstoß mehr gemeldet. Der reparierte Ausschnitt bleibt ansonsten identisch.
So prüfen Sie die Korrektur nach
- Die veröffentlichte Seite öffnen und prüfen, dass der neue Alternativtext am Bild vorhanden ist.
- Die Regel image-alt für diese Seite erneut ausführen.
- Den Alternativtext im Seitenkontext lesen: Er soll das Bild ersetzen, ohne benachbarte Informationen zu wiederholen.
Geprüft wurde ausschließlich die Regel image-alt an dieser Fundstelle. Das Ergebnis ist kein Nachweis vollständiger Barrierefreiheit der Kalibrierseite.
Prüfumfang
Was der automatische Test leisten kann – und was nicht
Automatisierung kann das fehlende alt-Attribut an gerenderten img-Elementen erkennen. Die inhaltliche Entscheidung bleibt kontextabhängig.
Automatisch prüfbar
- Ein img-Element ohne alt-Attribut erkennen
- Die Fundstelle mit Selektor und Seitenausschnitt zuordnen
- Nach der Korrektur dieselbe Regel erneut ausführen
Im Kontext zu entscheiden
- Entscheiden, ob das Bild informativ, dekorativ oder funktional ist
- Bewerten, ob der Text die relevante Bildaussage im Kontext ersetzt
- Weitere Barrieren und komplexe Interaktionszustände beurteilen