Testen mit Tools

Browser DevTools

Mit dem Tab “Barrierefreiheit” in den Firefox Developer Tools kann man die eigene Seite testen und Probleme entdecken:

In diesem Beispiel wird ein Problem mit dem Kontrast gefunden, und zwei Eingabefelder, deren Beschriftung fehlt.

Tipp

Chrome/Edge haben eine vergleichbare Funktion direkt im Elements-Panel (Reiter “Accessibility”) sowie über Lighthouse (siehe unten) einen automatischen Gesamt-Check inklusive Score.

Weitere Werkzeuge

• Wave Tool als Add-on für Firefox und Chrome - zeigt Probleme direkt visuell auf der Seite an
• Axe Core als Add-on für Firefox und Chrome - Standard-Werkzeug in vielen professionellen Test-Pipelines
• tota11y als Bookmarklet
• pa11y als Kommandozeilen-Programm - lässt sich in CI/CD-Pipelines automatisieren
• Chrome Developer Tools: Lighthouse - liefert neben Accessibility auch Performance/SEO-Scores

Automatische Tools finden nicht alles

Automatische Checker erkennen zuverlässig technische Probleme (fehlender alt, zu niedriger Kontrast, fehlendes label) - laut Studien aber nur etwa 30-40% aller WCAG-Probleme. Dinge wie “ist der Alt-Text inhaltlich sinnvoll?” oder “ist die Tab-Reihenfolge logisch?” erkennt nur manuelles Testen: selbst mit Tastatur durchklicken, im Zweifel echten Screenreader (z.B. NVDA, VoiceOver) ausprobieren.

Ist das schon alles?

Nein, das ist noch nicht alles, was man über Accessibility wissen sollte - aber es ist ein guter Start. Das Web macht - ohne dass wir etwas tun müssen - schon vieles richtig, solange wir die nativen HTML-Elemente nicht durch eigene Konstrukte ersetzen (siehe Stolpersteine-Abschnitt).