Alt-Text prüfen
Alt-Text ist das HTML-Attribut, das ein Bild in Worten beschreibt. Für jemanden, der einen Screenreader nutzt, IST es das Bild, und für eine Suchmaschine ist es das stärkste Signal darüber, was das Bild zeigt. Dieses Werkzeug durchsucht jedes Bild auf der Seite, die Sie eingeben, und prüft den Alt-Text nicht nur auf Vorhandensein, sondern auf Güte: Links ohne zugänglichen Namen, Alt-Text, der nichts als ein Dateiname ist, doppelte Beschreibungen, Längen, die ein Screenreader abschneidet, und mutmaßliches Keyword-Stuffing werden je einzeln gemeldet.
Wozu dient Alt-Text?
Alt-Text hat zwei Aufgaben, und ein einziger Satz kann beide erfüllen. Die erste ist Barrierefreiheit: Wer die Seite blind mit einem Screenreader hört, bekommt diesen Text anstelle des Bildes vorgelesen. Die zweite ist die Suche: Google ermittelt aus dem alt-Attribut und dem umgebenden Text, was das Bild zeigt, und die Zuordnung in der Bildersuche beruht weitgehend darauf. Es ist zudem der Text, den ein Browser im Kasten anzeigt, wenn ein Bild nicht geladen werden kann. Allen dreien gemeinsam ist dies: Alt-Text soll das Bild jemandem beschreiben, der es nicht sehen kann.
Bei dekorativen Bildern ist alt=\"\" die richtige Verwendung
Nicht jedes Bild muss beschrieben werden. Trennlinien, Eckmuster und Hintergrundtexturen tragen keine Bedeutung; sie sind dekorativ, und richtig ist dort nicht, das alt-Attribut zu löschen, sondern es leer zu lassen: alt=\"\". Ein leeres alt weist den Screenreader an, das Bild zu überspringen, damit die Nutzerin nicht ohne Grund unterbrochen wird. Ein fehlendes Attribut ist etwas anderes: Manche Screenreader füllen die Lücke, indem sie den Dateinamen vorlesen, und die Nutzerin hört so etwas wie \"i-m-g Strich 2 4 5 1 Punkt j-p-g\". Dieses Werkzeug unterscheidet beide Fälle und wertet Ihr alt=\"\" niemals als Fehler.
Bilder in Links: der am häufigsten übersehene Fehler
Steht ein Bild allein in einem Link und hat der Link keinen eigenen Text, hängt der zugängliche Name dieses Links vollständig am Alt-Text. Fehlt auch der Alt-Text, hat ein Screenreader nichts anzusagen; wer mit der Tabulatortaste navigiert, hört nur \"Link\" und weiß nicht, wohin er führt. Genau darauf zielt das WCAG-Erfolgskriterium 2.4.4. Am häufigsten tritt dieser Fehler bei Logo-Kopfzeilen, Symbolen sozialer Medien und Bildbannern auf. Dieses Werkzeug unterscheidet die Fälle, indem es prüft, ob der Link eigenen Text hat: Ein leeres alt an einem dekorativen Bild in einem Textlink ist in Ordnung, dasselbe in einem Link ohne Text ist ein schwerer Mangel.
Länge: warum gelten 125 Zeichen als Richtwert?
HTML setzt für Alt-Text keine Längenbegrenzung, doch gängige Screenreader schneiden meist bei etwa 125 Zeichen ab. Deshalb gilt in der Branche der Richtwert, Alt-Text unter 125 Zeichen zu halten; in der Praxis deckt ein Satz aus fünf bis fünfzehn Wörtern die meisten Bilder ab. Braucht ein Bild wirklich eine lange Beschreibung, etwa ein komplexes Diagramm, hält man den Alt-Text kurz und verlegt die Einzelheiten in den Seitentext oder eine <figcaption>. So bekommen Screenreader-Nutzerin und sehende Leserin dieselbe Information.
Warum Keyword-Stuffing nach hinten losgeht
Das alt-Attribut in eine Keyword-Liste zu verwandeln ist eine alte Gewohnheit ohne heutigen Nutzen. Googles Bildrichtlinien sind eindeutig: Alt-Text mit Keywords vollzustopfen erzeugt ein schlechtes Nutzererlebnis und kann dazu führen, dass eine Website als Spam eingestuft wird. Die Probe: Lesen Sie den Alt-Text laut vor. Hören Sie einen natürlichen Satz, der das Bild beschreibt, ist er richtig geschrieben; hören Sie durch Kommas getrennte Begriffe, ist das eine Suchanfrage und keine Beschreibung. Dass das Keyword im Alt-Text vorkommt, ist völlig in Ordnung, solange es natürlicher Teil des Satzes ist.
Doppelte Alt-Texte
Tragen verschiedene Bilder einer Seite denselben Alt-Text, steckt meist eine Vorlage dahinter, die ihn automatisch einsetzt, etwa den Shopnamen auf jedes Bild einer Produktliste schreibt. Das führt Screenreader-Nutzer in die Irre, weil unterschiedliche Bilder gleich klingen, und es gibt der Suchmaschine nichts Unterscheidendes an die Hand. Jedes Bild sollte seinen eigenen Inhalt beschreiben; in einer Auflistung ist der Produktname der richtige Ausgangspunkt, in einer Galerie die abgebildete Szene.
Ihre Fragen
Häufig gestellte Fragen
Wirkt sich Alt-Text unmittelbar auf SEO aus?
In der Bildersuche ja, unmittelbar: Google ermittelt weitgehend aus dem Alt-Text und dem umgebenden Text, was ein Bild zeigt. Auf die Gesamtplatzierung der Seite wirkt er mittelbar; Alt-Text ist eines der Signale, die das Thema der Seite stützen, kein Rankingfaktor für sich. Alt-Text als Beschreibung des Bildes zu schreiben statt als Ranking-Werkzeug führt an beiden Stellen zum richtigen Ergebnis.
Wie lang sollte Alt-Text sein?
Unter 125 Zeichen ist der sichere Richtwert, weil gängige Screenreader dort abschneiden können. In der Praxis deckt ein Satz aus fünf bis fünfzehn Wörtern die meisten Bilder ab. Eine Untergrenze gibt es nicht, doch Ein-Wort-Bezeichnungen beschreiben ein Bild selten ausreichend.
Darf ich das alt-Attribut bei einem dekorativen Bild einfach löschen?
Nein, beides ist nicht dasselbe. Verwenden Sie bei dekorativen Bildern alt=\"\"; das weist den Screenreader an, sie zu überspringen. Das Attribut ganz zu löschen erzeugt Unklarheit, und manche Screenreader füllen die Lücke, indem sie den Dateinamen vorlesen.
Worin unterscheiden sich Alt-Text und das title-Attribut?
Alt-Text ist die Textentsprechung des Bildes und tritt an dessen Stelle, wenn das Bild nicht dargestellt werden kann oder mit einem Screenreader gehört wird. Title ist der Hinweis, der beim Überfahren mit der Maus erscheint; auf Touchgeräten ist er unsichtbar, und die Unterstützung durch Screenreader ist uneinheitlich. Denselben Text in beide zu schreiben führt dazu, dass manche Vorleseprogramme dieselbe Information zweimal ansagen. Title ist meist überflüssig; verwenden Sie ihn nur, wenn er eine andere Information trägt.
Meine Bilder haben Alt-Text, warum warnt das Werkzeug trotzdem?
Dieses Werkzeug schaut darauf, was der Alt-Text sagt, nicht nur ob er da ist. Alt-Text, der nur ein Dateiname ist, derselbe Text über mehrere Bilder hinweg, Längen über 125 Zeichen, überflüssige Voransätze wie \"Bild von\" und durch Kommas getrennte Keyword-Listen werden je einzeln gemeldet. Ein ausgefülltes alt-Attribut, das das Bild nicht beschreibt, wirkt in der Praxis kaum anders als ein leeres.
Wie gebe ich Bildern Alt-Text, die als Hintergrund geladen werden?
Als CSS-Hintergrund geladene Bilder haben kein alt-Attribut; Screenreader sehen sie überhaupt nicht. Bei dekorativen Bildern ist das kein Problem und sogar ein angemessenes Vorgehen. Ein aussagekräftiges Bild als Hintergrund auszuliefern ist jedoch ein Fehler in der Barrierefreiheit; ein solches Bild gehört mit einem <img>-Tag und eigenem Alt-Text ausgeliefert.
Durchsucht dieses Werkzeug meine ganze Website?
Nein, es prüft die eine Seite, die Sie eingeben. Um die Bilder aller Seiten Ihrer Website auf einmal zu prüfen, verwenden Sie unser Werkzeug Deep Crawl; es durchläuft die gesamte Website und wendet dieselben Regeln auf jede Seite an.