Alt-Texte richtig schreiben

Alternativtexte machen Bilder für Menschen zugänglich, die sie nicht sehen können. Hier lernst du die Regeln, siehst Beispiele – und erfährst, wann ein leerer Alt-Text die richtige Wahl ist.

Wozu Alternativtexte da sind

Ein Alt-Text (Alternativtext) ist die textliche Entsprechung eines Bildes. Er steht im HTML-Attribut alt des img-Elements und wird sichtbar, wenn das Bild selbst nicht verfügbar ist – und hörbar, wenn jemand es nicht sehen kann.

• Screenreader: Blinde und stark sehbehinderte Menschen lassen sich Webseiten vorlesen. Ohne Alt-Text hören sie nur den Dateinamen oder das Wort „Grafik" – die Information des Bildes geht verloren.
• Bilder deaktiviert oder nicht geladen: Bei langsamen Verbindungen, Ladefehlern oder abgeschalteten Bildern zeigt der Browser den Alt-Text an.
• SEO als Nebeneffekt: Suchmaschinen nutzen Alt-Texte, um Bildinhalte zu verstehen. Das ist ein willkommener Bonus – aber nicht der Zweck. Wer Alt-Texte mit Keywords vollstopft, schadet den Menschen, für die sie eigentlich gedacht sind.

Alt-Texte sind zudem eine der ältesten Anforderungen der Barrierefreiheit: Das Erfolgskriterium 1.1.1 „Nicht-Text-Inhalt" steht auf Konformitätsstufe A – der untersten Stufe der WCAG. Fehlende Alt-Texte gehören trotzdem seit Jahren zu den häufigsten Fehlern im Web.

Die Grundregeln

Funktion vor Beschreibung

Frag dich zuerst: Welche Aufgabe hat das Bild an dieser Stelle? Ein guter Alt-Text transportiert die Information oder Funktion des Bildes – nicht jedes sichtbare Detail. Ein Foto des Vorstands in einer Pressemitteilung braucht Namen und Anlass, keine Beschreibung der Krawattenfarben.

Der Kontext entscheidet

Dasselbe Bild kann je nach Umgebung völlig verschiedene Alt-Texte brauchen. Ein Foto eines Apfelbaums bedeutet im Gartenblog etwas anderes („Junger Apfelbaum der Sorte Elstar mit Stützpfahl") als auf der Team-Seite einer Obstplantage („Unsere Plantage in Altes Land bei der Ernte"). Schreib den Alt-Text immer für die konkrete Seite, nie „auf Vorrat" für das Bild an sich.

Länge: kurz, aber vollständig

Als Faustregel haben sich etwa 80 bis 125 Zeichen bewährt – ein bis zwei prägnante Sätze. Das ist keine technische Grenze, sondern eine Frage der Zumutbarkeit: Screenreader lesen den Alt-Text am Stück vor, ohne Pausiermöglichkeit wie im Fließtext. Was länger sein muss, gehört in eine Langbeschreibung (siehe unten).

Kein „Bild von …"

Screenreader kündigen Bilder ohnehin als Grafik an. Formulierungen wie „Bild von", „Foto zeigt" oder „Grafik:" sind deshalb doppelt gemoppelt. Ausnahme: Wenn die Art der Darstellung selbst relevant ist („Ölgemälde", „Röntgenaufnahme", „Screenshot"), darf sie in den Text.

Beispiele: gut und schlecht

Dekorative Bilder: leeres alt statt weglassen

Nicht jedes Bild trägt Information. Zierrahmen, Hintergrundmuster, stimmungsgebende Symbolfotos ohne inhaltlichen Bezug – all das darf ein Screenreader komplett überspringen. Dafür bekommt das Bild ein leeres Alt-Attribut: alt="".

Im Zweifel hilft ein einfacher Test: Würde der Seite Information fehlen, wenn das Bild verschwindet? Wenn nein, ist es dekorativ.

Verlinkte Bilder: das Ziel beschreiben

Ist ein Bild gleichzeitig ein Link, ändert sich die Aufgabe des Alt-Textes: Er muss beschreiben, wohin der Link führt oder was er auslöst – nicht, was zu sehen ist. Ein verlinktes Firmenlogo im Header bekommt also „Zur Startseite" oder den Firmennamen, nicht „Logo mit blauer Welle". Ein Vorschaubild, das zu einem Artikel führt, trägt den Artikeltitel als Alt-Text. Und wenn neben dem Bild bereits ein Textlink mit demselben Ziel steht, darf das Bild im Link alt="" bekommen, damit Screenreader-Nutzer den Link nicht zweimal hören.

Komplexe Grafiken und Diagramme

Infografiken, Diagramme, Organigramme oder Karten lassen sich nicht in 125 Zeichen fassen. Hier gilt ein zweistufiges Vorgehen:

1. Kurzer Alt-Text mit Thema und Kernaussage: „Liniendiagramm: Besucherzahlen verdreifachten sich zwischen 2023 und 2026."
2. Langbeschreibung mit allen relevanten Daten – am besten als normaler Text direkt unter der Grafik, als aufklappbarer Bereich oder als Datentabelle. Davon profitieren übrigens alle, nicht nur Screenreader-Nutzer.

Die Daten eines Diagramms als HTML-Tabelle anzubieten ist oft die sauberste Lösung: Tabellen sind für Screenreader gezielt navigierbar, eine vorgelesene Textwüste ist es nicht.

Logos, Icons und Text im Bild

• Logos: Der Alt-Text ist der Name des Unternehmens oder Produkts – „Wave Tools", nicht „Logo". Das Wort „Logo" darf ergänzt werden, wenn es zur Einordnung hilft.
• Icons mit Funktion: Beschreibe die Aktion („Menü öffnen", „Warenkorb"), nicht das Symbol („drei Striche", „Einkaufswagen").
• Icons neben Text: Steht die Beschriftung ohnehin daneben, ist das Icon dekorativ – alt="".
• Text im Bild: Grundsätzlich gilt: Text gehört als echter Text auf die Seite, nicht in Grafiken. Lässt sich das nicht vermeiden (etwa bei einem Veranstaltungsplakat), muss der komplette Text im Alt-Text oder in einer Langbeschreibung stehen – Wort für Wort, nicht sinngemäß verkürzt.

Alt-Texte in WordPress

WordPress bietet an zwei Stellen Felder für Alternativtexte:

• Mediathek: Jedes Bild hat dort ein Feld „Alternativtext". Was du hier einträgst, wird als Vorgabe übernommen, wenn du das Bild neu in Inhalte einfügst. Bereits eingefügte Bilder ändern sich dabei nicht rückwirkend.
• Block-Editor: Im Bild-Block kannst du den Alt-Text in den Block-Einstellungen unter „Alternativtext" pro Verwendung anpassen – genau richtig, weil der Kontext entscheidet. Der Wert im Block überschreibt den Wert aus der Mediathek.

Für dekorative Bilder lässt du das Feld in WordPress einfach leer – der Block-Editor schreibt dann korrekt alt="" ins HTML. Die Bildunterschrift (Caption) ist übrigens kein Ersatz für den Alt-Text: Sie wird allen angezeigt und hat eine andere Aufgabe.

Wie KI helfen kann – und wo die Grenzen liegen

Moderne Bild-KI beschreibt Fotos erstaunlich treffend und ist eine echte Hilfe, wenn hunderte Bilder in der Mediathek ohne Alt-Text liegen. Sie erkennt Motive, Personenzahl, Stimmung und oft sogar Text im Bild – und liefert in Sekunden einen brauchbaren Entwurf.

Was die KI nicht aus dem Bild lesen kann, ist der Kontext: Sie sieht „Frau am Laptop in hellem Büro", aber nicht, dass es sich um deine neue Geschäftsführerin handelt und das Bild ihre Vorstellung illustriert. Sie erkennt nicht, ob ein Bild auf dieser Seite dekorativ ist oder ob es als Link das Ziel beschreiben müsste.

Ob deine Alt-Texte in der Praxis funktionieren, prüfst du am besten mit einem Screenreader-Durchlauf und automatischen Prüftools – wie das geht, zeigt unser Leitfaden Website auf Barrierefreiheit testen.