Ausgangslage und Motivation
Als etablierte Software-Boutique legt Quatico grossen Wert auf barrierefreien Zugang zu Webinhalten. Wir realisieren für unsere Kunden Webauftritte, welche die WCAG-2.1-AA-Richtlinien erfüllen. Unser Erfolg zeigt sich unter anderem durch den Gewinn des Best of Swiss Web Award 2023 mit dem Webauftritt von MeteoSchweiz. Die Stiftung «Zugang für alle» unterstützt uns regelmässig mit wertvollen Accessibility-Audit-Berichten.
Ein häufiges Problem ist, dass sich Nutzer assistierender Technologien – etwa Screenreader – im Inhaltsbaum nicht zurechtfinden, weil Überschriften (Headings) falsch strukturiert oder nur visuell statt semantisch als solche ausgezeichnet sind.
Um diese Probleme zu beheben und einen Beitrag zur Community zu leisten, haben wir unsere Open-Source-Chrome-Extension entwickelt und veröffentlicht: den Heading Inspector.
Warum eine neue Extension?
Herkömmliche Werkzeuge zur Prüfung korrekter Überschriften-Strukturen wie Bookmarklets oder Light-DOM-Extensions haben entscheidende Nachteile:
- Sie aktualisieren nicht nach Navigation oder Interaktion auf der Seite.
- Sie können Überschriften in Shadow-DOM-Elementen – einer modernen, verbreiteten Webtechnologie – nicht korrekt erkennen und anzeigen.
- Sie sind selbst nicht barrierefrei bedienbar.
Unser neuer Heading Inspector behebt genau diese Probleme. Damit geben wir Prüfenden und Dritten ein zuverlässiges Werkzeug zur Hand.
Unsere Lösung
Mit der Chrome-Extension «Heading Inspector» kannst du:
- Verstösse gegen die korrekte Überschriften-Reihenfolge (H1 gefolgt von H2 usw.) in deinem Webauftritt schnell finden.
- Seiten mit Shadow-DOM-Elementen korrekt auf Überschriften-Probleme prüfen.
- Nach Navigation oder Interaktion stets die aktuelle Überschriften-Struktur und allfällige Verstösse angezeigt bekommen.
- Per Klick auf eine Überschrift direkt zu dieser Stelle scrollen.
Wir sind überzeugt, dass der Heading Inspector massgeblich dazu beitragen wird, die Qualität und Barrierefreiheit von Webinhalten zu verbessern.
- Extension im Chrome Web Store: Heading Inspector installieren
- Quellcode im GitHub: quatico-solutions/heading-inspector
Wir freuen uns über Feedback und aktive Nutzung unserer neuen Open-Source-Lösung!
Was macht Quatico sonst so?
Bist du auf der Suche nach einem verlässlichen Umsetzungspartner für den Webauftritt deines Unternehmens, dein Vertriebsportal und/oder dein Kundenportal?
Dann melde dich gern bei uns!
Über die Autor:in
