Tools zur Prüfung von Webseiten auf Barrierfreiheit
Zur technischen Überprüfung Ihrer Webseiten auf digitale Barrierefreiheit gibt es mittlerweile eine ganze Reihe von Werkzeugen bzw. Tools, welche helfen Fehler auf Webseiten zu finden. Vorab muss erwähnt werden das diese Tools alle unterschiedliche Stärken und Schwächen haben und es kein ultimatives Tool zur Prüfung gibt. Weiterhin prüfen die Tools nur rein technische Barrieren. Wenn z. B. ein Alternativtext falsch ist, dann werden diese Tools dies nicht anzeigen.
Wir haben die Tools in verschiedene Kategorien untergliedert und stelle diese mit den passenden Tools nachfolgend vor.
Browser mit bereits installierten Tools
Die größten Browser (Chrome, Firefox, ...) stellen automatisch Tools zum Prüfen auf digitale Barrierefreiheit zur Verfügung. Diese sind bereits im installiert und müssen nur aufgerufen werden. Wir möchten zeigen, wie Sie diese integrierte Prüfung durchführen und erklären kurz die angezeigten Ergebnisse.
Im Firefox finden man die Prüfung auf Barrierefreiheit mit in den Entwicklertools, welche man einfach öffnen kann, wenn man an einer Seite einfach die rechte Maustaste drückt und "Untersuchen" wählt. Direkt geht dies auch, wenn man einfach die Taste F12 drückt.
Nun öffnet sich ein neuer Bereich im Browser, wo man mehrere Reiter sieht. Ein Reiter davon heißt "Barrierefreiheit". Wenn dieser gewählt wurde, dann kann man die Prüfung starten, indem man hinter "Überprüfung auf Problem" die zu prüfenden Probleme auswählt. Hier kann zwischen "Kontrast", "Tastatur" und "Textbeschriftung" wählen. Wenn hier "Alle Probleme" gewählt wird, dann werden alle drei dieser Probleme gleichzeitig geprüft.
Die ermittelten Probleme werden anklickbar angezeigt und die Problemart mit angezeigt. Im Feld rechts vom aktiviertem Problem wird der Fehler kurz erklärt und ein Link zu einer Beschreibungsseite mit Lösungsvorschlägen wir angeboten.
Eine nützliche Funktion ist auch im Punkt "Tab-Reihenfolge anzeigen" zu finden. Dadurch kann man auf einen Blick sehen, welche Reihenfolge alle Elemente auf dem Bildschirm haben, wenn man durch diese mit der Tabulatortaste navigiert. Dadurch kann man überprüfen, ob alle Felder zu erreichen sind und die korrekte Reichenfolge eingehalten wird.
Eine Stärke dieses Tools ist u. a. das Auffinden von fehlender Fokussierbarkeit der einzelnen Elemente und in der deutschen Beschreibung der Probleme mit Lösungsvorschlägen.
Im Googles Browser Chrome gibt es zum Überprüfen der Barrierefreiheit das Tool Lighthouse. Hier kann man neben anderen Dingen auch die Barrierefreiheit prüfen. Zum Tool gelangt man, indem man auf einer Seite einfach die rechte Maustaste drückt und "Untersuchen" wählt. Direkt geht dies auch, wenn man einfach die Taste F12 drückt.
Nun öffnet sich ein neuer Bereich im Browser, wo man mehrere Reiter sieht. Ein Reiter davon heißt "Lighthouse". Wenn dieser gewählt wurde, dann kann man die Prüfung starten, indem man zunächst den Modus, das Gerät und die zu prüfenden Kategorien auswählt. Als Modus kann man hier "Navigation (Standard)" ausgewählt lassen und danach das Gerät wählen. Hier ist es zu empfehlen, beide Arten (Mobil und Computer) nacheinander durchzutesten. Als Kategorie muss man für die Barrierefreiheit eigentlich nur "Bedienungshilfen" wählen. Die Prüfung kann jetzt über "Seitenaufbau analysieren" gestartet werden.
Das angezeigte Prüfergebnis wird gut aufbereitet angezeigt. Die erste Beschreibung ist noch in deutscher Sprache, wenn man aber den Link zu mehr Informationen folgt, erhält man im Gegensatz zum Firefox leider nur noch englische Informationen. Die Stärke des Tools liegt hierbei in der optischen Unterstützung durch kleine Screenshots, welche die Position des jeweiligen Fehlers zeigt. Das Ergebnis der Prüfung ist nicht so umfangreich wie die Prüfung durch die Entwicklertools im Firefox.
Browser Plugins
Sehr hilfreich zur schnellen Prüfung technischer Probleme bei der digitalen Barrierefreiheit gibt es immer mehr Add-ons, welche den Browser mit neuen Werkzeugen ausstatten. Diese Add-ons müssen zusätzlich installiert werden und können dann mit einem Klick auf das Icon eine Prüfung der Seite direkt ausführen. Hierbei gibt es unterschiedliche Tool, welche auch unterschiedliche Dinge auf den Seiten prüfen. Wir stellen von uns geprüfte Add-ons vor. Durch diese Tools können auch Seite im Intranet getestet werden, weil der aktuell im Browser angezeigte HTML-Code ausgewertet wird.
Mit dem Browser Add-on WAVE kann man schnell die aktuell angezeigte Seite auf verschiedene Fehler hinsichtlich digitaler Barrierefreiheit testen. Es ist für Firefox, Chrome und Edge verfügbar. Nach dem Download und der Installation kann man die Seite mit einem Klick auf das WAVE Icon kontrollieren. Der Bildschirm wird in zwei Seiten geteilt. Links befindet sich das Prüfergebnis und rechts wird die Seite mit Hinweisicons (zunächst etwas unübersichtlich) angezeigt. Wichtig ist hier zunächst nur das Prüfergebnis mit den folgenden Reitern:
- Summary (Zusammenfassung): Hier erhält man eine Zusammenfassung aller gefundenen Merkmale zur digitalen Barrierefreiheit. Den Fokus sollte man hier zunächst auf die Fehler und Kontrastfehler legen. Anschließend kann man über die angezeigten Alarme weiter relevante Dinge anschauen. Über den Button "View Details" kann man sich genauere Informationen zu den Meldungen anschauen und kommt damit direkt zum nächsten Reiter.
- Details (Einzelheiten): Im wohl wichtigsten Reiter kann man alle angezeigten Fehler im Detail betrachten. Über einen Klick auf das Fehlersymbol bekommt man den Fehler im rechten Teil des Fensters blickend angezeigt. Mehr Informationen zum Fehler erhält man, wenn man auf das kleine i-Icon klickt.
- Reference (Referenz): Im Reiter Referenz werden mehr Informationen zu den einzelnen Meldungen angezeigt, wenn man das kleine i-Icon im Reiter Details klickt.
- Order (Reihenfolge): Beim Klick auf diesen Reiter werden im rechten Feld alle navigierbaren Seitenelemente angezeigt und im linken Fenster aufgelistet.
- Structure (Struktur): Hier bekommt man die Seitenstruktur übersichtlich angezeigt. Man kann z. B. die Überschrifthierarchie überprüfen und kontrollieren, ob alle Elemente sauber in der Seitenstruktur untergebracht sind.
- Contract (Kontrast): Im Reiter Kontrast kann man sich die Farbkombinationen der Kontrastfehler detaillierter anzeigen lassen. Hier kann man zusätzlich durch Schieberegler leicht Änderungen an den Farben durchführen und bekommt direkt angezeigt, ob das Ergebnis mit der neuen Farben barrierefrei wäre. Dies optimiert das Finden einer passenden Farbkombination.
Das Tool ist unsere Top-Empfehlung, um sich schnell einen Überblick der vorhandenen Barrieren zu verschaffen. Sicherlich werden hier viele Eigenschaften noch nicht mit untersucht, aber die Grundlagen lassen sich schnell überprüfen.
Sonstige Tools
Neben diesen Browsertools gibt auch noch zusätzliche Prüftools, welche bei der Beseitigung technischer Barrieren helfen. Dies können separate Programme, aber auch Webseiten mit Prüfmöglichkeiten sein. Wir stellen einige dieser Tools ebenfalls kurz mit vor.
Mit dem Programm Colour Contrast Analyser (CCA) kann man sehr einfach und übersichtlich Farbkombinationen auf ausreichendes Kontrastverhältnis (nach den WCAG) testen. Nach dem Download und der Installation des Programms kann man dies durch einen Doppelklick starten und es öffnet sich ein kleines Fenster, welche sich immer im Vordergrund befindet. Hier kann man durch die Verwendung der Icons mit der Pipette auf dem Bildschirm zwei Farben auswählen. Das Programm wird diese direkt vergleichen und das Kontrastverhältnis ausgeben und gut aufbereitet anzeigen, ob es die Konformitätsstufe AA bzw. AAA der WCAG erfüllt wird.
Einen weiteren Mehrwert bietet das Programm durch die Ermittlung von benutzbaren Farbkombinationen an. Hier kann man schnell durch Schieberegler kleine Änderungen an den ausgewählten Farben durchführen und bekommt direkt anzeigt, ob diese Farbe bereits genügen würde.
Mit dem Programm Colour Contrast Analyser (CCA) kann man schnell und unkompliziert Farbkombinationen auf ausreichendes Kontrastverhältnis testen und bei Bedarf passende Farben finden.
Bei Start dieser Seite stehen hier nur einige Tools. Wir werden diese immer weiter ergänzen. Wenn Sie weitere gute Tools kennen oder entwickelt haben, dann schauen wir uns diese gern an und können diese nach Prüfung hier mit ausnehmen bzw. beschreiben. Bitte nutzen Sie dafür wieder unser Kontaktformular.