Barrierefreiheit: Manuelles Testen von Webseiten mit Accessibility Insights
Im letzten Blogartikel haben wir gezeigt, wie man mit Lighthouse und WAVE einen schnellen (wenn auch unvollständigen) automatisierten Check einer Webseite durchführen kann. Dieses Mal wollen wir uns mit dem manuellen Testen beschäftigen. Wir stellen das Tool „Accessibility Insights“ von Microsoft vor und wie Sie dieses zum Testen von Webseiten verwenden können.
Microsoft Accessibility Insights
Wir wählen für diesen Beitrag Accessibility Insights, weil es sich für uns als große Stütze beim manuellen Testen von Webseiten erwiesen hat. Das Tool bietet eine klar gegliederte Prüfliste, die sich an den WCAG-Standards 2.2 AA orientiert, welche auch die Anforderungen des European Accessibility Acts bzw. des Barrierefreiheitsgesetzes abdecken. Accessibility Insights führt Schritt für Schritt durch alle relevanten Testbereiche. Dabei können Testergebnisse direkt dokumentiert, gespeichert und exportiert werden. Zu jedem Testbereich gibt es ausführliche Informationen und Hilfestellung zum korrekten Prüfen der einzelnen Punkte. Dadurch ist es auch ungeübten Testern möglich, sich in das Testen einer Webseite einzuarbeiten und eine detaillierte manuelle Prüfung durchzuführen.
Installation und erster Start
-
Starten Sie Google Chrome oder Microsoft Edge und fügen Sie Accessibilty Insights als Erweiterung hinzu.
-
Öffnen Sie die Webseite, die Sie testen möchten. Für unsere Beispiele haben wir https://justament-consulting.at verwendet.
-
Klicken Sie nun auf das Symbol von „Accessibility Insights“. Es öffnet sich ein Menü mit mehreren Optionen. Für dieses Tutorial klicken Sie auf den Menüpunkt „Assessment“.
Die “Assessment“-Ansicht im Detail
-
Auf der linken Seite sehen Sie ein Menü, das eine Liste von Testkategorien enthält (Bereich 1, orange markiert). Initial ist hier „Overview“ ausgewählt.
-
Im Hauptbereich (Bereich 2, blau markiert) wird zu Beginn eine Übersicht über die einzelnen Testkategorien angezeigt. Im Verlauf des Testens sehen Sie hier, welche Punkte Sie schon getestet haben und welche noch zu absolvieren sind.
-
Rechts oben (Bereich 3, rot markiert) finden Sie nützliche Links zum Start.
-
Über dem Hauptbereich finden Sie eine Leiste (Bereich 4, grün markiert) mit dem Hinweis auf die Seite, die getestet wird und die Möglichkeiten, die Testergebnisse zu exportieren, den Testverlauf zu speichern bzw. zu laden und die Prüfung von vorne zu beginnen.
Allgemeines zum Testen
-
Um einen vollständigen Test durchzuführen, gehen Sie nun alle Punkte im Menü auf der linken Seite durch, prüfen die jeweiligen Unterpunkte und halten die Ergebnisse in den entsprechenden Eingabefeldern fest.
-
Der erste Menüpunkt bietet eine automatisierte Prüfung. Im Gegensatz zu Lighthouse und WAVE werden hier nur die fehlgeschlagenen Prüfungen angezeigt. Warnungen und Hinweise, welche Punkte genau getestet wurden, erhalten Sie hier nicht.
-
Wollen Sie einen Testlauf unterbrechen bzw. später fortsetzen, können Sie den Testlauf über die entsprechenden Menüpunkte in der Assessment-Ansicht im Bereich 4, speichern und zu einem späteren Zeitpunkt wieder in das Tool laden.
-
Wenn Sie alle Punkte getestet haben, können Sie Ihre Ergebnisse über den Export-Button als HTML oder JSON speichern und die Datei mit Ihrem Webentwickler teilen, um das weitere Vorgehen zu besprechen. Hier empfehlen wir aufgrund der Formatierung und Übersichtlichkeit das HTML-Format.
Detailliertes Beispiel - Tastaturnavigation
Es würde den Rahmen dieses Beitrags sprengen, alle Punkte eines Accessibility Tests im Detail zu besprechen. Deshalb wollen wir Ihnen exemplarisch am Punkt „Keyboard“ und dem Unterpunkt „2.1 Keyboard navigation“ das Vorgehen zeigen. Dies sollte es Ihnen ermöglichen auch alle anderen Punkte zu meistern.
- Nachdem Sie die Assessment-Ansicht geöffnet haben, klicken Sie auf den Punkt „Keyboard“ und auf den ersten Unterpunkt „Getting started“.
- Im Hauptfenster sehen Sie nun eine Erklärung, worum es geht. Kurz gesagt: es muss Usern möglich sein, per Tastatur mit Elementen auf der Webseite zu interagieren. Weiters finden Sie hier ein Link zu einem kurzen Erklärungsvideo. Wir empfehlen, dieses anzusehen. Falls die kurze Beschreibung im Hauptfenster nicht reicht, können Sie weitere Informationen, Beispiele und weiterführende Links erhalten, wenn Sie auf das kleine Symbol neben der Überschrift klicken.
-
Nachdem Sie sich mit dem Thema vertraut gemacht haben, klicken Sie auf den Unterpunkt „2.1 Keyboard navigation“.
-
Auch hier gibt es eingangs eine kurze Erklärung und die Möglichkeit, Genaueres zu erfahren. Weiters gibt es einen Schieberegler, der den Visual Helper steuert und eine Beschreibung, wie getestet werden muss.
-
Schalten Sie den Schieberegler des Visual Helper auf „On“. Die Webseite kommt nun in den Vordergrund und Accessibility Insights fordert Sie auf, mit der Tabulator-Taste durch die Webseite zu navigieren. Der Visual Helper markiert nun nach und nach alle Elemente, die mit der Tabulator-Taste angesprochen werden.
-
Kontrollieren Sie, ob alle interaktiven Elemente mit der Tastatur angesteuert und bedient werden können. Achten Sie dabei nicht nur auf den Hauptinhalt der Seite, sondern auch auf z.B. Menüs und Overlays oder ähnliche anfangs verborgene Elemente. Erreichen Sie alle interaktiven Elemente über die Tabulator Taste und ohne Verwendung der Maus, können Sie den Test in Accessibility Insights als „pass“ markieren. Falls Sie eines oder mehrere Elemente finden, die nicht ausschließlich mit der Tastatur bedienbar sind, klicken Sie auf „fail“.
-
Klicken Sie auf „+ Add a failure instance“ und schreiben Sie ein Kommentar, welches Element nicht mit der Tastatur angesprochen werden konnte und wo sich dieses auf der Webseite befindet.
- Mit Klick auf den Button „Add failed instance“ wird der Fehler nun hinzugefügt und im Hauptfenster angezeigt.
- Über “Export Result” können Sie Ihre Testergebnisse jederzeit als HTML oder JSON exportieren. Bei längeren Testläufen kann es sinnvoll sein, Zwischenexporte zu erstellen um die gefunden Fehler möglichst schnell zu beheben bzw. beheben zu lassen. Für gewöhnlich reicht ein Export am Ende. Optional können Sie eine Beschreibung angeben, die dann am Beginn des Exports angezeigt wird.
Abschluss
Accessibility Insights ist ein nützliches Tool, um eine Webseite systematisch und vollständig auf die Einhaltung der WCAG-Richtlinien zu testen. Durch die zusätzlichen Erklärungen und Materialien ist es möglich, sich über das Tool das nötige Wissen anzueignen, um die Tests gut und gewissenhaft durchzuführen. Besonders für Neueinsteiger ist Microsoft Accessibility Insights eine gute Stütze, um die Barrierefreiheit der eigenen Webseite zu testen. Aber auch geübte Benutzer profitieren vom strukturierten Aufbau und der hohen Benutzerfreundlichkeit.