Meine Lieblings-Tools zum Testen von Web-Accessibility

Web-Accessibility hat viele Facetten: Die Bedienung mit der Tastatur und anderen Eingabegeräten, Alternativtexte für Bilder, verständliche Überschriften und Fehlertexte, usw. Ebenso vielfältig ist das Angebot an Tools, um die Barrierefreiheit von Websites zu testen.

Eines gleich vorweg: Es gibt nicht das eine Power-Tool , welches alle Barrieren automatisch erkennt und am besten auch gleich behebt. Das gilt auch für KI-basierte Accessibility-Tools. Ja, künstliche Intelligenz hat großes Potential, aber aktuelle Tools können keinen umfassenden Barrierefreiheits-Test ersetzen. Auch wenn gewisse Leute im Rausch des KI-Hypes etwas anderes behaupten.

Foto: © Thirdman / pexels.com

Damit das zarte Pflänzchen Barrierefreiheit gedeiht, brauchen wir die richtigen Werkzeuge. Hier ist meine persönliche Auswahl an kostenlosen Bookmarklets, Browser-Erweiterungen und Tools zum Testen von Barrierefreiheit.

Struktur und Semantik

• WAVE (Web Accessibility Evaluation Tools): Ein Barrierefreiheits-Analysetool von WebAIM. Als Browser-Erweiterung für Firefox, Chrome und Edge verfügbar. Besonders praktisch finde ich die Struktur-Ansicht, wo man auf einen Blick sieht, ob sinnvolle Landmarks (header , main etc.) und Überschriften-Ebenen definiert wurden.
• Firefox Accessibility Inspector ist ein fixer Bestandteil der Firefox-Entwicklertools. Ihr wollt wissen, welche Informationen ein interaktives Element an assistive Technologien übermittelt? Einfach Rechtsklick darauf und “Barrierefreiheit-Eigenschaften untersuchen” auswählen. Firefox öffnet den “Barrierefreiheit”-Tab in den Entwicklertools und springt zum zugehörigen Knoten im Accessiblity-Tree. Debugging war noch nie so einfach! 😍
• Testen mit Screenreader: Keine Barrierefreiheits-Prüfung ist komplett ohne Screenreader-Tests. Angesichts begrenzter Budgets in Projekten, kann man nicht mit allen Screenreadern auf allen Plattformen testen. Auf der Basis aktueller Statistiken habe ich daher folgende Testszenarien definiert:
  • NVDA in Windows
  • VoiceOver in iOS
  • TalkBack in Android
• Falls ihr noch nie mit dem Screenreader getestet habt, dann lest am besten meinen Artikel „5 Tipps für den Einstieg in Barrierefreiheits-Prüfungen mit dem Screenreader“.

Ideal zum Testen der WCAG-Kriterien 1.3.1 Info und Beziehungen und 4.1.2 Name, Rolle, Wert.

Tastaturbedienung

• Testen mit Tastatur: Mit der Tabulatortaste die interaktiven Elemente der Seite (Buttons, Links etc.) durchgehen. Ist die Fokus-Reihenfolge sinnvoll? Können Tastatur-Nutzer:innen alle interaktiven Elemente erreichen und aktivieren? Wird das fokussierte Element sichtbar hervorgehoben? Am Smartphone oder Tablet könnt ihr einfach eine Bluetooth-Tastatur verbinden.
• taba11y: Diese praktische Browser-Erweiterung berechnet die Tab-Reihenfolge aller interaktiven Elemente und stellt sie visuell dar, entweder durch Zeichnen eines Pfades oder durch Hervorheben der Elemente.

Ideal zum Testen der WCAG-Kriterien 2.1.1 Tastatur, 2.1.2 Keine Tastaturfalle, 2.4.3 Fokus-Reihenfolge und 2.4.7 Fokus sichtbar.

Responsive Inhalte

• Browser-Einstellungen: Ändere die Standardschriftgröße deines Browsers, um zu kontrollieren, ob die Website automatisch die Textgröße anpasst. Die meisten Browser wie z.B. Edge erlauben nur die Auswahl aus vordefinierten Optionen wie “Klein”, “Mittel” und “Groß”. Im Firefox können Nutzer:innen hingegen einen konkreten Pixelwert als Standardschriftgröße definieren.
• Alternativ könnt ihr mit der Zoom-Funktion des Browsers (STRG und + Taste) den gesamten Seiteninhalt proportional zur Schriftgröße vergrößern.
• Benutze das Textabstände-Bookmarklet oder eine Browser-Erweiterung (z.B. Editor for Textlayout), um die Werte für Zeilenhöhe, Abstand nach Absätzen, Buchstabenabstand und Wortabstand auf die maximal geforderten Werte zu setzen. Es sollten keine Inhalte abgeschnitten werden oder einander überlappen.

Ideal zum Testen der WCAG-Kriterien 1.4.4 Textgröße ändern, 1.4.10 Automatischer Umbruch (Reflow) und 1.4.12 Textabstand.

Zielgröße von interaktiven Elementen

• Target Size Bookmarklet: Es identifiziert interaktive Elemente, errechnet deren Mittelpunkt und zeichnet einen halbtransparenten Kreis von 24 mal 24 Pixeln um den Mittelpunkt des Elements: Ein grüner Kreis mit dickem Rand bedeutet, dass die Zielgröße ausreicht. Elemente mit blauem Kreis sollten manuell untersucht werden.
• Auf diese Weise findet ihr viel schneller Buttons und Links, bei denen Nutzer:innen mit motorischer Beeinträchtigung Probleme beim Anklicken oder Antippen haben könnten.

Ideal zum Testen des WCAG-Kriteriums 2.5.8 Zielgröße (Minimum).

Mindestkontrast

• Chrome Lighthouse ist Teil der Entwickler-Tools in Chrome. Der Accessibility-Check von Lighthouse findet zuverlässig einen Großteil der Elemente mit zu geringem Kontrastverhältnis.
• PowerToys Farbwähler: Die Microsoft PowerToys sind eine Sammlung von Hilfsprogrammen für Poweruser. Mit der Tastenkombination WIN +Umschalt +C könnt ihr jederzeit den Farbwähler aktivieren und den Farbwert eines Pixels am Bildschirm auslesen.
• WebAIM Contrast Checker: Einfaches Tool, um das Kontrastverhältnis einer Schriftfarbe zur Hintergrundfarbe zu prüfen. Besonders praktisch ist das Feature, dass man die gewählten Farbwerte inklusive Auswertung als Permalink teilen kann.

Ideal zum Testen der WCAG-Kriterien 1.4.3 Kontrast (Minimum) und 1.4.11 Nicht-Text-Kontrast.

Weitere Links

• Web Accessibility Evaluation Tools List (W3C)
• Accessibility Testing Tools and Practices (Harvard University)

Erstellt am 30.03.2025