Als zweites Produkt unserer Web-Accessibility-Tools haben wir die Chrome-Erweiterung „A11y Navigation Auditor" veröffentlicht. Dieses Tool visualisiert die „Struktur" einer Website schnell und präzise und ermöglicht einen reibungslosen Zugang zu oft übersehenen Problemen. Wir haben es entwickelt, um umfassende Strukturprüfungen zu unterstützen und zuverlässigere Accessibility-Diagnosen zu ermöglichen.
Hintergrund der Entwicklung
Es gibt viele Tools zur Diagnose von Accessibility.
Tools, die sich nur auf bestimmte Kategorien wie Überschriften oder Landmarks konzentrieren, geben keinen Gesamtüberblick.
Markierungstypen, die Überlagerungen auf der Seite verwenden, ermöglichen zwar einen Gesamtüberblick, verkomplizieren aber die Oberfläche und behindern die Übersicht.
Wir wollten diese Lücke schließen und ein Tool schaffen, das einen Gesamtüberblick bietet, die Oberfläche nicht verkompliziert und eine klare Übersicht ermöglicht.
Die Referenz war die Funktionalität der Elementenliste von Screenreadern, wie z. B. die Rotor-Anzeige von VoiceOver.
Durch die Visualisierung dieser Liste in einem Seitenpanel und das Hinzufügen einer Problemerkennungsfunktion entstand ein Entwickler-Tool, das eine lesbare und fortgeschrittene Strukturdiagnose ermöglicht.
Audit-Ziele und erkannte Probleme
▪️Überschriften
-Ebenen überspringen, leere Überschriften, verlorene Rollen usw.
▪️ Link
leerer Text, mehrdeutige Ausdrücke, doppelte Links usw.
▪️Formularsteuerelemente
fehlende Bezeichnungen, autocomplete-Attribute, Verknüpfung von Fehlermeldungen usw.
▪️ Fehlende
main-Landmarks, Unterscheidung doppelter Rollen, unzureichende Strukturierungselemente und mehr
▪️ Bilder:
fehlende alt-Attribute, unangemessene alt-Texte (wie „Bild"), Verwendung von Dateinamen usw.
▪️Tabellen:
fehlende Caption oder Header, mangelhaftes scope/headers bei komplexen Strukturen etc.
Hauptfunktionen
▪️Erkennung von WCAG-Konformitätsproblemen
unter Bezugnahme auf WCAG-Erfolgskriterien (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, etc.) und Anzeige in drei Stufen: Fehler / Warnung / Information.
▪️ Anzeige des berechneten barrierefreien Namens
Basierend auf der ARIA-Spezifikation werden der Name, den Bildschirmleser tatsächlich vorlesen, und seine Herkunft visualisiert.
▪️Echtzeit-Überwachung von ARIA-Zuständen
Zustandsänderungen wie aria-expanded und aria-invalid sowie dynamische Änderungen von zugänglichen Namen wie aria-label werden automatisch erkannt, und Änderungen der Barrierefreiheit je nach Benutzerinteraktion können sofort überprüft werden.
▪️Klick zum Hervorheben –
Klicken Sie einfach auf ein Element im Panel, um zum entsprechenden Element zu scrollen und es hervorzuheben. Das Wechseln zwischen Elementen ist auch mit den Pfeiltasten der Tastatur möglich.
▪️ Erweiterte Funktionen für Profis
• Inspektion verborgener Elemente ein-/ausschalten
• Automatischer Ausschluss von Drittanbieter-Widgets
• Unterstützung für zwei Sprachen: Japanisch und Englisch
A11y Navigation Auditor herunterladen
Liberogic verfolgt das Ziel, Accessibility nicht als "spezielle Maßnahme", sondern als "selbstverständliche Qualität" zu etablieren.
Nach dem ersten Tool „Area Contrast Checker" ist auch der jetzt veröffentlichte „A11y Navigation Auditor" eine Realisierung von Funktionen, die wir im praktischen Einsatz dringend brauchten. Wie der Name Navigation Auditor schon andeutet, möchten wir Websites unterstützen, bei denen sich jeder zurechtfindet und sein Ziel erreicht. Diese Absicht steckt dahinter.
Barrierefreiheit näher an Sie heran, noch reibungsloser. Wir bereiten weitere Tools vor – freuen Sie sich darauf.
