Kurz gesagt: Ein Alt-Text sagt, was ein Bild an dieser Stelle vermittelt – nicht alles, was darauf zu sehen ist. Dekorative Bilder bekommen ein leeres alt="", Bilder in Links beschreiben das Ziel, Bilder mit wichtigem Text geben diesen Text wieder. Bei Produktbildern zählt, was eine Käuferin wissen muss: Ansicht, Farbe, Material, Detail.
Alternativtexte sind die älteste Regel der Barrierefreiheit und trotzdem eine der häufigsten Fundstellen in jedem Prüfbericht. Das liegt selten an fehlendem Willen. Meist fehlt eine klare Vorstellung davon, was in das Feld gehört – und in Shops mit Tausenden Bildern die Zeit, es für jedes Bild neu zu überlegen. Dieser Beitrag gibt Ihnen Regeln, die Sie in fünf Minuten lernen, und Beispiele, an denen Sie sich orientieren können.
Wofür Alt-Texte da sind (1.1.1)
Das Erfolgskriterium 1.1.1 Nicht-Text-Inhalt verlangt, dass jeder Nicht-Text-Inhalt eine Textalternative hat, die denselben Zweck erfüllt. Für Bilder heißt das in HTML fast immer: das alt-Attribut [1].
Den Alt-Text lesen Screenreader anstelle des Bildes vor. Er erscheint, wenn ein Bild nicht lädt, und Suchmaschinen nutzen ihn, um zu verstehen, was ein Bild zeigt. Entscheidend ist das Wort „Zweck“: Ein Alt-Text beschreibt nicht das Bild um seiner selbst willen, sondern das, was es an dieser Stelle leisten soll. Dasselbe Foto kann auf einer Produktseite und in einem Blogbeitrag zwei verschiedene Alt-Texte brauchen.
Eine Begriffsklärung finden Sie auch im Glossar unter Alternativtext.
Informative, dekorative und funktionale Bilder
Bevor Sie etwas schreiben, ordnen Sie das Bild ein. Drei Arten decken fast alle Fälle ab:
| Art | Beispiel | Alt-Text |
|---|---|---|
| Informativ | Foto eines Hotelzimmers auf der Buchungsseite | Beschreibt, was man wissen muss: „Doppelzimmer mit Balkon und Blick auf den Hafen“ |
| Dekorativ | Wellenlinie als Trenner, Hintergrundtextur, Icon neben einem Text, der dasselbe sagt | Leer: alt="" |
| Funktional | Logo, das zur Startseite verlinkt; Lupe als Suchbutton | Beschreibt die Funktion: „Startseite“, „Suchen“ |
Ein leeres alt="" ist keine Nachlässigkeit, sondern die richtige Antwort für Schmuckbilder. Screenreader überspringen das Bild dann. Fehlt das Attribut dagegen ganz, lesen manche Screenreader den Dateinamen vor – „IMG unterstrich 4711 punkt jpg“.
<!-- informativ -->
<img src="zimmer-12.jpg" alt="Doppelzimmer mit Balkon und Blick auf den Hafen">
<!-- dekorativ -->
<img src="welle.svg" alt="">
<!-- funktional: das Bild ist der einzige Inhalt des Links -->
<a href="/"><img src="logo.svg" alt="Hafenhotel Kiel – Startseite"></a>Produktbilder: was ein Käufer wissen muss
Produktbilder sind der Grund, warum Alt-Texte in Shops so wichtig sind. Für jemanden, der das Bild nicht sieht, ist der Alt-Text die Produktansicht. Fragen Sie sich: Was würde ich einer Kundin am Telefon sagen, die wissen will, wie das Produkt aussieht?
| Schwach | Besser |
|---|---|
| „Wanderschuh“ | „Wanderschuh Alpina in Dunkelgrün, Seitenansicht mit Profilsohle“ |
| „Bild 3“ | „Detail: wasserdichter Reißverschluss an der Innenseite“ |
| „Kleid rot sommer damen günstig“ | „Knielanges Sommerkleid aus Leinen in Ziegelrot, Vorderansicht“ |
| „Produktfoto“ | „Das Sofa in Hellgrau im Wohnzimmer, zum Größenvergleich neben einem Sessel“ |
Ein paar Regeln helfen bei großen Katalogen:
- Nicht nur den Produktnamen wiederholen. Der steht schon in der Überschrift. Der Alt-Text ergänzt, was das Bild zeigt: Ansicht, Farbe, Detail.
- Jede Ansicht unterscheiden. Fünf Bilder mit identischem Alt-Text sind für Screenreader-Nutzer fünfmal dieselbe Information.
- Keine Keyword-Listen. Suchbegriffe aneinandergereiht helfen weder Menschen noch Suchmaschinen.
- Varianten mitdenken. Wenn das Bild bei der Farbauswahl wechselt, muss auch der Alt-Text wechseln.
Logos, Icons und Bilder mit Text
Logos bekommen in der Regel den Namen der Organisation. Ist das Logo ein Link, kommt das Ziel dazu, oder der Link erklärt sich über seine Position. „Logo“ allein sagt nichts.
Icons hängen vom Kontext ab. Steht neben dem Warenkorb-Icon der Text „Warenkorb“, ist das Icon dekorativ. Ist das Icon der einzige Inhalt eines Buttons, braucht der Button einen Namen – bei einem SVG-Icon etwa über aria-label am Button und aria-hidden="true" am SVG:
<button type="button" aria-label="Warenkorb, 3 Artikel">
<svg aria-hidden="true" focusable="false"><use href="#icon-cart"></use></svg>
</button>Bilder mit Text – Werbebanner, Rabattaktionen, eingescannte Aushänge – müssen den Text im Alt-Text wiedergeben, sofern er wichtig ist. Besser noch: Setzen Sie den Text als echten Text über das Bild. Das hilft auch Menschen, die vergrößern, und erfüllt 1.4.5 Bilder von Text.
Diagramme und komplexe Grafiken
Ein Diagramm lässt sich nicht in einem Satz beschreiben. Hier teilt man die Aufgabe:
- Der Alt-Text sagt kurz, was das Diagramm zeigt und was die wichtigste Aussage ist: „Umsatz 2025 nach Quartalen: stetiger Anstieg, Höchstwert im vierten Quartal“.
- Die Details stehen im Text daneben, in einer Bildunterschrift oder als Tabelle mit den Werten.
<figure>
<img src="umsatz-2025.png"
alt="Umsatz 2025 nach Quartalen: stetiger Anstieg, Höchstwert im vierten Quartal">
<figcaption>Die Werte stehen in der Tabelle unter dem Diagramm.</figcaption>
</figure>Das Gleiche gilt für Infografiken, Karten und Grundrisse: Kurz im Alt-Text, vollständig im Text.
Häufige Fehler – und wie Sie sie vermeiden
Die meisten schlechten Alt-Texte fallen in eine Handvoll Muster. Wer sie kennt, findet sie beim Durchsehen schnell:
- Der Dateiname als Alt-Text. „DSC_0042“ oder „banner-final-v3.jpg“ entsteht, wenn ein System den Dateinamen automatisch übernimmt. Schalten Sie diese Automatik ab, wenn Ihr System sie hat.
- Derselbe Text für alle Bilder. Oft steht der Seitentitel in jedem Alt-Text einer Seite. Für Screenreader-Nutzer klingt das wie ein hängender Plattenspieler.
- Beschreibung statt Funktion. Ein Pfeil-Icon in einem „Weiter“-Link heißt nicht „Pfeil nach rechts“, sondern ist dekorativ – der Link hat ja schon seinen Text.
- Alt-Text und Bildunterschrift doppelt. Steht dieselbe Beschreibung in
altund in der sichtbaren Bildunterschrift, hören Screenreader-Nutzer sie zweimal. Der Alt-Text ergänzt die Bildunterschrift, statt sie zu wiederholen. - Die falsche Sprache. In mehrsprachigen Shops bleibt der Alt-Text oft in der Ausgangssprache stehen. Er gehört in die Sprache der Seite und muss mit übersetzt werden.
KI-Vorschläge: wann sie helfen und wann nicht
Bildbeschreibende KI ist gut darin, zu sagen, was auf einem Bild zu sehen ist. Sie weiß aber nicht, wozu Sie das Bild einsetzen. Sie erkennt „ein grüner Schuh auf weißem Grund“, aber nicht, dass es um die Profilsohle geht. Und sie kann falsch liegen – bei Farben, bei Materialien, bei Text im Bild.
Deshalb gilt bei Reviseberg: Die KI schlägt vor, ein Mensch entscheidet. Für Bilder, die der Crawl ohne Alt-Text gefunden hat, erstellt Reviseberg auf Wunsch einen Vorschlag. Jeder Vorschlag wird gegen feste Regeln geprüft – nicht länger als 125 Zeichen, kein „Bild von“ am Anfang, kein Dateiname, und ein leerer Text nur für ein ausdrücklich dekoratives Bild. Angewendet wird nichts automatisch: Sie übernehmen, ändern oder verwerfen den Vorschlag und setzen ihn selbst in Ihr System ein. Mehr zu den Vorschlägen steht auf der Plattform-Seite.
Wann KI-Vorschläge helfen:
- Bei großen Katalogen als Startpunkt, den eine Redakteurin in Sekunden prüft statt in Minuten schreibt.
- Bei Bildern, deren Inhalt eindeutig ist: Produktfotos auf neutralem Grund, Porträts, Gebäude.
Wann nicht:
- Bei Diagrammen, Screenshots und Bildern mit Text, wo es auf genaue Inhalte ankommt.
- Bei Bildern, deren Zweck sich nur aus dem Zusammenhang ergibt.
- Überall dort, wo niemand den Vorschlag liest, bevor er live geht.
Alt-Texte an der Quelle pflegen (PIM, Wawi, Mediathek)
Der größte Hebel liegt nicht im einzelnen Text, sondern im Ablauf. Legen Sie fest, wo Alt-Texte entstehen:
- Shops mit Warenwirtschaft oder PIM: Pflegen Sie Alt-Texte dort pro Bild, damit Shop, Marktplätze und Feeds denselben Text bekommen. Warum das auch für Marktplätze wichtig ist, erklärt unser Beitrag zu BFSG und Marktplätzen.
- Shopsysteme: Shopware und Shopify haben pro Bild ein Feld für den Alternativtext. Details zu den Systemen stehen in unseren Leitfäden zu Shopware und Shopify.
- CMS-Mediatheken: In manchen Systemen wird der Alt-Text beim Einfügen in die Seite kopiert. Eine spätere Änderung in der Mediathek erreicht dann bestehende Seiten nicht. Prüfen Sie, wie Ihr System das handhabt, bevor Sie nachträglich Tausende Bilder in der Mediathek beschriften.
- Redaktionsregel: Kein Bild wird veröffentlicht, ohne dass jemand entschieden hat: informativ, dekorativ oder funktional.
Was Reviseberg dabei prüft – und was nicht
Die Regel image-alt findet auf jeder gecrawlten Seite Bilder ohne alt-Attribut; verwandte Regeln prüfen Bild-Buttons, SVGs und Elemente mit role="img". Das deckt den häufigsten Fehler ab: den fehlenden Text. Ob ein vorhandener Alt-Text das Bild richtig beschreibt, kann keine Regel entscheiden – dafür braucht es einen Menschen. Deshalb gilt 1.1.1 bei Reviseberg immer nur als teilweise automatisch prüfbar.