Mit den axe DevTools ist es schnell und einfach möglich, automatisierte Barrierefreiheitsscans durchzuführen. Es gibt 2 Arten von Barrierefreiheitsscans:
Vollseitenscan
Von der Startseite der Erweiterung aus führt ein Klick auf „Vollseitenscan“ einen axe-core automatisierten Scan der gesamten Seite durch. Nachdem der Scan abgeschlossen ist, können Sie die Ergebnisse des Scans überprüfen.
Teilseitenscan
Von der Startseite der Erweiterung aus ermöglicht ein Klick auf „Teilseitenscan“ die Auswahl eines spezifischen Elements oder Seitenbereichs für den Scan. Dadurch wird ein vollständig isolierter Scan nur innerhalb des ausgewählten Elements durchgeführt (alle Inhalte außerhalb der ausgewählten Komponente werden effektiv ignoriert). Um ein Element auszuwählen, können Sie mit der Maus auf ein beliebiges Element auf der Seite zeigen und klicken oder den assistenztechnologie-freundlichen „Elementauswähler“ verwenden, um ein Element mit der Tastatur auszuwählen (ohne Maus erforderlich). Sobald die Auswahl getroffen wurde, können Sie auf Scan klicken, wodurch Sie zu den Ergebnisse des Scans gelangen.
Ergebnisse
Die Ergebnisübersicht zeigt die Barrierefreiheitsprobleme, die während eines Scans gefunden wurden. Die URL, in der der Scan durchgeführt wurde, wird zusammen mit einer Steuerung zum „Erneuten Ausführen“ des Scans angezeigt. Darunter wird bei Teilseitenscans das ausgewählte Element mit einer Steuerung „Hervorheben“ angezeigt, um das ausgewählte Element/Komponente auf der Seite zu markieren. Danach finden Sie die Zusammenfassungen der Probleme mit der Gesamtzahl der gefundenen Probleme sowie der Anzahl der Aufschlüsselungen, die als „Filter“ dienen, um bestimmte Problemtypen oder Kategorien anzuzeigen:
- „AUTOMATISCHE PROBLEME“: Probleme, die bei einem automatisierten Scan gefunden wurden
- „GEFÜHRTE PROBLEME“: Probleme, die während Intelligente geführte Tests gefunden wurden
- „Benötigt Überprüfung“: Potenzielle Probleme, bei denen axe-core nicht mit absoluter Sicherheit feststellen konnte, ob es echte Probleme sind. Dies kann häufig bei Farbkontrastberechnungen für Text über Hintergrundbildern oder komplexen Verläufen auftreten.
- Best Practice: Probleme, die nicht unbedingt den Erfolgskriterien der WCAG entsprechen, aber allgemein anerkannte Praktiken sind, die die Benutzererfahrung verbessern
- Auswirkungen (Kritisch, Ernst, Moderat und Geringfügig): Kategorien der Problembeeinträchtigung
Probleme werden nach ihren „Regeln“ gruppiert. Für jede verletzte Regel steht eine erweiterbare Schaltfläche mit der Regelbeschreibung zur Verfügung, um in die gefundenen Probleme einzutauchen.
Für jedes Problem stehen die folgenden Informationen zur Verfügung:
- Beschreibung des Problems
- „Hervorheben“ (Umschalten, das das Element auf der Seite hervorhebt)
- „Problem teilen“ (erstellt eine teilbare Seite speziell für das gefundene Problem, die alle Problemdaten sowie einen Screenshot enthält)
- Link zur speziellen Hilfeseite für die gegebene Regel ("mehr Informationen")
- „Elementposition“ (der generierte CSS-Selektor für das Element mit dem Barrierefreiheitsproblem)
- „Element inspizieren“ (ermöglicht das Inspizieren des Elements im Element-Panel der Entwicklerwerkzeuge)
- Quellcode des Elements
- Anleitung zur Behebung (Informationen, wie das Problem behoben werden kann)
Ergebnisse speichern
Benutzer mit einem „Pro“-Abonnement können ihre Ergebnisse über die Schaltfläche „Test speichern“ speichern. Sobald diese angeklickt wird, werden Sie aufgefordert, Ihrem Testprotokoll einen Namen zu geben. Danach werden Intelligente geführte Tests (IGTs) verfügbar sein, um Ihr Testen auf die nächste Ebene zu bringen! Gespeicherte Testprotokolle sind dauerhafte Aufzeichnungen, in denen alle Ihre Testdaten gespeichert werden. Sie können Ihre gespeicherten Tests jederzeit finden, indem Sie im oberen Menü auf den Menüpunkt „Gespeicherte Tests anzeigen“ klicken.
Wenn Sie Ihre Ergebnisse von einem Teilseitenscan speichern, können Sie IGTs innerhalb der ausgewählten Komponente ausführen.
