Erste Schritte mit Axe Watcher

Dieser Leitfaden führt Sie durch die Einrichtung von Axe Watcher, um automatisierte Tests zur Barrierefreiheit in Ihre bestehende End-to-End-Testsuite zu integrieren.

Verständnis von Watcher und Axe Developer Hub

Axe Watcher ist eine Eingabequelle für Axe Developer Hub, die Sie in Ihre Testsuite integrieren. Axe Developer Hub ist die Webplattform, auf der Sie Ihre Barrierefreiheitsergebnisse anzeigen und verwalten. Gemeinsam bilden sie eine komplette Lösung für Barrierefreiheitstests:

Axe Watcher läuft mit Ihren automatisierten Tests und analysiert jede Seite, die Ihre Tests auf Barrierefreiheitsprobleme besucht. Es erkennt DOM-Änderungen und erfasst mehrere Seitenzustände, was es ideal für das Testen von dynamischen Inhalten wie Single-Page-Anwendungen, Anmeldevorgängen und interaktiven Komponenten macht. Bei der Integration mit Git ordnet Watcher die Ergebnisse bestimmten Commits und Branches zu.

Axe Developer Hub empfängt Barrierefreiheitsergebnisse von Eingabequellen wie Watcher und präsentiert sie in einer organisierten Benutzeroberfläche. Sie können Barrierefreiheitsprobleme über Commits hinweg verfolgen, Branches vergleichen, nach Schweregrad filtern und den Fortschritt der Barrierefreiheit Ihres Projekts im Laufe der Zeit überwachen. Die Plattform entdoppelt Probleme, sodass Sie jedes einzigartige Problem nur einmal sehen.

Einrichtungsschritte

1. Erstellen Sie ein Watcher-Projekt

Ein Projekt im Axe Developer Hub enthält Ihre Barrierefreiheitsergebnisse, Testlaufinformationen und Git-Daten. Jedes Projekt hat eine eindeutige Projekt-ID, die Ihre Testläufe mit ihm verknüpft.

Um ein Projekt zu erstellen:

1. Besuchen Sie die Axe Developer Hub-Startseite  oder klicken Sie Neues Projekt hinzufügen auf Ihrer Projektseite.
2. Wählen Sie Axe Watcher von der Wählen Sie Ihre Integrationsmethode Seite.
3. Benennen Sie Ihr Projekt.
4. Wählen Sie Ihre Programmiersprache.
5. Wählen Sie Ihre Browser-Automatisierungsplattform.

Für vollständige Anweisungen siehe Projekte einrichten.

2. Ändern Sie Ihre Testsuite

Die Integration von Watcher erfordert nur minimale Änderungen an Ihren bestehenden Tests. Der allgemeine Prozess umfasst:

1. Installation des Watcher-Pakets
2. Import der Konfigurationsfunktionen und Controller-Klassen
3. Einhüllung Ihrer Browserkonfiguration mit der Konfigurationsfunktion von Watcher
4. Einhüllung Ihrer Browser- oder Seiteninstanz mit Watcher
5. Flushing Ihrer Ergebnisse nach jedem Test, um Ergebnisse an Axe Developer Hub zu senden

Die spezifische Implementierung variiert je nach Plattform. Wählen Sie Ihre Sprache aus den untenstehenden Links, um zu Anweisungen zu gelangen, die speziell für Ihre Browser-Automatisierungsplattform gelten:

• JavaScript
• TypeScript
• Java

Wenn Sie keine bestehende Testsuite haben, die Sie ändern können, bietet das Axe Watcher-Beispielrepository funktionierende Beispiele für jede unterstützte Plattform.

3. Führen Sie Ihre Tests aus und überprüfen Sie die Ergebnisse

Sobald Sie Ihre Testsuite geändert haben, führen Sie sie wie gewohnt aus. Watcher analysiert automatisch Seiten und sendet Ergebnisse an Axe Developer Hub.

Nachdem der Testlauf abgeschlossen ist, besuchen Sie Ihr Projekt im Axe Developer Hub, um die Ergebnisse zu überprüfen. Sie werden sehen:

• Branch-Seite (Git-Projekte): Zeigt alle gescannten Branches mit Barrierefreiheitszusammenfassungen an.
• Commits-Seite (Git-Projekte): Zeigt Commits innerhalb eines Branches mit Vergleichsdaten an.
• Testruns-Seite (Nicht-Git-Projekte): Zeigt jeden Testrun mit Zeitstempeln und Problemzahlen an.
• Übersichtsseite: Zeigt alle Barrierefreiheitsregeln an, die verletzt wurden, mit Problemzahlen nach Auswirkung.
• Detailseite: Bietet ausführliche Informationen zu jeder Verletzung, einschließlich der Position des Elements, Quellcode und Anleitungen zur Behebung.

Für eine Anleitung zum Navigieren Ihrer Ergebnisse, siehe Ergebnisse Verstehen.

Nächste Schritte

• Barrierefreiheitsprüfungen in CI/CD automatisieren: Verwenden Sie die GitHub-Aktion, um Pull-Requests mit Barrierefreiheitsfehlern zu blockieren, oder integrieren Sie sich mit anderen Plattformen mittels des REST-Service
• Passen Sie Ihre Tests an: Erfahren Sie mehr über den manuellen Modus, um zu steuern, welche Seiten analysiert werden
• Schwellenwerte konfigurieren: Richten Sie den a11y-Schwellenwert ein, um die Toleranz Ihrer Organisation für Barrierefreiheitsfehler zu definieren
• Verwenden Sie eine globale Konfiguration: Anwenden konsistenter Barrierefreiheitsstandards in Ihrer Organisation