Alt-Texte schreiben: Der Zweck des Bildes entscheidet

Was ist ein Alt-Text?

Der Alt-Text steht im alt-Attribut eines Bildes. Screenreader lesen ihn vor, und der Browser zeigt ihn an, wenn das Bild nicht lädt. Für Menschen, die das Bild nicht sehen, ersetzt er die visuelle Information. Auf der Seite selbst ist er meist unsichtbar. Im CMS findest du ihn als Feld „Alternativtext“ in der Mediathek oder im Bildblock. Er hilft auch, wenn Bilder bei langsamer Verbindung nicht laden, und Google nutzt ihn, um Bilder einzuordnen.

WCAG verlangt im Kriterium 1.1.1 auf Stufe A, dass Nicht-Text-Inhalte eine Textalternative mit demselben Zweck haben. Das ist eine der grundlegendsten Anforderungen und betrifft fast jede Website.

Wie schreibe ich einen guten Alt-Text?

Frag zuerst: Was würde ohne das Bild fehlen? Ein Produktfoto kann eine relevante Eigenschaft zeigen: „Rucksack mit geöffnetem Laptopfach“. In einem Rezept kann die Abbildung einen Arbeitsschritt erklären. Beschreibe die Information, die für die Aufgabe zählt, statt jede sichtbare Einzelheit aufzuzählen. Im Shop genügt für ein Produktfoto oft „Wanderschuh Alpina in Grau, Seitenansicht“; auf der Detailansicht der Sohle zählt dagegen „Profilsohle mit tiefen Rillen“.

Dasselbe Foto kann je nach Seite einen anderen Text brauchen. Das Porträt einer Mitarbeiterin auf der Kontaktseite heißt vielleicht „Anna Weber, Ansprechpartnerin für Partnerschaften“. In einem Bericht über ein Teamtreffen zählt eher, was sie gerade tut. Formuliere knapp und lass Wörter wie „Bild von“ weg: Screenreader kündigen das Element meist bereits als Grafik an. Eine feste Längengrenze nennt das W3C nicht. Für die meisten Bilder reichen ein bis zwei kurze Sätze; wird es mehr, gehört die Information vermutlich in den Text. Lies den Alt-Text zur Probe zusammen mit dem umgebenden Absatz. Klingt etwas doppelt oder fehlt etwas, passe ihn an.

Wann bekommt ein Bild einen leeren Alt-Text?

Wenn ein Bild nur schmückt und keine zusätzliche Information vermittelt, schreibst du alt="". Beispiele sind Hintergrundmuster, Trennlinien, Stimmungsbilder ohne inhaltliche Aussage oder ein Symbol direkt neben einem Text, der dasselbe sagt.

Lass das Attribut nicht einfach weg. Fehlt es ganz, lesen manche Screenreader stattdessen den Dateinamen vor, etwa „IMG 4711 final punkt jpg“. Ein leerer Alt-Text signalisiert dagegen klar: Dieses Bild kannst du überspringen.

Bei Bildergruppen trägt ein Bild die Information für alle. Fünf Sterne einer Bewertung brauchen nicht fünfmal „Stern“, sondern einmal „4 von 5 Sternen“; die übrigen Sterne erhalten alt="".

Was schreibe ich bei verlinkten Bildern und Logos?

Bei funktionalen Bildern beschreibst du, was passiert, nicht wie es aussieht. Ein verlinktes Firmenlogo kann den Namen und das Ziel vermitteln, etwa „Bäckerei Sommer, zur Startseite“. Eine Lupe als Button heißt „Suche“, ein Einkaufswagen-Symbol „Warenkorb“.

Steht neben dem Bild im selben Link bereits ein sichtbarer Text, bekommt das Bild meist einen leeren Alt-Text. Sonst hört man das Ziel doppelt.

Inline-SVG-Icons haben kein alt-Attribut. Ein bedeutungstragendes SVG bekommt zum Beispiel role="img" und einen Namen über aria-label oder ein title-Element. Ein rein dekoratives Icon blendest du mit aria-hidden="true" aus.

Wie beschreibe ich Diagramme und Infografiken?

Bei einer Grafik mit vielen Werten reicht ein kurzer Alt-Text meist nicht. Nenne im Alt-Text, worum es geht, und verweise auf die Details, etwa „Balkendiagramm: Anfragen pro Monat 2026, Werte in der Tabelle darunter“. Ergänze die Werte als verständliche Textbeschreibung oder Datentabelle im Inhalt.

So bleiben Zusammenhänge und Zahlen auch ohne die Grafik verfügbar. Die Tabelle hilft außerdem Menschen, die Werte genau nachlesen oder kopieren möchten. Bei einer Ablaufgrafik passt oft eine nummerierte Liste der Schritte, bei einer Anfahrtskarte die Adresse als Text.

Was gilt für Bilder mit Text?

Vermeide Text in Bildern, wo echter Text möglich ist. WCAG 1.4.5 verlangt auf Stufe AA, Informationen als Text statt als Bild von Text darzustellen, mit Ausnahmen etwa für Logos. Echter Text lässt sich vergrößern, umfärben und übersetzen.

Wenn ein Bild Text enthält, etwa ein Aktionsbanner, gehört derselbe Wortlaut in den Alt-Text. Wichtige Angaben wie Preis, Frist oder Rabattcode solltest du zusätzlich im Seitentext nennen. Bei Grafiken mit Zitaten für Social Media gehört das Zitat vollständig in den Alt-Text oder den Beitragstext.

Welche Fehler passieren bei Alt-Texten häufig?

1. 1Dateinamen oder Platzhalter wie „Bild1“ oder „Header“ als Alt-Text.
2. 2Ein verlinktes Logo mit dem Alt-Text „Logo“, ohne Namen und Ziel.
3. 3Aneinandergereihte Suchbegriffe. Google rät ausdrücklich davon ab, Alt-Attribute mit Keywords zu füllen.
4. 4Eine wörtliche Wiederholung der unmittelbar benachbarten Bildunterschrift.
5. 5Derselbe Alt-Text für alle Produktbilder, obwohl sie Farbe, Rückseite oder Detail zeigen.
6. 6Ein Alt-Text aus der Mediathek, der für ein anderes Umfeld geschrieben wurde und hier nicht passt.
7. 7Ausführliche Beschreibungen für reine Dekoration.
8. 8Alt-Texte in einer anderen Sprache als die Seite, etwa englische Texte aus einer Bilddatenbank.
9. 9Wichtige Information im CSS-Hintergrundbild: Solche Bilder haben keinen Alt-Text und sind für Screenreader unsichtbar.

Können Scanner und KI Alt-Texte schreiben?

Ein Scanner erkennt zuverlässig ein fehlendes Attribut, aber nicht, ob eine Beschreibung die beabsichtigte Aussage trifft. KI-Vorschläge beschreiben oft, was zu sehen ist, und verfehlen den Zweck im Kontext. Nutze sie als Startpunkt und frag bei jedem Vorschlag: Passt er zum Zweck auf dieser Seite? Accessonaut erfasst fehlende Alt-Texte auf gescannten Seiten; eigene Texte oder KI-Vorschläge prüfst du und gibst sie gezielt frei. Kontrolliere nach Änderungen auch die Ausgabe mit einem Screenreader.