Als zweites Werkzeug für Web-Accessibility von Liberogic haben wir die Chrome-Erweiterung "A11y Navigation Auditor" veröffentlicht. Sie macht das "Gerüst" einer Website schnell und präzise sichtbar und hilft, leicht übersehene Probleme gezielt anzugehen. Das Tool unterstützt eine umfassende Strukturprüfung und ermöglicht so eine verlässlichere Diagnose der Barrierefreiheit.
Hintergrund der Entwicklung
Es gibt viele Werkzeuge zur Diagnose von Barrierefreiheit.
Tools, die nur bestimmte Kategorien wie Überschriften oder Landmarks abdecken, vermitteln jedoch kein Gesamtbild.
Tools, die Markierungen über die Seite legen, zeigen zwar die Gesamtstruktur, machen die Ansicht aber unübersichtlich und erschweren den Überblick.
Diesen Mangel wollten wir beheben: Wir haben ein Tool entwickelt, das das Gesamtbild erfasst und dennoch eine übersichtliche Ansicht ermöglicht.
Als Vorbild dienten Funktionen wie die Elementliste des Rotors in VoiceOver, also die Auflistung der Elemente für Screenreader.
Diese haben wir in einem Seitenpanel visualisiert und um eine Problemerkennung ergänzt. So entstand ein Entwicklerwerkzeug, das übersichtliche und umfassende Strukturdiagnosen ermöglicht.
Prüfbereiche und erkannte Probleme
▪️Überschriften:
übersprungene Ebenen, leere Überschriften, fehlende Rollen usw.
▪️Links:
leerer Linktext, unklare Formulierungen, doppelte Links usw.
▪️Formularelemente:
fehlende Labels, autocomplete-Attribute, fehlende Zuordnung von Fehlermeldungen usw.
▪️Landmarks:
fehlendes main-Element, nicht unterscheidbare doppelte Rollen, mangelhafte Sectioning-Elemente usw.
▪️Bilder:
Fehlendes alt-Attribut, unpassende Alternativtexte (z. B. „Bild“) und die Verwendung von Dateinamen
▪️Tabellen:
Fehlende caption oder Kopfzeilen sowie unvollständige scope- bzw. headers-Angaben bei komplexen Strukturen
Hauptfunktionen
▪️Erkennung von WCAG-Verstößen:
Bezug auf WCAG-Erfolgskriterien (z. B. 1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2) mit Anzeige in drei Stufen: Fehler / Warnung / Information.
▪️Anzeige des berechneten Accessible Name:
Auf Grundlage der ARIA-Spezifikation werden der Name, den Screenreader tatsächlich vorlesen, sowie dessen Herkunft sichtbar gemacht.
▪️Echtzeitüberwachung von ARIA-Zuständen:
Zustandsänderungen wie aria-expanded und aria-invalid sowie dynamische Änderungen des Accessible Name durch etwa aria-label werden automatisch erkannt, sodass sich die Auswirkungen von Bedienaktionen auf die Barrierefreiheit sofort prüfen lassen.
▪️Markierung per Klick:
Ein Klick auf einen Eintrag im Panel scrollt zum betreffenden Element und hebt es hervor. Mit den Pfeiltasten lassen sich die Einträge ebenfalls per Tastatur wechseln.
▪️Erweiterte Funktionen für Profis:
• Prüfung ausgeblendeter Elemente ein-/ausschalten
• Automatischer Ausschluss von Drittanbieter-Widgets
• Unterstützung für Japanisch und Englisch
Download des A11y Navigation Auditor hier
Bei Liberogic verfolgen wir das Ziel, Barrierefreiheit nicht als „Sonderlösung“, sondern als selbstverständlichen Qualitätsstandard zu etablieren.
Nach dem ersten Tool, dem "Area Contrast Checker", ist auch der "A11y Navigation Auditor" aus einem Bedürfnis entstanden, das wir in unserer täglichen Arbeit immer wieder verspürt haben. Der Name Navigation Auditor steht für unseren Anspruch: Wir möchten Websites unterstützen, auf denen sich alle Nutzerinnen und Nutzer mühelos zurechtfinden und ihr Ziel erreichen.
Barrierefreiheit soll noch zugänglicher und unkomplizierter werden. Weitere Tools sind bereits in Vorbereitung. Wir freuen uns auf Ihr Interesse.
