Gute Alt-Texte für Bilder schreiben (Barrierefreiheit und SEO)

Ein Alt-Text ist die kurze Beschreibung eines Bildes im alt-Attribut des img-Elements, und er ist die wirkungsvollste einzelne Verbesserung der Barrierefreiheit, die die meisten Websites vornehmen können. Screenreader lesen ihn blinden und sehbeeinträchtigten Besuchern vor, Browser zeigen ihn an, wenn ein Bild nicht lädt, und Suchmaschinen stützen sich darauf, um zu verstehen, was ein Bild zeigt. Es ist außerdem eine rechtliche Frage: Das WCAG-Erfolgskriterium 1.1.1 verlangt eine Textalternative für alle Nicht-Text-Inhalte auf Konformitätsstufe A, der Mindeststufe, und Gesetze wie der European Accessibility Act bauen genau auf diesen Kriterien auf. Die gute Nachricht: Gute Alt-Texte zu schreiben ist eine Fertigkeit von Minuten, nicht von Wochen. Die Regeln passen auf eine Karteikarte: beschreiben, was am Bild in seinem Kontext zählt, es bei ungefähr einem knappen Satz belassen, Floskeln wie Bild von weglassen, rein dekorativen Bildern ein leeres alt-Attribut geben und das Attribut niemals ganz weglassen. Dieser Leitfaden geht jede Regel mit Beispielen durch, zeigt, wo Alt-Texte in WordPress leben, und endet damit, wie Sie jedes Bild auf Ihrer Website finden, dem noch einer fehlt.

Was ist ein Alt-Text und wer ist darauf angewiesen?

Im HTML-Quelltext ist der Alt-Text ein Attribut am Bildelement:

<img src="lighthouse.jpg" alt="Rot-weiß gestreifter Leuchtturm an einer Felsküste bei Sonnenuntergang">

Drei Zielgruppen konsumieren ihn, und wer an sie denkt, versteht fast jede Regel, die folgt. Screenreader-Nutzer hören den Alt-Text anstelle des Bildes, für sie ist er also schlicht das Bild. Laut WHO leben weltweit rund 2,2 Milliarden Menschen mit einer Form der Sehbeeinträchtigung, und ein erheblicher Teil von ihnen surft mit einem Screenreader. Browser zeigen den Text, wenn das Bild nicht laden kann, was bei langsamen Verbindungen und kaputten Deployments täglich vorkommt. Und Suchmaschinen-Crawler, die Bilder nicht wie Menschen sehen können, nutzen das alt-Attribut als wichtigstes Textsignal für den Bildinhalt.

Die formale Anforderung stammt aus dem WCAG-Erfolgskriterium 1.1.1 Non-text Content. Es steht auf Konformitätsstufe A, das heißt: Eine Website ohne Textalternativen scheitert an der untersten Hürde der Barrierefreiheit, egal wie gut alles andere gelöst ist.

Gute Alt-Texte schreiben: fünf Regeln, die fast alles abdecken

Alt-Text ist Schreiben, und wie alles Schreiben wird er mit ein paar Einschränkungen besser. Diese fünf tragen Sie durch nahezu jedes Bild:

• Inhalt und Zweck beschreiben, nicht Pixel. Fragen Sie, was das Bild in diesem Kontext vermittelt, und sagen Sie genau das. Dasselbe Foto einer Person am Laptop kann auf einer Support-Seite Supportmitarbeiterin beantwortet Kundenchats sein und in einem Artikel über Remote-Arbeit Arbeiten am Küchentisch.
• Konkret sein, aber beim Relevanten aufhören. Hund sagt weniger als Golden-Retriever-Welpe jagt einem Ball über eine Rasenfläche. Geht es im Artikel aber um Rasenpflege, zählt die Rasse womöglich weniger als der zerkaute Rasen.
• Bei etwa einem Satz bleiben. Eine weit verbreitete Faustregel sind rund 125 Zeichen, eine Konvention aus der Zeit älterer Screenreader, die längeren Text in Stücke zerlegten. Es ist keine harte Grenze, aber ein guter Zwang zur Kürze. Stellen Sie die wichtigen Wörter nach vorn.
• Bild von und Foto von weglassen. Screenreader kündigen das Element ohnehin als Grafik an, diese Formeln sind also reine Wiederholung. Die Art zu nennen lohnt nur, wenn sie zählt: Gemälde von, Screenshot von und Diagramm zu geben den Zuhörenden Orientierung.
• Bei verlinkten oder funktionalen Bildern das Ziel oder die Aktion beschreiben. Ein Logo, das zur Startseite verlinkt, sollte Firmenname, zur Startseite lauten und nicht die Grafik beschreiben. Ein Icon-Button, der eine Suche auslöst, sollte Suchen heißen. Sobald ein Bild etwas tut, schlägt die Funktion das Aussehen.

Ein Sonderfall verdient einen eigenen Satz: Bilder, die Text enthalten. Die WCAG raten davon ab, Text überhaupt in Bilder einzubacken, aber wo er existiert, etwa in einem Werbebanner, muss der Alt-Text diesen Text enthalten, denn für alle, die auf die Alternative angewiesen sind, ist er unsichtbar.

Gute und schlechte Alt-Texte: Beispiele im Vergleich

Beachten Sie das Muster in der schwachen Spalte: Dateinamen, einzelne Wörter und Beschreibungen von Pixeln statt von Bedeutung. Die Diagrammzeile zeigt den größten Abstand. Für Screenreader-Nutzer transportiert chart gar nichts, während eine einzeilige Zusammenfassung des Befunds die gesamte Grafik ersetzt. Ist ein Diagramm für eine Zeile zu komplex, fassen Sie die Kernaussage im Alt-Text zusammen und stellen Sie die vollständigen Daten daneben als Tabelle bereit.

Dekorative Bilder: wann ein leerer Alt-Text richtig ist

Nicht jedes Bild trägt Bedeutung. Ornamentale Trenner, abstrakte Hintergrundformen und Stockfotos, die nur Stimmung liefern, sind Dekoration, und das korrekte Markup dafür ist ein leeres alt-Attribut:

<img src="divider-ornament.svg" alt="">

Das leere Attribut ist ein bewusstes Signal, das Screenreadern sagt, das Bild vollständig zu überspringen, und genau das tun sehende Besucher faktisch auch. Das unterscheidet sich stark davon, das Attribut wegzulassen: Ohne alt-Attribut lesen viele Screenreader ersatzweise den Dateinamen vor, und der Besucher bekommt mitten im Satz Grafik Schrägstrich Trenner Bindestrich Ornament Bindestrich final Bindestrich v2 Punkt svg vorgelesen. Deshalb melden Prüfwerkzeuge fehlende alt-Attribute als Fehler, während sie leere als gültig behandeln. Das W3C bietet für die ehrlichen Grenzfälle einen praktischen Entscheidungsbaum für Alt-Texte.

Ein pragmatischer Test für die Frage, ob etwas dekorativ ist: Stellen Sie sich das Bild weggedacht vor. Verliert die Seite weder Information noch Funktion, ist ein leerer Alt-Text richtig. Verschwindet etwas Bedeutsames, beschreiben Sie es.

Alt-Texte in WordPress hinterlegen

WordPress gibt jedem Bild ein Alt-Text-Feld, und es ist in drei Klicks erreichbar:

• Im Block-Editor: Bildblock auswählen, und in der Blockeinstellungen-Seitenleiste erscheint unter Einstellungen das Feld Alternativtext. Dieser Wert landet im HTML der Seite.
• In der Mediathek: ein beliebiges Bild öffnen und das Feld Alternativtext in den Anhangdetails ausfüllen. Dieser Wert dient als Vorgabe, wenn das Bild künftig irgendwo eingefügt wird.
• Bei Beitragsbildern: Der Alt-Text stammt aus dem Mediathek-Wert dieses Bildes, Beitragsvorschaubilder erben also, was dort gespeichert ist.

Eine WordPress-Eigenheit ist für viel Verwirrung verantwortlich und verdient einen hervorgehobenen Warnhinweis: Den Alt-Text in der Mediathek zu ändern, ändert nichts an Bildern, die bereits in Beiträgen platziert sind. Der Block-Editor kopiert den Alt-Text beim Einfügen in den Beitragsinhalt, und ab da ist die Kopie unabhängig. Wenn Sie Alt-Texte in der Mediathek korrigieren und sich wundern, warum sich die Seiten nicht ändern, liegt es daran. Bestehende Platzierungen müssen in den Beiträgen selbst bearbeitet werden, oder mit einem Suchen-und-Ersetzen-Werkzeug, wenn der Umfang es verlangt.

Wo wir gerade im Medien-Workflow sind: Das Alt-Text-Feld ist weder das Titelfeld noch die Bildunterschrift. Der Titel ist überwiegend intern, die Bildunterschrift ist sichtbarer Text unter dem Bild, und nur das alt-Attribut bedient Screenreader und Crawler. Das falsche Feld auszufüllen ist der häufigste Weg, wie Websites zu hübschen Bildunterschriften und leeren alt-Attributen kommen.

Alt-Text und SEO: was Google tatsächlich sagt

Googles Dokumentation zur Bilder-SEO ist eindeutig: Beschreibende Alt-Texte sind ein Rankingfaktor für Google Images und helfen Google, sowohl das Bild als auch die Seite darum herum zu verstehen. Für Shops und Content-Websites ist die Bildersuche ein echter Traffic-Kanal, und das alt-Attribut ist ihr direktester Hebel. Dasselbe Dokument enthält die ebenso eindeutige Warnung: Alt-Attribute mit Keywords vollzustopfen führt zu einer schlechten Nutzererfahrung und kann dazu führen, dass Ihre Website als Spam wahrgenommen wird.

Praktisch übersetzt: Schreiben Sie den Alt-Text zuerst für die Zuhörenden, und wenn das Thema der Seite natürlich in die Beschreibung gehört, nehmen Sie es einmal auf. Blauer Nike Air Zoom Laufschuh, Seitenansicht ist ein guter Alt-Text, der zufällig die Wörter enthält, nach denen eine Käuferin sucht. Laufschuhe kaufen günstige Laufschuhe beste Laufschuhe 2026 ist Spam im Kostüm eines alt-Attributs. Sprechende Dateinamen (laufschuh-blau.jpg statt IMG_4032.jpg) und umgebender Text, der zum Bild passt, runden das Bild ab, aber der Alt-Text bleibt das stärkste Signal, das Sie vollständig kontrollieren.

Bilder ohne Alt-Text auf der eigenen Website finden

Gute Alt-Texte zu schreiben beginnt damit zu wissen, wo sie fehlen, und dafür gibt es Werkzeuge in jeder Größenordnung. Für eine einzelne Seite kann der Browser die Frage direkt beantworten: Öffnen Sie die Konsole der Entwicklerwerkzeuge und führen Sie einen Einzeiler aus, der jeden Übeltäter auflistet.

// Listet alle Bilder ohne alt-Attribut auf der aktuellen Seite
document.querySelectorAll('img:not([alt])').forEach((img) => console.log(img.src));

Für die seitenweise Prüfung mit visueller Rückmeldung markiert das kostenlose WAVE-Werkzeug von WebAIM jedes fehlende und verdächtige alt-Attribut direkt auf der gerenderten Seite, und Lighthouse in Chrome enthält die Prüfung in seinem Barrierefreiheits-Audit. Das Ausmaß des Problems ist gut dokumentiert: Die jährliche Analyse WebAIM Million der eine Million meistbesuchten Startseiten findet fehlende Alt-Texte Jahr für Jahr unter den häufigsten Barrierefreiheitsfehlern, auf rund der Hälfte aller getesteten Startseiten. Was Sie auf Ihrer eigenen Website auch finden, Sie sind in großer Gesellschaft, und anders als die meisten Barrierefreiheitsprobleme wird dieses Bild für Bild gelöst, in Minuten.

Wie InspectWP Ihre Alt-Texte prüft

Ein InspectWP-Bericht zählt die Bilder auf einer analysierten Seite und meldet im SEO-Bereich, wie viele ein alt-Attribut tragen und wie vielen eines fehlt, wobei die Fehlstellen als Warnung markiert werden. Damit haben Sie die Bestandsaufnahme fehlender Alt-Texte für eine WordPress-Website, ohne die Entwicklerwerkzeuge zu öffnen, und weil Berichte nach Zeitplan laufen können, fängt das auch die Rückschritte ab, die unweigerlich passieren, wenn neue Inhalte in Eile veröffentlicht werden. Kombinieren Sie die Zählung aus dem Bericht mit den Schreibregeln aus diesem Leitfaden, und der Weg ist kurz: die Bilder finden, beschreiben, was zählt, Dekoration stillschweigend leer lassen, und sowohl Ihre Screenreader-Nutzer als auch Ihr Bildersuche-Traffic streichen den Gewinn ein.