Alt-Text für Bilder schreiben: Beispiele, Länge und die Einstellung in WordPress

Ein Screenreader erreicht dein Teamfoto auf der Über-uns-Seite und liest vor: „IMG_4521 Punkt jpg“. Für die Person, die das hört, ist an dieser Stelle der Seite eine Lücke. Für Google ist es eine verpasste Information. Beides lässt sich mit einem einzigen Feld beheben: dem Alt-Text.

Ein Alt-Text (alternativer Text) ist die Beschreibung eines Bildes im HTML-Attribut alt. Er wird vorgelesen, wenn das Bild nicht sichtbar ist, und er wird angezeigt, wenn das Bild nicht lädt. Suchmaschinen nutzen ihn zusätzlich, um den Bildinhalt einzuordnen. Wie du ihn schreibst, hängt vor allem davon ab, wofür das Bild auf der Seite da ist.

Die Grundregel: Beschreibe die Funktion, nicht nur das Motiv

Ein Alt-Text beantwortet die Frage: Was würde fehlen, wenn das Bild nicht da wäre? Dasselbe Foto kann je nach Seite einen anderen Alt-Text brauchen.

• Informatives Bild (Diagramm, Screenshot, Produktfoto): Der Alt-Text nennt, was man daraus lernt oder erkennt.
• Funktionales Bild (Logo mit Link, Icon-Button): Der Alt-Text beschreibt das Ziel oder die Aktion, nicht das Aussehen. Ein verlinktes Logo bekommt etwa „Zur Startseite von Muster GmbH“, nicht „blaues Logo“.
• Dekoratives Bild (Zierlinie, Hintergrundmuster, reine Stimmungsfotos ohne Aussage): Das Alt-Attribut bleibt leer, aber vorhanden. So überspringen Screenreader das Bild, statt den Dateinamen vorzulesen.

Vorher und nachher: fünf typische Fälle

• Dateiname: „IMG_4521.jpg“ wird zu „Drei Mitarbeiterinnen besprechen ein Layout am Bildschirm“.
• Keyword-Stapel: „Webdesign Berlin Webdesign Agentur Webdesign günstig“ wird zu „Wireframe einer Startseite auf einem Whiteboard“. Der erste Text ist für niemanden hilfreich und liest sich wie Spam.
• Zu allgemein: „Foto“ oder „Bild“ sagt nichts. Besser: „Messestand mit beleuchteter Rückwand und drei Besuchern“.
• Diagramm: „Grafik“ wird zu „Liniendiagramm: Seitenaufrufe steigen von Januar bis Juni um etwa das Doppelte“. Bei komplexen Grafiken gehört die Kernaussage zusätzlich in den sichtbaren Text daneben.
• Text im Bild: Steht im Bild ein Satz, gehört dieser (sinngemäß) in den Alt-Text. Besser ist es, wichtige Texte gar nicht in Bilder zu packen.

Wie lang darf ein Alt-Text sein?

Eine feste, verbindliche Zeichengrenze gibt es nicht. Als Faustregel gilt: so kurz wie möglich, so lang wie nötig. Barrierefreiheits-Leitfäden empfehlen häufig etwa 80 Zeichen als Obergrenze, in der SEO-Praxis werden oft 125 bis 150 Zeichen genannt. Wenn du dich an einem Satz orientierst, liegst du fast immer richtig. Wer für ein Bild mehr als zwei Sätze braucht, sollte die Information besser in den Fließtext oder eine Bildunterschrift verlagern.

Zwei Kleinigkeiten helfen beim Lesen: Fang nicht mit „Bild von“ oder „Foto von“ an, denn Screenreader sagen ohnehin, dass es sich um ein Bild handelt. Und schreib normale Sätze statt Schlagwortlisten.

Und das Keyword?

Wenn das Thema des Bildes zum Keyword der Seite passt, darf es im Alt-Text vorkommen, dann aber als Teil einer echten Beschreibung. Ein Alt-Text wie „WordPress-Dashboard mit geöffneter Mediathek und markiertem Feld für den Alternativtext“ funktioniert für Suchende, Screenreader und Google gleichermaßen. Erzwungene Wiederholung des Hauptkeywords in jedem Bild bringt dagegen nichts und wirkt auf Suchmaschinen eher verdächtig.

Alt-Text in WordPress eintragen

1. In der Mediathek: Medien → Mediathek → Bild anklicken. Im Detailfenster steht das Feld „Alternativer Text“. Der Text gilt dann überall, wo du dieses Bild neu einfügst.
2. Im Block-Editor: Bild-Block anklicken, in der rechten Seitenleiste das Feld „Alternativer Text (Alt-Text)“ ausfüllen. Das gilt nur für diese eine Verwendung und kann vom Mediathek-Wert abweichen, was bei unterschiedlichem Kontext sinnvoll ist.
3. Beitragsbild: Der Alt-Text kommt aus der Mediathek. Trag ihn dort ein, sonst fehlt er in Blog-Übersichten und Teasern.
4. Bestehende Seiten prüfen: Eine Seite im Browser öffnen, Rechtsklick auf ein Bild → „Untersuchen“ und im HTML nach alt="" schauen. Alternativ zeigen SEO-Crawler oder Plugins wie Rank Math, Yoast oder die Browser-Erweiterung „WAVE“ fehlende Alt-Texte gesammelt an.
5. Bei Page-Buildern: Je nach Builder liegt das Feld im Bild-Element, oft heißt es „Alt-Text“ oder „Alternativtext“. Prüf, ob der Builder dynamisch den Mediathek-Wert übernimmt, oder ob du ihn pro Element pflegen musst.

Warum das auch rechtlich nicht egal ist

Alternativtexte für Bilder gehören zu den Grundanforderungen an barrierefreie Websites (WCAG, Erfolgskriterium „Nicht-Text-Inhalt“). Welche Angebote vom Barrierefreiheitsstärkungsgesetz erfasst sind, erklären wir in unserem Beitrag Barrierefreie Website: Was das BFSG für Unternehmen wirklich bedeutet. Unabhängig davon verbessern gute Alt-Texte die Nutzbarkeit, und zwar für mehr Menschen als du vermutlich denkst: Sehbehinderte, Nutzende mit langsamer Verbindung und alle, bei denen ein Bild schlicht nicht lädt.

Checkliste zum Abhaken

• Jedes inhaltliche Bild hat einen eigenen, beschreibenden Alt-Text.
• Dekorative Bilder haben ein leeres Alt-Attribut.
• Verlinkte Bilder beschreiben das Linkziel.
• Kein Dateiname, keine Keyword-Listen, kein „Bild von“.
• Wichtige Aussagen stehen zusätzlich im sichtbaren Text.

Ein Alt-Text ist eine Kleinigkeit, aber er zeigt, wie sorgfältig eine Website gepflegt wird. Bilder, die nur Stockmaterial sind, lassen sich oft kaum sinnvoll beschreiben, dazu mehr in Stockfotos auf der Website. Und wenn die Bilder an sich zu groß sind, hilft Bilder für die Website optimieren. Wenn du eine bestehende Website mit vielen Seiten hast und nicht weißt, wo du anfangen sollst, schauen wir sie uns auf Wunsch gemeinsam mit dir an: zum Kontakt.