Was ist ein Alternativtext?

Ein Alternativtext ist eine kurze schriftliche Beschreibung an einem Bild (das HTML-Attribut `alt`), die ein Screenreader anstelle des Bildes vorliest, damit auch Menschen, die es nicht sehen können, die Information erhalten.

Welche WCAG-Regel verlangt Alternativtexte?

WCAG 2.2 Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt), Stufe A. Da dies die grundlegendste Konformitätsstufe ist, untergräbt ein Verstoß nahezu jede Aussage zur Barrierefreiheit.

Welchen Alternativtext braucht ein dekoratives Bild?

Ein leeres `alt`-Attribut. Damit weiß assistive Technologie, dass das Bild keine Information trägt und übersprungen werden kann, statt einen Dateinamen vorzulesen. Lassen Sie das Attribut nie ganz weg.

Erkennen automatisierte Werkzeuge jedes Alternativtext-Problem?

Automatisierte Scans finden zuverlässig Bilder ohne `alt`-Attribut, können aber nicht beurteilen, ob ein vorhandener Alternativtext zutreffend oder sinnvoll ist – das erfordert weiterhin menschliche Prüfung.

Häufige Verstöße

Fehlender Alternativtext: Der am häufigsten zitierte Barrierefreiheitsverstoß

Ein <img>-Tag ohne alt-Attribut (oder ein <input type="image"> ohne Alternativtext) kann einem Screenreader nicht mitteilen, was das Bild zeigt. Sehende Nutzer sehen das Bild; jeder, der assistive Technologie nutzt, bekommt entweder Stille oder, schlimmer noch, den rohen Bilddateinamen vorgelesen ("IMG-2847-final-v3.jpg").

Dies ist das mit Abstand am häufigsten zitierte Problem in ADA-Klagen zur Web-Barrierefreiheit – Branchendaten beziffern es auf etwa 89 % der Beschwerden, weit vor jedem anderen Verstoßtyp. Es ist auch eines der am leichtesten zu behebenden, was mit ein Grund ist, warum es so oft markiert wird: Es ist ein Checklistenpunkt, keine Ermessensfrage.

Warum es wichtig ist

Nicht-Text-Inhalte, die Informationen vermitteln – Produktfotos, Diagramme, Symbole, die als Schaltflächen fungieren, gescannte Dokumente – müssen ein Textäquivalent haben, sonst existiert diese Information für einen Teil Ihrer Besucher schlicht nicht. Dies ist WCAG-Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt), eine Anforderung der Stufe A, was bedeutet, dass es zur Grundlage gehört, die jede Konformitätsstufe verlangt.

Wie man es behebt

Bedeutungstragende Bilder benötigen eine konkrete, prägnante Beschreibung dessen, was das Bild vermittelt – nicht, was es wörtlich darstellt.

<!-- Vorher -->
<img src="q3-umsatz-diagramm.png">

<!-- Nachher -->
<img src="q3-umsatz-diagramm.png" alt="Der Umsatz im Q3 wuchs im Jahresvergleich um 18 % auf 4,2 Mio. €">

Rein dekorative Bilder (ein Hintergrund-Schnörkel, ein Abstandshalter, ein Symbol, das mit angrenzendem sichtbaren Text redundant ist) sollten ein leeres alt="" verwenden – dies weist assistive Technologie ausdrücklich an, das Bild zu überspringen, was das korrekte Ergebnis ist. Ein leeres Alt ist kein Fehler; ein fehlendes Alt-Attribut ist einer.

<!-- Ein dekoratives Symbol neben sichtbarem Text, der bereits "Herunterladen" sagt -->
<img src="download-icon.svg" alt="">
Herunterladen

Bild-Schaltflächen (<input type="image">, oder ein <img>, das in ein klickbares Element ohne weiteren Text eingebettet ist) benötigen Alternativtext, der die Aktion beschreibt, nicht das Bild: alt="Suche absenden", nicht alt="Symbol einer Lupe".

Was guter Alternativtext nicht ist

Vermeiden Sie Alternativtext, der nur den Dateinamen wiederholt, "Bild von..." oder "Foto von..." sagt (Screenreader kündigen bereits an, dass es sich um ein Bild handelt), oder der Schlüsselwörter für SEO hineinstopft – nichts davon hilft der Person, die tatsächlich versucht, den Inhalt zu verstehen.

Automatisierte Scanner wie AllyProof können zuverlässig ein fehlendes Alt-Attribut erkennen, aber sie können nicht beurteilen, ob der von Ihnen geschriebene Alternativtext tatsächlich eine gute Beschreibung ist – das ist eine Kategorie-B-"teilweise automatisierbare" Prüfung. Behandeln Sie einen bestandenen Scan als "jedes Bild hat Alternativtext", nicht als "jedes Bild hat guten Alternativtext".

Offizielle Referenzen

Häufige Fragen

Was ist ein Alternativtext?: Ein Alternativtext ist eine kurze schriftliche Beschreibung an einem Bild (das HTML-Attribut `alt`), die ein Screenreader anstelle des Bildes vorliest, damit auch Menschen, die es nicht sehen können, die Information erhalten.
Welche WCAG-Regel verlangt Alternativtexte?: WCAG 2.2 Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt), Stufe A. Da dies die grundlegendste Konformitätsstufe ist, untergräbt ein Verstoß nahezu jede Aussage zur Barrierefreiheit.
Welchen Alternativtext braucht ein dekoratives Bild?: Ein leeres `alt`-Attribut. Damit weiß assistive Technologie, dass das Bild keine Information trägt und übersprungen werden kann, statt einen Dateinamen vorzulesen. Lassen Sie das Attribut nie ganz weg.
Erkennen automatisierte Werkzeuge jedes Alternativtext-Problem?: Automatisierte Scans finden zuverlässig Bilder ohne `alt`-Attribut, können aber nicht beurteilen, ob ein vorhandener Alternativtext zutreffend oder sinnvoll ist – das erfordert weiterhin menschliche Prüfung.