Inhalt dieser Seite
- Das Wichtigste in Kürze
- Beispiel aus der Praxis
- Wie funktioniert das alt-Attribut?
- Wie schreibt man einen guten Alt-Text?
- Wann bleibt das alt-Attribut leer?
- Was gilt für Diagramme und Bilder mit Text?
- Hilft der Alt-Text bei SEO?
- Wie pflegt man Alt-Texte im Shop und mit KI?
- Typische Fehler bei Alt-Texten
- Häufige Fragen
Das Wichtigste in Kürze
- Der Alt-Text steht im alt-Attribut eines Bildes. Screenreader lesen ihn vor, und Google nutzt ihn, um das Bild zu verstehen.
- Ein guter Alt-Text erfüllt denselben Zweck wie das Bild an dieser Stelle. Meist reichen wenige Wörter.
- Dekorative Bilder bekommen ein leeres alt-Attribut. Fehlt das Attribut ganz, lesen manche Screenreader den Dateinamen vor.
- Bei Icons und verlinkten Bildern beschreibt der Text die Funktion, bei Diagrammen stehen die Daten zusätzlich im Text daneben.
- Alt-Texte von KI-Tools sind ein Vorschlag. Ob Produktname und Zusammenhang stimmen, prüft ein Mensch.
Beispiel aus der Praxis
Ein Onlinehändler für Arbeitsschutz verkauft Sicherheitsschuhe in mehreren Farben. Sein Shopsystem setzt als Alt-Text bisher den Dateinamen ein, etwa „IMG_2031“. Für Screenreader-Nutzer klingen damit alle Farbvarianten gleich, und Google erfährt aus dem Bild nichts über das Produkt.
Das Team ergänzt deshalb für jedes Produktbild einen kurzen Text mit Modell und Farbe, zum Beispiel „Sicherheitsschuh S3 in Schwarz, Seitenansicht“. Rein dekorative Bilder bekommen ein leeres alt-Attribut, damit der Screenreader sie überspringt.
Wie funktioniert das alt-Attribut?
Der Alt-Text steht im alt-Attribut eines Bildes im HTML-Code. Screenreader lesen ihn vor, und Google nutzt ihn zusammen mit Bilderkennung und dem Inhalt der Seite, um das Bild zu verstehen.
<img src="sicherheitsschuh-s3-schwarz.jpg" alt="Sicherheitsschuh S3 in Schwarz, Seitenansicht">Die WCAG verlangen in Kriterium 1.1.1 (Stufe A) für jeden Inhalt, der kein Text ist, eine Textalternative mit demselben Zweck. Für Bilder ist das in der Regel der Alt-Text.
Wie schreibt man einen guten Alt-Text?
Ein guter Alt-Text erfüllt an genau dieser Stelle denselben Zweck wie das Bild. Dasselbe Foto kann deshalb je nach Seite einen anderen Text brauchen.
- Zweck vor Aussehen. Der Text gibt wieder, was das Bild an dieser Stelle aussagen soll. Eine genaue Beschreibung ist nur nötig, wenn das Aussehen selbst die Information ist.
- Kurz. Laut WebAIM genügen meist wenige Wörter, selten ein oder zwei kurze Sätze.
- Keine Wiederholung. Steht die Information schon im Text daneben, muss der Alt-Text sie nicht noch einmal nennen.
- Ohne „Bild von“. Screenreader kündigen Bilder bereits als Grafik an.
| Bild und Zusammenhang | Schwach | Besser |
|---|---|---|
| Produktfoto im Shop | alt="Arbeitsschuhe kaufen günstig Sicherheitsschuhe S3" |
alt="Sicherheitsschuh S3 in Schwarz, Seitenansicht" |
| Teamfoto auf der Karriereseite | alt="Bild von Mitarbeitern" |
alt="Fünf Kolleginnen und Kollegen der Montage an einer Fertigungsanlage" |
| Lupen-Icon als Suchknopf | alt="Lupe" |
alt="Suchen" |
| Logo mit Link zur Startseite | alt="Logo" |
alt="Firmenname, Startseite" |
| Balkendiagramm im Geschäftsbericht | alt="Diagramm" |
alt="Umsatz 2025 nach Quartalen, Werte in der Tabelle darunter" |
Wann bleibt das alt-Attribut leer?
Leer bleibt das alt-Attribut bei Bildern, die nur schmücken oder deren Inhalt der Text daneben schon nennt. Das W3C empfiehlt dafür alt="", damit Hilfsmittel das Bild überspringen. Fehlt das Attribut ganz, lesen manche Screenreader laut W3C den Dateinamen vor.
In der Auswertung WebAIM Million vom Februar 2026 fehlte bei 16,2 % aller Bilder auf den Startseiten der eine Million meistbesuchten Websites der Alt-Text. 45 % dieser Bilder waren verlinkt, sodass auch der Link für Screenreader-Nutzer keinen verständlichen Namen hatte.
Was gilt für Diagramme und Bilder mit Text?
- Bilder mit Text. Der Alt-Text enthält denselben Wortlaut wie das Bild. Kriterium 1.4.5 der WCAG (Stufe AA) verlangt, Text möglichst als echten Text darzustellen, Logos sind ausgenommen.
- Diagramme und Grafiken. Der Alt-Text nennt kurz, was das Bild zeigt. Die Daten selbst stehen als Text oder Tabelle direkt daneben.
- Icons und verlinkte Bilder. Der Text beschreibt die Funktion, also „Suchen“ für eine Lupe oder den Namen der Zielseite für ein verlinktes Logo.
Hilft der Alt-Text bei SEO?
Ja, vor allem für die Bildersuche. Google schreibt, dass es Alt-Texte zusammen mit Bilderkennung und dem Seiteninhalt nutzt, um ein Bild zu verstehen. Bei verlinkten Bildern dient der Alt-Text außerdem als Ankertext.
Von Keyword-Ketten rät Google ausdrücklich ab, weil sie Nutzer stören und die Seite als Spam erscheinen lassen können. Den Rahmen erklärt der Eintrag SEO.
Wie pflegt man Alt-Texte im Shop und mit KI?
Im Shop gehört der Alt-Text zu den Produktdaten. Jedes Bild eines Produkts beschreibt, was es von den anderen unterscheidet, etwa Ansicht oder Farbe. Ein gemeinsamer Text für alle Bilder eines Artikels hilft wenig.
Bei großen Bildbeständen liegt es nahe, Alt-Texte von einem KI-Tool vorschlagen zu lassen. Laut WebAIM erkennen Algorithmen zwar immer besser, was ein Bild zeigt, aber nicht, was es auf einer bestimmten Seite bedeutet. In der WebAIM-Umfrage 2026 gaben zudem 60,1 % der Screenreader-Nutzer an, sich Bildbeschreibungen bereits selbst per KI erzeugen zu lassen. Ein Alt-Text sollte deshalb liefern, was nur die Website weiß, etwa die genaue Modellbezeichnung.
- Vorschlag lesen. Stimmen Produktname und Farbe, und fehlt nichts Wichtiges?
- Falsche Details streichen. KI-Tools beschreiben manchmal Dinge, die das Bild nicht zeigt, eine Form der KI-Halluzination.
- Zusammenhang ergänzen. Der Text passt zur Seite, auf der das Bild steht.
In der Prüfung zur digitalen Barrierefreiheit bewerten wir Alt-Texte deshalb im Zusammenhang der jeweiligen Seite.
Typische Fehler bei Alt-Texten
- Keyword-Häufung. Suchbegriffe ohne Satzbau helfen weder Nutzern noch Google.
- „Bild von“ oder Dateinamen. Laut WebAIM Million hatten 10,8 % der Bilder mit Alt-Text fragwürdige oder doppelte Texte, etwa „image“ oder einen Dateinamen.
- Bildunterschrift doppelt. Wiederholt der Alt-Text die sichtbare Unterschrift, hört der Screenreader-Nutzer alles zweimal.
- Leerer Alt-Text bei Links. Ist ein Bild der einzige Inhalt eines Links, braucht es einen Text, der das Ziel nennt.