Barrierefreiheit: Automatisiertes Testen von Webseiten
Was das Barrierefreiheitsgesetz für Webseiten bedeutet, konnten Sie bereits in unserem letzten Blogbeitrag lesen. In diesem Beitrag wollen wir Ihnen Schritt für Schritt zeigen, wie Sie sich mit automatisierten Tests selbst einen ersten Überblick über die Barrierefreiheit Ihrer Webseite verschaffen können. Dafür stellen wir Ihnen zwei Tools vor, die im Bereich automatisierten Testens von Barrierefreiheit sehr weit verbreitet und etabliert sind: Google Lighthouse und WAVE. Beide sind kostenlos verfügbar und können ohne technisches Vorwissen verwendet werden.
Automatisiertes vs. manuelles Testen
Bevor wir zum praktischen Teil dieses Beitrags kommen, möchten wir genauer auf die beiden Arten des Testens von Barrierefreiheit eingehen und warum eine Kombination von beiden Methoden unerlässlich ist, um die Barrierefreiheit einer Webseite vollständig beurteilen zu können.
Automatisierte Tests brauchen kein Vorwissen und können sehr schnell durchgeführt werden. Hier werden Aspekte geprüft, die vornehmlich durch die technische Umsetzung bedingt sind. Diese Aspekte haben also vor allem in jenem Code ihren Ursprung, welcher das statische Aussehen der Webseite prägt. Was diese Tests nicht abdecken können, ist die tatsächliche Benützbarkeit der Webseite. Als Beispiel sei die Bedienung mit der Tastatur genannt.
Manuelle Tests sind im Gegensatz zu automatisierten Tests sehr aufwendig und zeitintensiv. Um diese gut durchführen zu können, braucht es ein fundiertes Hintergrundwissen und ein Verständnis für Barrieren, die auf Webseiten auftreten können. Manuelle Tests spiegeln wider, wie gut eine Webseite tatsächlich für Menschen mit Behinderung zu verwenden ist.
Zusammenfassend kann gesagt werden, dass automatisierte Tests vor allem gut dafür sind, einen ersten Einblick in die Struktur und Stabilität der Webseite zu bekommen. Sind die automatisierten Tests positiv, lässt dies auch den Schluss zu, dass die Webseite zumindest eine gute Basis für Barrierefreiheit bietet. Aber erst durch manuelle Tests wird die tatsächliche Barrierefreiheit geprüft. Es ist somit nie ausreichend nur automatisierte Tests durchzuführen.
Testen mit Lighthouse
- Falls Sie Google Chrome als Browser verwenden, besitzen Sie Lighthouse bereits und müssen nichts weiter tun, als Chrome zu starten. Nutzen Sie einen anderen Browser können Sie diesem Lighthouse als Erweiterung hinzufügen. Dieses Beispiel bezieht sich auf die Nutzung mit Chrome.
- Navigieren Sie zu beginn mit Ihrem Browser auf jene Webseite, die Sie testen möchten. Wir haben für dieses Beispiel die Seite des ORF verwendet.
- Öffnen Sie nun die Entwicklertools von Chrome. Dazu drücken Sie entweder die Taste F12 oder klicken mit der rechten Maustaste auf die geöffnete Seite und wählen dann „Untersuchen“ im Kontextmenü aus.
- In den Entwicklertools wählen Sie den Tab „Lighthouse“ aus.
- Um die Startseite des ORF zu prüfen, wählen Sie den Modus „Navigation“, als Device „Desktop“ und als Kategorie nur „Accessiblity“ aus.
- Klicken Sie auf den Button „Analyze Page Load“ - Sie erhalten nach einer kurzen Wartezeit das Ergebnis.
Das Ergebnis
Es fällt sofort ins Auge, dass die Seite laut Lighthouse 84% barrierefrei ist. Das ist ein solides Ergebnis, aber es gibt noch Luft nach oben.
Eine vollständige Besprechung des Ergebnisses würde den Rahmen dieses Beitrags sprengen. Wir möchten jedoch beispielhaft näher auf den ersten aufgelisteten Punkt eingehen. Lighthouse teilt uns mit, dass bei einigen Bildern das „alt“-Attribut (“alt” steht für “alternative”) fehlt. Das „alt“-Attribut wird benutzt, um den Inhalt relevanter Bilder zu beschreiben. Einem Benutzer, der einen Screenreader verwendet, um durch die Seite zu navigieren, wird dieser Text anstelle des Bildes vorgelesen.
Das „alt“ Attribut muss bei Bildern immer vorhanden sein, sollte unter gewissen Umständen allerdings leer bleiben: nämlich dann, wenn das Element rein dekorativ ist und keine wichtigen Informationen für den Nutzer der Seite enthält. In diesem Fall signalisiert ein vorhandenes, aber leeres „alt“ Attribut einem Screenreader, dass das Bild ignoriert werden soll. Mehr dazu finden Sie in den Web Content Accessibility Guidelines (WCAG).
Lighthouse listet alle betroffenen Elemente auf, die keinen „alt“-Text aufweisen. In der Linken Spalte sehen sie das Element in einem Bild graphisch hervorgehoben mit grüner Umrandung. Der Text in der rechten Spalte ist die Klasse des Elementes – ein Attribut, mit dem Entwickler von Webseiten das Element ausfindig machen und gestalten können.
In unserem Beispielfall beanstandet Lighthouse ausschließlich die „alt“ Attribute jener Icons, die orf.at hinter Links setzt, welche auf Subseiten verweisen (z.B. https://wien.orf.at). Hier muss auf jeden Fall das “alt”-Attribut hinzugefügt werden. Nun stellt sich die Frage, ob es leer bleiben kann. Nach einer kurzen Inspektion mit einem Screenreader fällt auf, dass zwar hervorgeht, dass die Artikelüberschrift ein Link ist, aber nicht, wo dieser hinführt. Um die Orientierung zu erleichtern, sollte im "alt"-Attribut vermerkt werden, dass der Link zu einer Subseite führt.
Testen mit WAVE
- Um mit WAVE zu testen, öffnen Sie https://wave.webaim.org/.
- Geben Sie zuerst im Feld „Web Page address“ jene Seite ein, die Sie testen möchten und klicken Sie auf den kleinen Pfeil neben dem Eingabefeld. Wir testen wieder mit der Seite des ORF.
- Nach kurzer Zeit erhalten Sie das Ergebnis.
Falls Sie nicht immer die WAVE-Webseite aufrufen möchten, um einen Test durchzuführen, können Sie sich auch die offizielle Browser-Erweiterung installieren.
Das Ergebnis
Im Gegensatz zu Lighthouse wird bei WAVE direkt auf der getesteten Seite angezeigt, welche Bereiche geprüft wurden. Um die Details anzusehen, klicken Sie nun einfach auf den Tab „Details“ im WAVE-Bereich.
Es fällt sofort auf, dass WAVE ebenso wie Lighthouse die fehlenden „alt“-Texte als Fehler markiert. WAVE zeigt auch einige Warnungen an. Eine Warnung bedeutet, dass es möglicherweise ein Problem gibt, dass der Fall aber genauer von einem Menschen geprüft werden muss. Mit Klick auf die Icons wird Ihnen direkt auf der Website angezeigt, welches Element betroffen ist. Wie schon bei Lighthouse wollen wir auch hier einen der fehlerhaften Aspekte genauer unter die Lupe nehmen.
WAVE (so wie auch Lighthouse) bemängelt, dass der Kontrast in einigen Bereichen nicht hoch genug ist. Ein starker Kontrast ist wichtig, um es Menschen mit Sehschwäche zu ermöglichen, alle wichtigen Elemente auf einer Webseite zu erkennen und somit nutzen zu können. Dies kann beispielsweise Menschen betreffen, die an einem Katarakt („grauer Star“) leiden. Aber auch Menschen ohne Sehbeeinträchtigung profitieren von hohem Kontrast, etwa bei unzureichender Bildschirmhelligkeit.
Betrachten wir die Ergebnisse von WAVE, dann fallen vor allem zwei Kontrastprobleme auf, die wir in der untenstehenden Abbildung graphisch gekennzeichnet haben: aktive Links in der Kopfzeile (1) und Bildtitel (2). Im Sinne der Übersichtlichkeit haben wir alle anderen Meldungen ausgeblendet.
Bei den Bildbeschriftungen ist sofort ersichtlich, dass der Kontrast in einigen Fällen problematisch ist. Betrachten wir beispielsweise im Bereich (2) den Artikel „Studie: Klimakrise trifft Olympiastandorte“ (zweites Bild von links, untere Reihe): dort wird weiße Schrift auf sehr hellem Hintergrund dargestellt.
Beim Kontrast in der Kopfzeile ist das Problem nur teilweise erkennbar: das aktuelle Wetter wird auf einem geringfügig helleren Hintergrund dargestellt, als die Links in der dunkler hinterlegten Zeile darüber (Fernsehen, ORF ON, etc.). Aber was hat es mit dem letzten Fehler rechts oben in der Kopfzeile auf sich? Hier hat WAVE das Fehlersymbol etwas unglücklich platziert. Betrachten wir die Seite im Original, so fällt auf, dass der momentan aktive Link („News“) einen zu geringen Kontrast hat, da die Schrift in Grau gehalten ist:
Mehr zum Thema Kontrast erfahren Sie in den WCAG.
Abschluss
Sie haben nun erfolgreich Ihre ersten automatisierten Tests auf Barrierefreiheit abgeschlossen. Glückwunsch! Besprechen Sie die Testergebnisse mit Ihrem Webseitenentwickler, dieser kann die Ergebnisse deuten und die passenden Maßnahmen setzen.
Wie anfangs erwähnt, sind automatisierte Tests gut geeignet, um schnell und einfach technische Schwächen aufzudecken. Die tatsächliche Barrierefreiheit kann aber erst durch manuelle Tests beurteilt werden: in unserem Anschauungsbeispiel orf.at erweckt Lighthouse mit einem Testergebnis von 84 Punkten bzw. WAVE mit 27 Fehlern einen schlechteren Ersteindruck, als wir bei der Benutzung der Webseite bestätigt sehen. Wie manuelle Tests durchgeführt werden können und was zu beachten ist, zeigen wir Ihnen im nächsten Beitrag mit Hilfe von Microsoft Accessibility Insights.
