Tools um deine Website auf Barrierefreiheit zu Testen

Eine erfahrene Barrierefreiheit-Testerin wird niemals durch ein Tool ersetzt werden. Sie erkennt beim ersten Begutachten warum z.B. ein Formular verschiedene Aspekte der Barrierefreiheit nicht erfüllt. Selbst eine Screenreader-Userin kann nicht alle Bereiche der Barrierefreiheit erfassen, wenn sie einfach „nur“ Power-Userin ihres Screenreaders ist. Um das zu verstehen, habe ich den Artikel „Barrierefreie Websites einfach erklärt“ geschrieben.

Hier geht es heute um Werkzeuge zum Testen. Ich habe extra nicht alle Tools verlinkt, es geht eher um Werkzeugarten, da sollte jeder dann das für sich passende raussuchen.

Ein Batterie-Tester für kleine runde Batterien, Text umgewandelt zu Website Accessibility Tester
Originalbild von Erkaha, Text geändert, Lizenz CC BY-SA 4.0

Es gibt durchaus Tools die bei vielen Checks helfen und dir so Hinweise geben, ob deine Website Hilfe braucht. Ich habe hier mal eine unvollständige Liste von Tools erstellt, die dich unterstützen können. Diese werden aber nur ca. 30%-50% der Fehler auf der Website erfassen. Alles ist besser als nix 🙂

Dein Browser

Das einfachste zum Testen ist, ob deine Website programmatisch eine logische Reihenfolge einhält. Das geht indem du das CSS (Styling) deiner Website deaktivierst. In Firefox z.B. unter Ansicht, Webseiten-Stil, Kein Stil. Für Chrome gibt es schöne Erweiterungen, z.B. Disable CSS. Das wird dann zwar hässlich, aber du kannst sehen, ob die Reihenfolge deiner Inhalte Sinn macht.

Nach diesem Test kannst du gleich noch schauen, ob sich deine Website problemlos vergrößern oder verkleinern lässt. STRG und + beziehungsweise Befehlstaste und + am Mac. Strg und Minus, um es wieder zu verkleinern, Strg und 0 also Null, um wieder den Normalzustand herzustellen.

Dein Keyboard.

Das hört sich jetzt erstmal bekloppt an, aber wenn du deine eigene Website nicht rein mit deinem Keyboard navigieren kannst, ist sie nicht barrierefrei. Mit Tab kannst du z.B. den Fokus auf dem nächsten Link oder das nächste Eingabefeld erreichen und mit Eingabetaste (Return) bestätigen. Link zu Firefox Tastenkombinationen. Du wirst schnell merken, ob du weißt wo du dich befindest (Fokus vorhanden?) auf der Seite und ob das überhaupt klappt mit dem durchtabben (Tabreihenfolge sinnvoll?).

Deine Website in Graustufen

Deine Website sollte ohne Farben funktionieren. Nur so stellst du sicher, dass z.B. eine Farbenblinde sich problemlos auf deiner Seite orientieren kann. Ein Link z.B. sollte nicht nur farblich als solcher erkennbar sein, sondern unbedingt auch unterstrichen. Sowohl für Firefox als auch für Chrome gibt es unzählige Erweiterungen. Ausprobieren!

Headings Map

Headings Map gibt es als Extension/Add On für Chrome und Firefox und fügt ein kleines Icon in eurer Browserleiste ein. Mit Headingsmap kannst du kontrollieren, ob es auf deiner aktuellen Seite wirklich nur eine H1-Überschrift gibt, und ob die restlichen Überschriften korrekt verschachtelt sind. Das ist wichtig, denn einige Screenreader-User navigieren sich durch Überschriften auf den Seiten und nicht z.B. über Links. Google wird es dir ebenso danken.

axe

axe ist eine Erweiterung, die es für Firefox und Chrome gibt und sich in die Entwickler-Tools einfügt.

Screenshot axe in den Entwickler-Tools

Wenn du die automatisierte Analyse durchlaufen lässt wird dir axe zeigen wo sich Probleme auf der Website befinden könnten. axe kann z.B. nämlich nicht genau wissen, ob das Hintergrundbild einen zu niedriegen Kontrast gegenüber der Schriftfarbe darstellt. Aber es zeigt es dir an, und du kannst es kontrollieren und gegebenenfalls ändern.

WAVE

Wave ist ähnlich wie axe eine Erweiterung für deinen Chrome- oder Firefox-Browser. Sie zeigt dir Fehler in einer eigenen Seitenleiste an, die auf deiner Seite relevant sein könnten. Wie bei axe musst du aber selbst kontrollieren, ob das für die verschiedenen Fehler auch wirklich der Fall ist.

WCAG Contrast Checker

Es gibt sehr viele Contrast Checker, diesen benutze ich einfach gerne. Man gibt einfach Vorder- und Hintergrundfarbe an und sollte dann mindestens AA erreichen. Das ist die Vorgabe von WCAG 2.0, der Richtlinie für barrierefreie Webinhalte. Link zum Contrast Checker.

Deine Website anhören

Mit Voice-Over auf dem Mac (Achtung nur im Safari!) oder NVDA auf dem Windows-Rechner kannst du dir deine Website anhören und über dein Keyboard navigieren. Viele Blinde benutzen auch JAWS, das aber eine sehr teure Lizenz erfordert. Alle haben ihre Eigenarten, deshalb ist es ideal, wenn du alle Testen kannst. Wenn deine Website aber mit einem gut funktioniert bist du schon sehr sehr weit gekommen! Als erstes wirst du merken, ob die Sprache deiner Website richtig angegeben ist 🙂

Fazit

Hab ich was vergessen? Natürlich! Es gibt noch unzählig viele mehr Tools, die dabei helfen verschiedenste Fehler zu finden. Ich freue mich über Empfehlungen hier drunter oder wo auch immer du den Link von mir gefunden hast.

6 Antworten auf “Tools um deine Website auf Barrierefreiheit zu Testen”

    1. Cool! Wird getestet!

      Antworten

  1. Hallo Phillip!

    Die meisten Browser implementieren inzwischen selbst einiges an Accessibility. Mindestens mal den Objektbaum, und manche, wie Firefox, auch einiges an Auditing-Tools. Ich hab dazu zuerst bei Mozilla Hacks was geschrieben und das dann später auch auf meinem Blog veröffentlicht: https://marcozehe.de/2019/11/29/auditing-for-accessibility-problems-with-firefox-developer-tools/. Disclaimer: ich arbeite für Mozilla.

    Antworten

    1. Vielen Dank Marco!

      Antworten

  2. Ich würde für die Tools zum Testen noch Accessibility Insights ergänzen, da diese einem einen kompletten Prüfworkflow mitgibt.
    https://accessibilityinsights.io/

    Antworten

    1. Danke Johannes — wird getestet!

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.