Die Schwachstellen von Tools zum Testen der Barrierefreiheit – Alt-Text

Im Artikel "Die Grenzen automatischer Barrierefreitstests: Farbkontraste" haben wir gezeigt, wie Webdesigner die automatischen Tools zur Überprüfung der Barrierefreiheit in Sachen Farbkontrast austricksen können. In diesem Artikel schauen wir uns Alt-Texte an.

Lange Zeit war das Internet vor allem ein visuelles Medium, sodass Nutzer mit Sehbehinderungen von vielen Inhalten ausgeschlossen waren – vor allem von Bildern und anderen Nicht-Text-Elementen.

Man könnte also meinen, dass alle Webentwickler und Autoren wissen, was Alt-Texte sind und wozu sie gebraucht werden, aber einer der häufigsten Fehler auf Websites ist immer noch das Fehlen von Alt-Texten und – was noch schlimmer ist – falsche Alt-Texte.

Dieser Artikel befasst sich mit den Einschränkungen aktueller Barrierefreiheits-Tools beim Umgang mit Nicht-Text-Elementen und erklärt, warum manuelles Testen und menschliches Urteilsvermögen unerlässlich sind, um die WCAG22-Anforderung für Nicht-Text-Inhalte zu erfüllen: Jeder Nicht-Text-Inhalt muss über eine aussagekräftige Textalternative verfügen.

Joomla unterstützt die Erstellung von Alt-Texten, wenn Bilder aus Medien ausgewählt werden:

Oder auch im Core-Editor TinyMCE

Visuelle Inhalte

Eine Website ohne Bilder oder Symbole ist kaum vorstellbar, oder? Bilder müssen einen Alt-Text haben.

Der Test ist ganz einfach: Überprüfe jedes <img-Element auf das Vorhandensein eines alt-Attributs. Jedes Tool kann diese Überprüfung durchführen. Warum schreibe ich dann einen Artikel?

Lass uns einen kleinen Test machen. Ich habe eine Website mit einer Einladung zu meiner Gartenparty erstellt und Fotos von allen Speisen gemacht, die ich zubereiten werde.

Für unseren Test habe ich alle Bilder von der Website entfernt und nur die Alt-Texte zum Sehen und Hören übrig gelassen.

Wie kann man alle Bilder auf einfache Weise entfernen? Du kannst die Webentwickler-Tools verwenden oder einfach deine Bildordner löschen.

Hier ist das Ergebnis:

Was denkst du? Nicht besonders informativ, oder?

Es gibt viele Fehler:

1: Kein Alt-Text

2: Das Bild ist in diesem Zusammenhang nicht dekorativ, der leere Alt-Text ist falsch.

4: Nicht aussagekräftig

5: Black Hat SEO

6: Falsche Beschreibung

Falsche Beschreibungen wie in den Bildern 4 und 6 entstehen oft durch Kopier-/Einfügefehler. Oder weil die Autoren die Bedeutung von Alt-Texten nicht verstanden haben.

Wenn du diese Alt-Texte siehst oder hörst, schreibst du mir dann „Danke – das wird eine tolle Party“!

Oder „Ähm – nein danke, ich habe an diesem Tag schon eine Verabredung“?

Hier ist dieselbe Seite mit besseren Alt-Texten.

Das ist doch besser, oder? Und für alle, die gut sehen können, hier sind die Bilder:

Es gibt viele verschiedene Möglichkeiten, Bilder in eine Website einzufügen, zum Beispiel als Symbol, als SVG-Bild, als Foto oder als Grafik, aber egal, um was es sich handelt: Das Schreiben aussagekräftiger Alt-Texte ist echt mühsam. Wenn du denkst, dass KI-generierte Alt-Texte eine Lösung sein könnten – das sind sie nicht. Lies diesen Artikel über KI-generierte Alt-Texte.

Testergebnisse

Es wurden Tests mit verschiedenen Bildern und unterschiedlichen Fehlern in Alt-Texten mit den kostenlosen Tools WAVE, AXE, IMB Accessibility Checker, Lighthouse durchgeführt, unterstützt durch Web Developer Tools und den Screenreader NVDA.

Der Test umfasste eine große Bandbreite verschiedener Bildtypen und viele mögliche Arten von Fehlern in Alt-Texten.

Alle Tools finden fehlende Alt-Texte und akzeptieren leere Alt-Texte.

Kein Tool findet falsche oder irreführende Alt-Texte.

Nur der IBM Accessibility Checker gibt eine Warnung aus, wenn

• <svg>-Elemente keine Beschreibung haben (z. B. Social-Media-Symbole).
• der Dateiname als Alt-Text verwendet wird

Nur WAVE gibt eine Warnung aus, wenn

• ein verlinktes Bild denselben Alt-Text wie der Linkname hat
• ein Alt-Text sehr lang ist

Unser Accessibility jooa11y gibt eine Warnung aus, wenn ein Alt-Text länger als 100 Zeichen ist.

Web Developer Tools sind nützlich, um Alt-Texte sichtbar zu machen.

Als Screenreader wurde das kostenlose NVDA verwendet. Es hat kein Problem mit fehlenden Alt-Texten, sondern ignoriert das Bild einfach.

Es gibt andere Screenreader, die den Dateinamen (z. B. „Screenshot 2025-05-25 165104.png”) in voller Länge vorlesen, wenn überhaupt kein Alt-Text vorhanden ist.

Fazit

Automatische Barrierefreiheitsprüfungen sind zwar nützliche Tools, um einige formale Barrierefreiheitsprobleme zu erkennen, aber sie sind nicht so gut, wenn es darum geht, Nicht-Text-Inhalte wie Bilder und Audio zu bewerten. Wie gut Bildbeschreibungen sind, hängt stark vom Kontext ab.

Vertraue also nicht blind den Tools: Die letzte Überprüfung sollte immer von einem Menschen gemacht werden!

Während wir Alt-Text für Bilder als Nicht-Text-Inhalte betrachten und zumindest ein wenig Hilfe von verschiedenen Tools bekommen, gibt es nichts, was Audioinhalte auf deiner Website automatisch testen kann, außer dir selbst. Podcasts, Videos und Video-Tutorials schließen Nutzer mit Hörbehinderungen aus, wenn es keine Transkription gibt oder wenn diese Transkription nicht angemessen ist.

Originalartikel im Joomla! Magazin: https://magazine.joomla.org/all-issues/june-2025/the-blind-spots-of-accessibility-testing-tools-alt-text