Wozu Alternativtexte da sind
Screenreader lesen statt des Bildes den Alternativtext vor. Er erscheint auch, wenn ein Bild nicht lädt, und hilft Suchmaschinen. 1.1.1 Nicht-Text-Inhalt verlangt für jeden Nicht-Text-Inhalt eine Textalternative, die denselben Zweck erfüllt. Entscheidend ist also der Zweck im Zusammenhang: Dasselbe Foto braucht im Produktkatalog einen anderen Text als in einem Blogbeitrag über das Team.
Der Entscheidungsbaum
Gehen Sie die Fragen der Reihe nach durch. Die erste Antwort mit „Ja“ entscheidet.
- Enthält das Bild Text? Ist der Text auch daneben als echter Text vorhanden:
alt="". Wenn nicht: genau diesen Text als Alternativtext. Besser noch: echten Text statt Textgrafik verwenden (1.4.5 Bilder eines Textes). - Ist das Bild ein Link oder ein Button? Dann beschreibt der Alternativtext das Ziel oder die Aktion, nicht das Aussehen: „Startseite“ beim Logo, „Suchen“ bei der Lupe.
- Trägt das Bild Information, die sonst fehlt? Ein Foto, ein Symbol mit Bedeutung, eine einfache Grafik: Beschreiben Sie in einem kurzen Satz das Wesentliche.
- Ist das Bild komplex, etwa ein Diagramm, eine Karte oder ein Ablaufplan? Kurzer Alternativtext mit der Kernaussage, die Details als Text oder Tabelle direkt darunter oder auf einer verlinkten Seite.
- Ist das Bild reine Dekoration oder steht derselbe Inhalt schon im Text daneben? Dann
alt="", also leer. So überspringt der Screenreader das Bild.
Ein fehlendes alt-Attribut ist immer falsch: Viele Screenreader lesen dann den Dateinamen vor.
Beispiele aus der Praxis
| Bild | Zweck | Alternativtext |
|---|---|---|
| Logo im Kopf, verlinkt | führt zur Startseite | „Firmenname, zur Startseite“ |
| Produktfoto im Shop | zeigt, was man kauft | „Rucksack aus dunkelblauem Segeltuch mit zwei Außentaschen“ |
| Stimmungsfoto neben der Überschrift | Dekoration | leer: alt="" |
| Lupen-Symbol im Suchbutton | startet die Suche | „Suchen“ |
| Balkendiagramm | zeigt eine Entwicklung | Kernaussage im alt, Zahlen als Tabelle darunter |
<a href="/"><img src="logo.svg"></a>
<img src="team-sommerfest-2026.jpg"
alt="Bild"><a href="/">
<img src="logo.svg" alt="Firmenname, zur Startseite">
</a>
<img src="deko-welle.svg" alt="">Verlinkte Bilder beschreiben das Ziel; Dekoration bekommt ein leeres alt-Attribut.
So formulieren Sie gute Alternativtexte
- Kurz und konkret: meist ein Satz. Was würden Sie am Telefon sagen, wenn jemand das Bild nicht sehen kann?
- Nicht „Bild von“ oder „Foto von“: Dass es ein Bild ist, sagt der Screenreader selbst.
- Keine Wiederholung: Steht die Bildunterschrift schon daneben, wiederholen Sie sie nicht wörtlich.
- Keine Stichwortlisten für Suchmaschinen. Das stört beim Zuhören und hilft niemandem.
- Sprache der Seite: Auf deutschen Seiten deutsche Alternativtexte.
SVG, Icon-Fonts und CSS-Hintergründe
Inline-SVG mit Bedeutung erhält role="img" und einen Namen über aria-label oder ein <title>-Element. Dekorative SVGs bekommen aria-hidden="true". Bilder als CSS-Hintergrund sind für Hilfsmittel unsichtbar; wenn sie Information tragen, braucht es zusätzlich Text. Bei Buttons, die nur ein Icon zeigen, gehört der Name an den Button selbst (4.1.2 Name, Rolle, Wert).
<button><svg>…</svg></button><button type="button" aria-label="Menü öffnen">
<svg aria-hidden="true" focusable="false">…</svg>
</button>Alternativtexte im Redaktionsalltag
Die meisten fehlenden Alternativtexte entstehen nicht im Code, sondern beim Hochladen im CMS. Machen Sie das Feld für den Alternativtext sichtbar, erklären Sie es in der Redaktion und prüfen Sie neue Seiten regelmäßig. Automatische Bildbeschreibungen können einen Entwurf liefern, kennen aber den Zweck des Bildes auf Ihrer Seite nicht; ein Mensch sollte jeden Text prüfen. Für Bilder in PDFs gilt dasselbe, siehe Ratgeber zu barrierefreien PDFs.
Checkliste zum Abhaken
0 von 7 erledigt
Ihre Häkchen bleiben nur in diesem Browser-Tab und werden nirgends gespeichert.
Passende WCAG-Kriterien
- 1.1.1 Nicht-Text-Inhalt
- 1.4.5 Bilder eines Textes
- 2.4.4 Linkzweck (im Kontext)
- 4.1.2 Name, Rolle, Wert
- 1.3.1 Info und Beziehungen
Werkzeuge und Muster dazu
- ChecklistenFür Design, Entwicklung, Redaktion
- Barrierefreie PDFs: worauf es ankommtFormulare, Preislisten, Geschäftsberichte: Viele Websites bieten wichtige Inhalte als PDF an. Für diese Dokumente gelten dieselben Anforderungen wie für die Seite selbst.
- Kostenlos prüfenIhre Startseite in zwei Minuten automatisch prüfen
- Kriterien-LexikonAlle 55 WCAG-Kriterien erklärt
Häufige Fragen
Wie lang darf ein Alternativtext sein?
Eine feste Grenze gibt es in den WCAG nicht. Bewährt hat sich ein kurzer Satz. Wird es länger, ist das Bild vermutlich komplex und braucht eine Beschreibung im Text.
Was ist mit Bildern, die ein Redakteur ohne Alternativtext hochlädt?
Dann fehlt die Information. Machen Sie das Feld im CMS zur Pflicht oder geben Sie zumindest einen deutlichen Hinweis, und prüfen Sie neue Inhalte regelmäßig.
Darf ich Alternativtexte automatisch erzeugen lassen?
Als Entwurf ja. Eine Maschine kennt aber den Zweck des Bildes auf Ihrer Seite nicht. Prüfen und überarbeiten Sie jeden Vorschlag.
Quellen
Wie steht Ihre Website da?
Der kostenlose Check prüft Ihre Startseite in zwei Minuten. Das Audit entscheidet alle 55 Kriterien, durch einen Menschen.