Alt-Texte für Bilder:
schreiben und prüfen

Prüfen Sie den Bildinhalt, nicht nur ausgefüllte Felder

Der Alt-Text ist die Textalternative zu einem Bild an einer bestimmten Stelle der Seite. Er hilft Menschen mit Screenreader, Inhalte zu verstehen, und kann erscheinen, wenn die Bilddatei nicht verfügbar ist. Die Redaktion muss daher Information oder Zweck des Elements erhalten, wenn das Bild nicht sichtbar ist. Die Vorgabe, überall ein Keyword einzutragen, erfüllt diese Aufgabe nicht.

Auch Suchmaschinen nutzen Beschreibungen. Ein fehlendes alt beweist jedoch nicht, dass ein Bild aus der Suche ausgeschlossen ist; ein ausgefülltes Feld garantiert weder Impressionen noch Anfragen. So beschreibt etwa Yandex die Rolle von alt als Zusatzinformation für den Bilder-Crawler. Ersetzen Sie eine Barrierefreiheitsprüfung nicht durch das Versprechen eines SEO-Effekts.

Beginnen Sie mit einem echten Szenario: Ein Kunde wählt eine Produktfarbe, jemand liest eine Grafik oder betätigt eine Schaltfläche. Notieren Sie, was die Person erfahren oder tun soll. Daran lässt sich ein Alt-Text besser beurteilen als an der Zeichenzahl. Im Folgenden nutzen wir einen fiktiven Katalog für Schreibtischlampen; Modellnamen und Beispieldaten sind erfunden.

Alt-Text, Bildunterschrift, Dateiname und strukturierte Daten unterscheiden

In der Mediathek stehen mehrere Felder nebeneinander. Sie wirken austauschbar, erfüllen auf der veröffentlichten Seite aber unterschiedliche Aufgaben. Klären Sie vor einer Massenbearbeitung, wo Ihr Template die jeweiligen Werte ausgibt.

Der Titel „Lampe N-7“ in der Dateibibliothek beweist noch nicht, dass er als Alternativtext des Bildes ausgegeben wird. Umgekehrt korrigiert ein richtiger Alt-Text kein fremdes Titelbild in einer Artikelvorschau. Das sind zwei getrennte Prüfungen.

Benennen Sie verwendete Dateien nicht nur für eine schönere Adresse um, ohne die Verlinkungen zu prüfen. Eine neue URL erfordert die Aktualisierung aller Einbindungen und die Kontrolle, dass ältere Seiten weiterhin auf erreichbare Ressourcen zugreifen. Legen Sie bei neuen Uploads vorher einen verständlichen Namen fest.

Bestimmen Sie die Rolle jedes Bildes

Öffnen Sie den Entscheidungsbaum der W3C WAI. Klären Sie zuerst, ob das Bild Informationen vermittelt, eine Aktion auslöst oder der Gestaltung dient. Die Einordnung als Foto reicht nicht: Dasselbe Foto kann Produktbild, Bannerhintergrund oder Link zu einer Kategorie sein.

1. Enthält es relevante Informationen? Formulieren Sie, welchen Teil des Inhalts der Text ersetzen soll.
2. Ist es ein Link oder eine Schaltfläche? Prüfen Sie, ob der Zweck ohne Bild verständlich ist und ob dasselbe Element bereits Text enthält.
3. Ist es eine komplexe Grafik? Planen Sie neben dem kurzen Alt-Text eine Erklärung oder Daten ein.
4. Ist der Inhalt bereits vermittelt und das Bild nur noch dekorativ? Erwägen Sie ein leeres alt="".

Ergänzen Sie die Arbeitstabelle um „Begründung der Entscheidung“. Ein Eintrag wie „dekoratives Symbol, Vorteil daneben als Text benannt“ hilft späteren Redakteuren, die Entscheidung beizubehalten. Sonst kann der nächste automatische Audit aus Dekoration wieder unnötig vorgelesene Wörter machen.

Stufen Sie nicht vorab jede Gestaltung als dekorativ ein. Ist der einzige Unterschied zwischen zwei Produktvarianten auf dem Foto erkennbar, vermittelt das Bild Informationen, auch wenn daneben bereits der Modellname steht.

Schreiben Sie, was ohne das Bild verständlich sein muss

Beginnen Sie bei einem normalen informativen Foto mit dem Motiv und ergänzen Sie ein nützliches Unterscheidungsmerkmal. In unserem Katalog kann das Modell, die Gehäusefarbe oder ein gezeigtes Detail sein. Gleichen Sie jedes Wort mit dem Bild und verlässlichen Produktangaben ab.

„Schreibtischlampe N-7, graphitfarbenes Gehäuse, Gelenkarm“ beschreibt den sichtbaren Gegenstand. „Die beste Lampe günstig mit Lieferung kaufen“ beschreibt den Wunsch des Verkäufers. Ergänzen Sie keine Materialien, Auszeichnungen, Kompatibilitäten oder technischen Daten, die Sie nicht belegen können.

Ein hilfreicher Redaktionsschritt: zuerst vollständig erklären, dann alles streichen, was dem aktuellen Szenario nicht dient. Farbe ist bei der Variantenwahl wichtig, bei einer Anleitung zur Position des Schalters vielleicht nicht. Wörter wie „Foto“ oder „Diagramm“ sind sinnvoll, wenn das Format selbst relevant ist; ein pauschales Verbot ist unnötig.

Legen Sie nicht für alle Bilder pauschal 100, 125 oder 150 Zeichen fest. Die Aufgabe bestimmt die Länge. Lange technische Erklärungen gehören in den Haupttext; die kurze Alternative dient zur Orientierung. Bei der W3C-Technik H37 steht die Vermittlung des Bildinhalts im Mittelpunkt; wichtige Wörter im Bild dürfen ebenfalls nicht verloren gehen.

Galerie, Banner und Anleitungs-Screenshot prüfen

Die folgenden Beispiele betreffen unterschiedliche Stellen einer Website. Übernehmen Sie sie nicht automatisch für Ihre Fotos: Gleichen Sie die Formulierung zuerst mit dem tatsächlichen Bild und dem umgebenden Text ab.

Erzeugen Sie keine künstliche Einzigartigkeit, indem Sie bei identischen Aufnahmen „Seitenansicht“ durch „seitliche Perspektive“ ersetzen. Vermitteln die Bilder dieselbe Information, ist eine Textwiederholung nicht automatisch ein Fehler. Bei unterschiedlichen Aufnahmen sollte der Text den nützlichen Unterschied beschreiben.

Prüfen Sie bei einer Galerie Hauptbild und Vorschauschaltflächen getrennt. Ein Vorschaubild kann die Ansicht wechseln. Dann braucht der Nutzer einen verständlichen Aktionsnamen wie „Helligkeitsregler anzeigen“, nicht nur eine Pixelbeschreibung.

Fehlendes Attribut und bewusst leeren Wert unterscheiden

Die WAI-Empfehlungen für dekorative Bilder erlauben ein leeres alt, damit Dekoration nicht als Inhalt vorgelesen wird. Ein fehlendes Attribut ist jedoch ein anderer Zustand: Manche Screenreader lesen dann den Dateinamen vor.

<!-- Informatives Foto -->
<img src="lamp-n7.webp"
     alt="Schreibtischlampe N-7 in Graphit">

<!-- Dekoration ohne zusätzliche Information -->
<img src="section-divider.webp" alt="">

<!-- Bild als einziger Linkinhalt -->
<a href="/catalog/lamps/">
  <img src="lamps-category.webp" alt="Katalog für Schreibtischlampen">
</a>

<!-- Zweck bereits durch Text im selben Link erklärt -->
<a href="/instructions/lamp-n7.pdf">
  <img src="pdf-icon.svg" alt="">
  Anleitung zur Lampe N-7 herunterladen (PDF)
</a>

In dem WAI-Leitfaden zu funktionalen Bildern steht der Zweck der Aktion im Vordergrund. Prüfen Sie den ganzen Link oder die gesamte Schaltfläche, nicht isoliert das Bildfeld: Ein zusätzlicher Name über ARIA kann das Ergebnis ebenfalls beeinflussen.

Praktischer Test: Lesen Sie den Namen des Elements, ohne auf die Grafik zu schauen. Lautet er nur „Symbol“, „image“ oder wie eine Dateiadresse, bleibt die Aktion unklar. Wird derselbe Satz doppelt vorgelesen, prüfen Sie, ob ein dekoratives Symbol unnötig nochmals beschrieben wurde.

Komplexe Bilder brauchen eine Texterklärung

Ein Diagramm, eine Karte oder ein Prozessschema kann mehr Informationen enthalten, als in eine kurze Textalternative passen. Gemäß den WAI-Empfehlungen für komplexe Bilder wird die kurze Beschreibung durch eine zugängliche ausführliche Erklärung ergänzt. Das Format richtet sich nach dem Inhalt: Wertetabelle, Schrittfolge oder Beschreibung von Zusammenhängen.

Ein Beispieldiagramm zeigt 12, 18 und 15 Anfragen in drei Monaten. Der Alt-Text „Anfragen von Januar bis März; Werte in der Tabelle darunter“ verweist auf eine gleichwertige Darstellung. Daneben kann stehen: „Nach dem Anstieg im zweiten Monat sank die Zahl der Anfragen, blieb aber über dem ersten Monat.“ Ist diese Aussage für den Artikel wichtig, muss sie als normaler Text vorliegen, nicht nur als Linie im Diagramm.

Bei einem CRM-Einrichtungsschema sind Reihenfolge und Übergangsbedingungen wichtig. Bei einem Raumplan zählen der Standort des gesuchten Objekts und der Weg dorthin. „Details im Bild“ reicht nicht: Das verweist nur zurück auf dieselbe unzugängliche Informationsquelle.

Alt-Texte auf der veröffentlichten Seite prüfen

Öffnen Sie die Seite als normaler Besucher. Suchen Sie das Bild, öffnen Sie das Kontextmenü und wählen Sie die Elementuntersuchung. Die Bezeichnung hängt vom Browser ab; in Chrome öffnet sich der Bereich Elements der Entwicklertools. Suchen Sie das eigentliche img-Element, nicht den umgebenden Link oder Container.

1. Prüfen Sie, ob das Attribut alt vorhanden ist und welchen Wert es hat.
2. Vergleichen Sie den Wert mit dem Bild und dem umgebenden Text.
3. Prüfen Sie bei einer Schaltfläche oder einem Link den Namen des gesamten interaktiven Elements im Barrierefreiheitsbereich des Browsers.
4. Wiederholen Sie die Prüfung nach dem Öffnen der Galerie, dem Wechsel einer Produktvariante und auf einem schmalen Bildschirm.

Für Entwickler folgt eine kurze Konsolenprüfung aller img-Elemente im aktuellen Dokument. Sie liest nur die Seite und gibt eine Tabelle aus; sie sendet und verändert nichts.

console.table(Array.from(document.images, (img, index) => ({
  number: index + 1,
  source: img.currentSrc || img.src,
  state: !img.hasAttribute('alt') ? 'Attribut fehlt'
    : img.alt.trim() ? 'Text vorhanden' : 'leerer Wert',
  alt: img.getAttribute('alt')
})));

Diese Liste prüft weder die Formulierungsqualität noch CSS-Hintergründe, Bilder in anderen Dokumenten oder alle möglichen Anwendungszustände. Sie zeigt den aktuellen DOM nach Ausführung der Skripte. Unterscheiden sich Werte im ursprünglichen HTML und nach dem Laden, klären Sie, welche Komponente das Bild ersetzt.

Bilder und Quellseiten mit Screaming Frog erfassen

Eine Datei kann an Dutzenden Stellen mit verschiedenen Aufgaben vorkommen. Für die Korrektur brauchen Sie daher nicht nur eine Dateiliste, sondern auch die Adressen der Seiten, die sie verwenden.

1. Installieren Sie Screaming Frog SEO Spider von der offiziellen Website. Geben Sie die Start-URL in das Feld Enter URL to spider ein und starten Sie den Crawl mit Start.
2. Öffnen Sie den Reiter Images. Prüfen Sie die Filter getrennt: Missing Alt Attribute und Missing Alt Text.
3. Wählen Sie ein Bild und öffnen Sie unten den Reiter Image Details: Er zeigt die Datei zusammen mit ihren Verwendungsstellen.
4. Über Bulk Export → Images → All Images exportieren Sie alle Bilder mit Quellseiten und Alt-Texten. Die verfügbaren Menüpunkte können je nach Version abweichen.
5. Markieren Sie informative Bilder ohne Alternative, dekorative Ausnahmen, falsche Beschreibungen und unklare Linknamen.

Die Filternamen und den Export beschreibt die offizielle Anleitung von Screaming Frog. Der Filter Missing Alt Text umfasst auch leere Werte: Seine Zeilen dürfen nicht ungeprüft sämtlich als Fehler gelten.

Dokumentieren Sie den Umfang: gecrawlte Bereiche, ausgeschlossene URLs, Programmlimits und gesperrte Seiten. Fehlt eine erwartete Galerie im Export, prüfen Sie JavaScript-Ladevorgänge und Crawl-Einstellungen. „Keine Fehler gefunden“ sagt nichts über Seiten aus, die gar nicht geprüft wurden.

Korrigieren Sie die konkrete Bildeinbindung

Öffnen Sie für einen normalen Bildblock den betreffenden Beitrag oder die Seite, wählen Sie das Bild und suchen Sie die Einstellung für Alternativtext. Tragen Sie einen zur Rolle passenden Text ein oder markieren Sie das Bild als dekorativ, falls Ihre Version dies erlaubt. Speichern Sie die Seite und öffnen Sie ihre öffentliche URL erneut.

Die WordPress-Dokumentation unterscheidet zwischen der lokalen Blockeinstellung und dem Wert in der Mediathek: Der Blocktext gilt für eine bestimmte Einbindung, die Bibliothek liefert den Ausgangswert beim Einfügen. Erwarten Sie nicht, dass eine Änderung in der Mediathek automatisch alle früheren Einbindungen überschreibt.

Befindet sich das Bild im Block „Medien und Text“, prüfen Sie dessen eigene Einstellungen. Bei einem Page-Builder, einer Produktgalerie oder einem Theme-Template kann alt aus einer anderen Quelle stammen. Bei einer HTML-Einbindung ändern Sie das Attribut am img-Element selbst; bei einer gemeinsam genutzten Komponente die Regel, die das Markup erzeugt.

Diese Meldung beschreibt den Ort und das Prüfergebnis. „Überall alt eintragen“ erklärt weder das fehlerhafte Template noch die zu bewahrenden Ausnahmen.

Zuerst die allgemeine Regel korrigieren, dann Ausnahmen prüfen

Legen Sie für einen großen Katalog die Quellfelder fest: Modellname, Farbe, Perspektive und Detail. Bauen Sie die Regel nur auf verlässlich gepflegten Daten auf. Ist die Perspektive nicht gespeichert, erfinden Sie sie nicht. Ein kurzer präziser Text ist besser als eine ausführliche Erfindung.

Wenden Sie die Regel zuerst auf eine kleine Testauswahl an. Nehmen Sie ein Standardprodukt, mehrere Farben, unvollständige Eigenschaften, eine ausverkaufte Variante, eine Galerie und ein Produkt ohne Foto auf. Prüfen Sie auf das wörtliche „undefined“, interne Artikelnummern statt Namen oder Beschreibungen einer falschen Farbvariante.

Behalten Sie den Bezug zur Einbindungsstelle bei. Ein Lampenbild kann auf der Startseite eine Kategorie illustrieren, in einer Produktgalerie aber eine bestimmte Ausstattung zeigen. Ein gemeinsames Mediathekfeld reicht dafür nicht immer aus. Auf mehrsprachigen Websites muss der Alternativtext zur Sprache des umgebenden Inhalts passen.

KI kann einen Entwurf vorschlagen, doch die Redaktion muss Motiv, Kontext und Zweck prüfen. Besondere Vorsicht gilt erkannten Beschriftungen, Diagrammzahlen und technischen Details. Exportieren Sie vor Massenänderungen die alten Werte, vereinbaren Sie Ausnahmen und das Vorgehen zum Zurücksetzen. Template-Anpassungen können Teil folgender Leistung sein: technische Weiterentwicklung der Website.

Dateiprobleme getrennt von der Alt-Text-Qualität prüfen

Wird ein Bild nicht geladen, öffnen Sie seine Adresse und prüfen Sie die Serverantwort. Zugriffsfehler, gelöschte Dateien und Crawling-Sperren erfordern eigene Korrekturen. Hilfreiche Anleitungen: defekte Links finden und robots.txt prüfen.

Google empfiehlt reguläre Bildelemente mit funktionierendem src-Attribut, hilfreichen Kontext und passende Alternativtexte. CSS-Hintergründe indexiert Google nicht wie normale Seitenbilder. Bei einem responsiven picture-Element wird alt am enthaltenen img-Element gesetzt; Dateivarianten müssen den Inhalt bewahren. Ein Alt-Text gleicht keinen mobilen Zuschnitt aus, der ein wichtiges Detail entfernt.

Abmessungen, Kompression und verzögertes Laden beeinflussen die Geschwindigkeit, ersetzen aber keine Textalternative. Prüfen Sie sie mit PageSpeed Insights. Prüfen Sie danach manuell, ob das Bild beim Scrollen erscheint, die Bildunterschrift nicht überdeckt und auf dem Smartphone erkennbar bleibt.

Versprechen Sie keinen festen Traffic-Zuwachs durch ausgefüllte Alt-Texte. Dokumentieren Sie Änderungsdatum und Seitenliste, und beobachten Sie Bildimpressionen und Klicks in den verfügbaren Webmaster-Berichten. Berücksichtigen Sie Saisonalität, Sortimentswechsel und andere Anpassungen. Für den geschäftlichen Erfolg zählt der gesamte Besucherweg; verbinden Sie Bildprüfungen daher mit der Suchmaschinenoptimierung Ihrer Seiten.

Mit einer Prüfung abschließen, nicht nur mit einem Export ohne rote Zeilen

Wiederholen Sie nach der Veröffentlichung den Crawl auf dieselbe Weise. Vergleichen Sie identische Bereiche und speichern Sie einen datierten Bericht. Die Ausnahmeliste soll verbleibende leere Alt-Attribute erklären, nicht ungeprüfte Bilder verdecken. Haken Sie nur tatsächlich geprüfte Ergebnisse ab; diese Checkliste sendet keine Daten.

Halten Sie im Abschlussbericht mehrere nachprüfbare Vorher-nachher-Beispiele, Seitenadressen, Template-Verantwortliche und verbleibende Grenzen fest. Bei einem vollständigen Website-Launch gehören diese Ergebnisse zur Website-Abnahme.

Häufige Fragen zu Alt-Texten für Bilder