Heading Inspector: Chrome-Extension für bessere Barrierefreiheit

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.

Unser Werkzeug

Heading Inspector zeigt die Überschriften-Struktur einer Webseite mit korrekter Reihenfolge an

Heading Inspector markiert einen Verstoss gegen die korrekte Überschriften-Reihenfolge

Mit der Chrome-Extension «Heading Inspector» können Sie:

Verstösse gegen die korrekte Überschriften-Reihenfolge (H1 gefolgt von H2 usw.) in Ihrem 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.