Testen
Wie teste ich (m)eine Website auf Barrierefreiheit? Ein wichtiger Aspekt: die Barrierefreiheit von Websites muss immer wieder überprüft werden: während der Entwicklung, nach Fertigstellung eines Projekts und im Betrieb. Vor allem, wenn ein CMS dahinter stehen.
Barrierefreiheit
Grundlage für offizielle Test von Websites ist in Deutschland die BITV 2.0, die auf WCAG 2.1 (Stufe AA) basiert. Eine gute Idee ist es, auch die 6 neuen A und AA Kriterien aus WCAG 2.2 miteinzubeziehen, sowie auch gleich alle "low hanging fruits" der Stufe AAA mitzunehmen, wenn möglich. Geprüft werden sollte immer auch manuell, da die automatischen Tools an gewisse Grenzen stoßen. Mehr zu den Standards findet ihr auf der Seite "A, AA & AAA Die Standards".
Schritt 1: Testen mit automatischen Tools
Es gibt diverse Tools, mit denen man Websites auf Barrierefreiheit testen kann, darunter sehr umfangreiche wie das kostenpflichtige Siteimprove. Andere sind frei erhältlich und kommen auch als Browserextensions. Der Vorteil der umfangreicheren, nicht kostenfreien Tools ist, dass eine Website in der vollen Tiefe berücksichtigt wird und alle Fehler in einer Liste präsentiert werde, die dann abgearbeitet kann kann.
Mit kostenlosen Tools können oft nur eine Seite einzelne Seiten getestet werden. Deshalb sollte man hier in einem ersten Schritt festlegen, welche Seiten eines Web-Angebots getestet werden, z. B. exemplarisch die Homepage, eine Seite mit einem Formular, eine Seite mit allem im Projekt verwendeten Komponenten wenn möglich.
Diese Seiten prüft man dann als erstes im W3C Validator und danach in einem der automatischen Web-Checker. Beispiele für solche Checker sind IBM Equal Access Accessibility Checker (Extension für Chrome und für Firefox), axeDevTools (Extension für Chrome, Firefox und Edge), Chrome Lighthouse oder das Wave Web Accessibility Evaluation Tool.
Solange es beim Ergebnis noch "Violations" oder "Needs review" Meldungen oder ähnliches gibt, sollte man nicht zur manuellen Prüfung übergehen, sondern erst einmal zurück zur Entwicklung, um die Probleme zu beheben.
Schritt 2: Manuelles Prüfen der Webseiten
In Firefox und Chrome sollte die Web Developer Toolbar Erweiterung installiert sein. In der Toolbar gibt es auch einen Punkt "Barrierefreiheit", über den man einige Dinge sehen kann und über den man direkt Info über Fehler und Links zur weiterführenden Infos bekommt.
Danach testet man manuell unter anderem:
- Farbkontraste überprüfen: Alle Farbkontraste von benachbarten Farben untersuchen, Schriftfarben sowie UI-Elemente und Icons
- Website mit Tastatatur-Eingabe prüfen: benutzbar und Fokus sichtbar, Reihenfolge sinnvoll?
- Überschriften und Texte, Landmarks, Listen prüfen
- Sind Navigations-Links und Formulareingaben auf der gesamten Website einheitlich?
- Sind native HTML-Elemente verwendet worden und nicht durch Aria-Rollen ersetzt? Wenn Aria-Rollen verwendet wurden, sind sie richtig?
- Gibt es Blinkungen, Stroboskop-Effekte oder Animationen, die die Empfehlungen nicht überschreiten?
- Bei Videos: Sind geeignete alternative Medien vorhanden (z. B. Untertitel, Transkripte)? Starten Videos einfach, und wenn ja, kann man sie stoppen?
- Inhaltsüberprüfungen: Hat der Inhalt die richtigen Abstände für Buchstaben, Wörter, Zeilen und Absätze? Sind Seitentitel, Überschriften und Formularlabels klar und aussagekräftig? Sind Bildalternativen prägnant, präzise und nützlich? Wird Farbe allein verwendet, um Bedeutung oder Informationen zu vermitteln? Sind die Links beschreibend oder verwenden sie generischen Text wie „Weiterlesen“ oder „Hier klicken?“. Gibt es Änderungen an der Sprache auf einer Seite? Wird eine einfache Sprache verwendet und sind alle Akronyme ausgeschrieben, wenn zum ersten Mal auf sie verwiesen wird? Starten Slider automatisch und wenn ja, kann man sie stoppen?
- Können alle Inhalte mit der Lupe oder dem Zoom des Browsers gesehen werden?
Bei web.dev gibt es im frei zugänglichen Online-Kurs "Learn Accessibility" ein hilfreiches Kapitel zum manuellen Testen, das auch Lösungsvorschläge bei möglichen Problemen enthält.
Helferlein
Es gibt inzwischen sehr viele davon, hier ein paar ausgesuchte Sammlungen von Bookmarklets, die wir gerne verwenden:
- A11y audit bookmarklets - Aktuell gehaltene Sammlung von A11y Tools
- Accessibility Testing Bookmarklets - Sammlung von Tollwerk
- JavaScript Bookmarklets for Accessibility Testing - Sammlung von Paul J. Adam
- HeadingsMap (Extension für Firefox und Chrome)
- Web Developer Toolbar (für Firefox und Chrome)
- Landmark Navigation via Keyboard or Popup (für Firefox und Chrome)
- Accessibility Audit Helper (zur Unterstützung beim Testen von "Zielgrößen")
Auch sehr hilfreich sind Farbkontrast-Checker. Es gibt hier diverse Websites (z. B. Polypane color contrast checker), aber man sich auch den Color Contrast Analyzer von TPGi auf dem Rechner installieren.
Hier noch die Web Accessibility Evaluation Tools List vom W3C, die Tools gruppiert und auch eine Suchfunktion zur Verfügung stellt.
Testen auf Mobil-Geräten
Das Testen auf Barrierefreiheit unterscheidet sich auf Mobilgeräten etwas vom Testen auf Rechnern, manche Konzepte sind gleich, es gibt aber doch einige Unterschiede, und es ist wichtig zu wissen, wo sich die Einstellungen auf den jeweiligen Geräten befinden.
Auf unserem Barrierefreien Blog haben wir einen Artikel zur Einführung in mobiles Testen veröffentlicht.
Schritt 3: Freiwillige BITV-Selbstbewertung
Um eine Website gut bedienbar und barrierefrei zu wissen, kann es auch hilfreich sein, die BITV Selbstbewertung durchzugehen. Hier wird jeder Prüfschritt durchgegangen, den auch ein Prüfer durchgeht, und es gibt jede Menge Erklärungen und Hilfestellung zu jedem Punkt. Die Tests können abgespeichert und wieder angeschaut werden. Natürlich hängt die Qualität der Ergebnisse vom Wissenstand und der Sorgfalt der Person ab, die die Bewertung durchführt, aber uns haben diese Tests im Hinblick auf das Verständnis des ganzen Themas sehr geholfen und dazu beigetragen, ein gutes Gefühl für die Anwendung der Regeln zu bekommen.