Tools für die Analyse der Barrierefreiheit deiner Website

In diesem Beitrag stellen wir dir verschiedene Tools für die Analyse der Barrierefreiheit vor, mit denen du die Barrierefreiheit deiner Website prüfen und verbessern kannst. Wichtig vorweg: Kein Tool ersetzt den manuellen Test mit Tastatur, Screenreader und geschultem Blick. Automatische Prüfungen sind ein guter erster Schritt, mehr aber auch nicht. Warum das so ist und welche Werkzeuge sich lohnen, erfährst du hier.

Automatische Tools für die Analyse der Barrierefreiheit: Was sie leisten und was nicht

Automatische Testtools scannen deine Seite in Sekunden und melden technische Probleme, etwa fehlende Alternativtexte, zu schwache Kontraste oder falsch ausgezeichnete Formularfelder. Das ist wertvoll, um schnell einen Überblick zu bekommen und offensichtliche Fehler abzustellen.

Ihre Grenze ist aber klar: Automatische Tools finden nur einen Teil aller Barrieren, nach gängigen Schätzungen etwa ein Drittel. Vieles lässt sich nur mit menschlichem Urteil beurteilen. Ob ein Alternativtext den Inhalt eines Bildes wirklich sinnvoll beschreibt, ob die Reihenfolge beim Bedienen mit der Tastatur logisch ist oder ob ein Text verständlich formuliert wurde, kann keine Software zuverlässig entscheiden. Deshalb gilt: Tools liefern Anhaltspunkte, die vollständige Prüfung übernimmt am Ende ein Mensch.

Google Lighthouse und PageSpeed Insights

Lighthouse ist ein kostenloses Werkzeug von Google und direkt in den Entwicklerwerkzeugen von Chrome eingebaut. Dieselbe Prüfung erreichst du online über PageSpeed Insights, indem du einfach die Adresse deiner Seite einträgst.

Lighthouse fasst die Barrierefreiheit in einer Punktzahl von 0 bis 100 zusammen und listet darunter die gefundenen Probleme auf, jeweils mit Erklärung und Verweis auf weiterführende Dokumentation. Geprüft werden zum Beispiel:

• Alternativtexte: Bilder brauchen eine Textbeschreibung, damit blinde Menschen den Inhalt erfassen können.
• Kontraste: Der Kontrast zwischen Text und Hintergrund muss ausreichend hoch sein.
• Beschriftungen: Formularfelder und Bedienelemente brauchen einen erkennbaren Namen.
• Auszeichnungen über ARIA: Zusätzliche Rollen und Eigenschaften helfen Screenreadern, Funktionen richtig zu vermitteln.

Ein wichtiger Hinweis: Die Punktzahl ist kein Freibrief. Ein Wert von 100 bedeutet nur, dass die automatisch prüfbaren Punkte in Ordnung sind. Über die tatsächliche Barrierefreiheit sagt er wenig aus.

Hier kommst du zur Website von Google PageSpeed Insights

WAVE

WAVE (Web Accessibility Evaluation Tool) stammt von WebAIM und ist eines der bekanntesten Werkzeuge für die Barrierefreiheit. Du kannst es als Erweiterung für Chrome, Firefox und Edge nutzen oder online eine Adresse eingeben.

Das Besondere an WAVE ist die anschauliche Darstellung: Die Ergebnisse erscheinen direkt auf deiner Seite als Symbole. So siehst du sofort, wo eine Barriere sitzt. Typische Punkte, die WAVE aufzeigt:

• Kontrast: Farben mit zu geringem Kontrast erschweren das Lesen für Menschen mit Sehbeeinträchtigung.
• Struktur: WAVE zeigt Überschriften, Listen und Bereiche und macht sichtbar, ob die Seite sauber gegliedert ist.
• Alternativtexte: Fehlende oder leere Textalternativen werden markiert.
• Formulare: Felder ohne verständliche Beschriftung fallen auf.

Ein Klick auf ein Symbol öffnet eine Erklärung samt Lösungshinweis und Verweis auf das passende Kriterium der WCAG. WAVE ist kostenlos und gibt dir einen guten ersten Überblick. Für eine tiefergehende Prüfung solltest du zusätzlich manuell testen.

Hier kommst du zur WAVE-Website

Folgend siehst du eine Bildschirmaufnahme von unserer Startseite, die mit WAVE ausgewertet wurde. Eine solche Auswertung kann helfen, um einen ersten Eindruck zu bekommen und erste Fehler zu korrigieren.

axe DevTools

axe von der Firma Deque ist der Prüfmotor, auf dem viele andere Werkzeuge aufbauen, unter anderem Lighthouse. Als Erweiterung axe DevTools für Chrome und Firefox integriert es sich in die Entwicklerwerkzeuge des Browsers und ist bei Entwicklerinnen und Entwicklern sehr beliebt, weil es wenige Fehlalarme produziert und Probleme klar benennt.

axe eignet sich besonders gut, um Barrieren schon während der Entwicklung aufzudecken, statt sie erst nach dem Livegang zu suchen. Wir bei Hansolu setzen solche Werkzeuge bereits beim Aufbau einer Website ein.

Hier kommst du zur Website von axe DevTools

Accessibility Insights

Accessibility Insights von Microsoft ist ebenfalls kostenlos und geht einen Schritt weiter als reine Scanner. Es bietet zwei Modi:

• FastPass: ein schneller automatischer Test, der die häufigsten Probleme findet.
• Assessment: eine geführte Prüfung, die dich Schritt für Schritt durch die manuell zu testenden Kriterien leitet.

Gerade der geführte Modus ist wertvoll, weil er die Lücke zwischen automatischem Scan und vollständiger Prüfung ein Stück weit schließt.

Hier kommst du zur Website von Accessibility Insights

Werkzeuge für den Farbkontrast

Kontraste sind eine der häufigsten Barrieren und lassen sich gezielt prüfen. Der WebAIM Contrast Checker berechnet online das Verhältnis zwischen zwei Farben und zeigt dir sofort, ob es die Anforderungen der WCAG erfüllt. Für Farben direkt auf dem Bildschirm eignet sich der Colour Contrast Analyser von TPGi, mit dem du Farbwerte per Pipette aufnehmen kannst.

Zur Erinnerung: Für normalen Text verlangt die WCAG einen Kontrast von mindestens 4,5 zu 1, für große Schrift sowie für Bedienelemente und aussagekräftige Symbole mindestens 3 zu 1.

Hier kommst du zur Website des WebAIM Contrast Checker

Die wichtigsten manuellen Werkzeuge: Tastatur und Screenreader

Die aufschlussreichsten Werkzeuge hast du wahrscheinlich schon: deine Tastatur und einen Screenreader.

Test mit der Tastatur. Leg die Maus zur Seite und bediene deine Seite nur mit der Tabulatortaste, der Eingabetaste, der Leertaste und den Pfeiltasten. Prüfe dabei: Erreichst du alle Links, Schaltflächen und Formularfelder? Ist immer klar sichtbar, wo du dich gerade befindest? Ist die Reihenfolge logisch? Bleibst du irgendwo hängen?

Test mit dem Screenreader. Mit einem Bildschirmleseprogramm hörst du deine Seite so, wie blinde Menschen sie wahrnehmen. Unter Windows ist NVDA kostenlos, auf dem Mac ist VoiceOver bereits eingebaut, im professionellen Umfeld ist JAWS verbreitet. So merkst du schnell, ob Beschriftungen aussagekräftig sind und ob die Seite verständlich vorgelesen wird.

Diese manuellen Tests brauchen etwas Übung, decken aber genau die Barrieren auf, die kein automatisches Tool findet.

Für größere Websites: laufende Überwachung

Bei umfangreichen Seiten oder Shops lohnt sich eine regelmäßige, automatisierte Überwachung, die viele Unterseiten prüft und Veränderungen meldet. Werkzeuge wie Pa11y (kostenlos) oder kostenpflichtige Dienste helfen dabei, den Stand über die Zeit im Blick zu behalten. Auch hier gilt: Die Überwachung ersetzt keinen Expertentest, sie ergänzt ihn.

So gehst du beim Testen sinnvoll vor

Ein bewährter Ablauf sieht so aus:

1. Automatischer Scan mit Lighthouse, WAVE oder axe für einen schnellen Überblick.
2. Kontraste prüfen mit einem Kontrastwerkzeug.
3. Tastaturtest über die ganze Seite.
4. Screenreadertest der wichtigsten Abläufe, zum Beispiel Bestellung oder Kontaktaufnahme.
5. Ergebnisse einordnen und Fehlalarme aussortieren.
6. Bei rechtlicher Relevanz oder Unsicherheit: Expertenprüfung hinzuziehen.

Häufige Fehler beim Einsatz von Tools für die Analyse der Barrierefreiheit

• Nur auf die Punktzahl schauen. Ein guter Wert bei Lighthouse heißt nicht, dass die Seite barrierefrei ist. Er prüft nur einen Teil.
• Nur die Startseite testen. Barrieren stecken oft in Formularen, im Warenkorb oder in eingebundenen Inhalten von Drittanbietern. Teste die wichtigen Abläufe komplett.
• Fehlalarme übernehmen. Kein Tool ist perfekt. Manche Meldungen sind falsch positiv und müssen von Hand geprüft werden.
• Auf Overlays vertrauen. Eingeblendete Barrierefreiheitswerkzeuge, oft Overlays genannt, versprechen eine schnelle Lösung per Klick, beheben die eigentlichen Probleme aber meist nicht und schaffen teils neue. Sie ersetzen keine saubere Umsetzung.
• Nach dem Test aufhören. Barrierefreiheit ist kein einmaliges Projekt. Prüfe deine Seite immer wieder, besonders nach Änderungen.

Checkliste für die Analyse

• Automatischen Scan mit mindestens einem Tool durchgeführt (Lighthouse, WAVE oder axe)
• Farbkontraste separat geprüft
• Die ganze Seite nur mit der Tastatur bedient und den Fokus im Blick gehabt
• Wichtige Abläufe mit einem Screenreader getestet
• Meldungen der Tools eingeordnet und Fehlalarme aussortiert
• Nicht nur die Startseite, sondern auch Formulare und Bestellstrecken getestet
• Einen Plan für die regelmäßige Wiederholung festgelegt

Tools für die Analyse der Barrierefreiheit sind ein hilfreicher Einstieg

Tools für die Analyse der Barrierefreiheit sind ein hilfreicher Einstieg in die Barrierefreiheit deiner Website. Sie zeigen dir schnell, wo offensichtliche Probleme liegen, und lassen sich gut in den Arbeitsalltag einbauen. Für ein verlässliches Ergebnis brauchst du aber beides: die automatische Prüfung und den manuellen Test mit Tastatur, Screenreader und geschultem Blick. So stellst du sicher, dass deine Seite nicht nur technisch sauber ist, sondern für alle Menschen wirklich nutzbar.

Lass dich von uns kostenfrei beraten

Du hast Fragen zu den Tools für die Analyse der Barrierefreiheit oder möchtest wissen, wo deine Website in Sachen Barrierefreiheit steht? Nutze unsere kostenfreie Erstberatung. Wir klären deine Fragen, geben eine erste Einschätzung und lernen uns einfach mal kennen.

Hier kommst du zu unserem Anfrageformular