Alt-Texte richtig schreiben: WCAG-konform und sinnvoll

Der Alternativtext ist eine der bekanntesten Barrierefreiheits-Anforderungen – und eine der am häufigsten falsch umgesetzten. Ein Screenreader liest ihn anstelle des Bildes vor, und er erscheint auch, wenn ein Bild nicht lädt. Die WCAG verlangen ihn (Erfolgskriterium 1.1.1, Stufe A). Entscheidend ist aber nicht, dass ein Alt-Text vorhanden ist, sondern dass er sinnvoll ist. Dieser Artikel zeigt, wie das gelingt. Was die WCAG insgesamt sind, erklärt der WCAG-Leitfaden

Was ein Alt-Text ist und warum er zählt

Der Alt-Text beschreibt ein Bild für Menschen, die es nicht sehen können. Screenreader lesen ihn vor; zusätzlich wird er angezeigt, wenn ein Bild nicht geladen werden kann, und er hilft Suchmaschinen, den Bildinhalt einzuordnen.

Die WCAG fordern in Kriterium 1.1.1 eine Textalternative für Nicht-Text-Inhalte – das ist eine grundlegende Anforderung der Stufe A, also nicht verhandelbar.

Informativ, dekorativ oder funktional?

Die erste und wichtigste Entscheidung ist immer: Welche Rolle spielt das Bild? Davon hängt der ganze Alt-Text ab.

• Informativ – das Bild vermittelt Inhalt oder Information. Dann beschreibst du, worauf es ankommt.
• Dekorativ – das Bild ist rein gestalterisch und trägt keine Information. Dann bekommt es ein leeres Alt-Attribut (alt=""), damit Screenreader es überspringen. Wichtig: Das leere Attribut ist hier richtig – ein ganz fehlendes Attribut ist es nicht.
• Funktional – das Bild ist selbst ein Bedienelement oder Link, etwa ein Logo, das zur Startseite führt, oder ein Lupensymbol für die Suche. Dann beschreibst du die Funktion („Startseite”, „Suche”), nicht das Aussehen.

Diese Einordnung richtig zu treffen, ist bereits die halbe Arbeit.

Wie ein guter Alt-Text aussieht

Ein guter Alt-Text ist knapp, aber ausreichend: Er vermittelt, worauf es im jeweiligen Kontext ankommt. Beginne ihn nicht mit „Bild von” oder „Foto von” – der Screenreader kündigt ohnehin an, dass es sich um ein Bild handelt.

Der Kontext bestimmt den Inhalt: Dasselbe Foto braucht in einem Nachrichtenartikel einen anderen Alt-Text als auf einer Produktseite. Ziel ist, die Bedeutung und den Zweck zu vermitteln, nicht jedes Detail pixelgenau zu beschreiben.

Komplexe Bilder: Diagramme, Infografiken, Charts

Ein Diagramm oder eine Infografik lässt sich nicht in einem kurzen Alt-Text einfangen. Hier gibst du einen knappen Alt-Text mit der Kernaussage und stellst die vollständige Information an anderer Stelle bereit – als begleitenden Text, als Datentabelle oder als verlinkte ausführliche Beschreibung. Entscheidend ist, dass die Daten und die Botschaft als Text verfügbar sind und nicht im Bild eingeschlossen bleiben.

Häufige Fehler

• Der Dateiname als Alt-Text („IMG_1234.jpg”, „header-final-v2.png”).
• „Bild”, „Grafik” oder „Foto” als Alt-Text – das sagt nichts aus.
• Ein Alt-Text, der die danebenstehende Bildunterschrift wortwörtlich wiederholt.
• Ein ganz fehlender Alt-Text bei informativen Bildern – Screenreader lesen dann oft den Dateinamen vor.
• Zu lange, ausschweifende Beschreibungen.
• Keyword-Stuffing für die Suchmaschine – das schadet der Nutzbarkeit und bringt auch für die Suche nichts.

Tools und Automatik – ehrlich eingeordnet

Werkzeuge können Alt-Texte vorschlagen und dir Tipparbeit abnehmen – als Ausgangspunkt ist das nützlich. Was sie nicht können, ist Bedeutung, Kontext und die Rolle eines Bildes zuverlässig beurteilen. Ein vorgeschlagener Alt-Text ist deshalb ein Entwurf, den du prüfst und schärfst, kein Ergebnis, dem du blind vertraust. Genau aus dieser Lücke entstehen die bekannten Fehlgriffe, bei denen ein Foto völlig falsch beschrieben wird.

Das ist etwas grundlegend anderes als ein Overlay, das Alt-Texte zur Laufzeit automatisch erzeugt und das niemand mehr kontrolliert – warum das nicht trägt, behandelt Accessibility-Overlays. Und automatisierte Prüfwerkzeuge können dir zwar sagen, dass ein Alt-Attribut fehlt, aber nicht, ob es gut ist – mehr dazu in Automatisierte WCAG-Tests