Automatische Accessibility Audits – Wie wir mit unserem A11y-Testing-Tool Barrieren aufspüren Automatische Accessibility Audits – Wie wir mit unserem A11y-Testing-Tool Barrieren aufspüren

Ein Ally-Tool by Liechtenecker?
Yes!  Seht selbst:

Aber zurück auf Anfang:
Wie es zu unserem Tool kam, lest ihr hier:

Warum Axe-Core?

Axe-Core ist eine der leistungsfähigsten Open-Source-Libraries für automatisierte Accessibility-Tests. Laut Deque Systems lassen sich damit bis zu 57% aller WCAG-relevanten Accessibility-Issues automatisiert erkennen – das spart enorm Zeit bei Audits. Unser Tool nutzt Axe-Core, um Webseiten gezielt auf Barrieren zu untersuchen. Dabei werden je nach Konfiguration einzelne Seiten oder komplette Sitemaps analysiert. Durch die Kombination mit Puppeteer können wir den Accessibility-Check nicht nur auf statischen Seiten, sondern auch in realen Nutzungsszenarien durchführen.

Warum herkömmliche Accessibility Chrome Extensions nicht ausreichen

Es gibt bereits einige Chrome Extensions für Accessibility-Checks, darunter auch die offizielle Axe DevTools Extension von Deque. Diese sind nützlich für eine schnelle Analyse einer einzelnen Seite, haben jedoch einen entscheidenden Nachteil: Sie funktionieren immer nur auf der gerade geöffneten Seite. Das macht sie für umfassende Accessibility Audits von kompletten Webseiten wenig effizient, da jede Unterseite manuell besucht und geprüft werden müsste.

Unsere Lösung geht hier einen entscheidenden Schritt weiter. Durch die serverseitige Analyse mit unserem Tool können ganze Sitemaps automatisiert geprüft werden, sodass Accessibility-Issues über die gesamte Webseite hinweg erkannt und gruppiert werden. So lassen sich Probleme nicht nur pro Seite, sondern auch seitenübergreifend auswerten, um besonders kritische Barrieren effizient zu priorisieren.

Als Ergänzung haben wir eine eigene Chrome Extension entwickelt, die eine direkte Nachprüfung der gefundenen Probleme auf der jeweiligen Webseite ermöglicht. Sie zeigt eine Sidebar mit den identifizierten Accessibility-Problemen an und hebt betroffene Elemente visuell hervor. Besonders praktisch: Wenn man sich aus dem Analyse-Tool ein spezifisches Problem ansieht und auf den Button „Auf der Webseite analysieren“ klickt, öffnet sich die betroffene Seite, der Browser scrollt automatisch zum relevanten Element und hebt es mit einem gelben Rahmen hervor. So lassen sich Accessibility-Probleme effizient im Kontext überprüfen und direkt optimieren.

Wie der Accessibility-Check funktioniert

Unser Tool ermöglicht es, Projekte mit konfigurierbaren Accessibility-Checks zu erstellen. Ein Check kann entweder eine einzelne URL analysieren oder eine Sitemap laden und alle darin enthaltenen Seiten prüfen. Während der Analyse startet unser Backend einen Puppeteer-gestützten Headless-Chrome-Browser, lädt die Seite und führt Axe-Core-Tests aus.

Ein besonderes Feature ist die Möglichkeit, pro Check “custom page actions” zu konfigurieren. Darunter verstehen wir benutzerdefinierten Javascript-Code, welcher im Test-Browser ausgeführt wird, bevor die Analyse beginnt. Diese Funktion haben wir in unser Tool integriert, um realitätsnahe Testbedingungen zu schaffen. Damit lassen sich beispielsweise Cookie-Banner automatisch wegklicken, Menüs öffnen oder interaktive Elemente aktivieren, bevor Axe-Core die Seite prüft. So können wir auch Accessibility-Issues erfassen, die erst nach Nutzer:inneninteraktion sichtbar werden – ein entscheidender Vorteil gegenüber Standard-Scans.

Die Ergebnisse werden serverseitig gespeichert und stehen anschließend in einer übersichtlichen Oberfläche zur Verfügung. Dabei setzen wir auf drei verschiedene Darstellungsformen:

1. Übersicht der Ergebnisse pro Problem

   Accessibility-Issues lassen sich effizienter beheben, wenn sie nach Art des Problems gruppiert sind. Deshalb fassen wir alle Vorkommen desselben Fehlertyps zusammen. Ein Problem kann auf mehreren Seiten auftreten – mit dieser Ansicht wird sichtbar, wie weitreichend eine bestimmte Barriere ist.

    

2. Übersicht der Ergebnisse pro Seite

   Für eine gezielte Optimierung ist es oft hilfreich, die Analyse pro Seite durchzuführen. Hier sieht man, welche Unterseiten besonders schlecht abschneiden, wie viele Violations sie enthalten und wie hoch der Accessibility-Score ist. Diese Ansicht ist vor allem für Entwickler:innen praktisch, die gezielt einzelne Seiten optimieren möchten.

    

3. Detailansicht einer spezifischen Seite

   In der Detailansicht werden alle identifizierten Accessibility-Probleme für eine spezifische URL übersichtlich dargestellt. Neben den grundlegenden Informationen zur Seite, wie Score und Bildschirmgröße, werden alle gefundenen Probleme gruppiert nach Violations, Incompletes, Inapplicable und Passes aufgelistet.

   Jedes Problem wird mit folgenden Details angezeigt:

    

• Problem-Titel
• Beschreibung und Axe-Core Hilfe-URL
• Impact-Bewertung (von Axe-Core)
• Anzahl betroffener Elemente auf der Seite
• Liste der betroffenen Elemente inklusive:
  • HTML-Snippet des Elements
  • kopierbarer CSS-Selector des Elements
  • zugehörige Elemente (z. B. zugehörige Labels oder Inputs)
  • Failure Summary für dieses Element
  • Button "Auf der Webseite analysieren", um das Element direkt auf der betroffenen Webseite mithilfe unserer eigens entwickelten Chrome Extension hervorzuheben
  • Falls aktiviert: Screenshot des betroffenen Elements

Diese Detailansicht ermöglicht es Entwickler:innen, sich gezielt mit einzelnen Problemen auseinanderzusetzen und direkt Lösungen umzusetzen.

Nicht alle Accessibility-Issues sind gleich – So unterscheiden wir die Ergebnisse

Nicht jedes potenzielle Accessibility-Problem lässt sich automatisiert eindeutig klassifizieren. Deshalb unterteilt Axe-Core die Ergebnisse in vier Kategorien:

• Violations: Eindeutige Accessibility-Verstöße, die behoben werden müssen.
• Incompletes: Tests, die nicht eindeutig abgeschlossen werden konnten – oft, weil eine manuelle Nachprüfung erforderlich ist.
• Inapplicable: Regeln, die für die geprüfte Seite nicht relevant sind, weil das zu testende Element nicht existiert.
• Passes: Erfolgreiche Tests, die belegen, dass bestimmte Accessibility-Kriterien erfüllt wurden.

Ein zentraler Vorteil von Axe-Core ist seine Zuverlässigkeit in der Fehlererkennung. Die Engine wurde so entwickelt, dass sie keine False Positives (also fälschlicherweise als Fehler erkannte Elemente) generiert. Das bedeutet, dass alles, was als Violation ausgegeben wird, tatsächlich ein Accessibility-Problem ist. Falls ein Test automatisiert nicht eindeutig entscheiden kann, ob ein Problem vorliegt, stuft Axe-Core das Ergebnis als Incomplete ein – anstatt ein potenzielles Problem fälschlicherweise als Fehler zu melden.

Da Incompletes eine manuelle Nachprüfung erfordern, haben wir in unser Tool eine Funktion integriert, mit der Accessibility-Expert:innen diese als "problematisch" markieren können. Der Workflow für die Behebung von Accessibility-Issues sieht also folgendermaßen aus:

1. Checks laufen lassen – unser Tool analysiert die Seiten automatisiert und liefert Ergebnisse.
2. Accessibility-Expert:innen überprüfen die Incompletes – sie markieren problematische Stellen, die behoben werden müssen.
3. Entwickler:innen fixen die Violations und die als problematisch markierten Incompletes.

Dieser Ansatz stellt sicher, dass keine wichtigen Barrieren übersehen werden, während gleichzeitig die Effizienz in der Behebung von Accessibility-Problemen maximiert wird.

Accessibility Audits als Service – Automatisierung trifft Expertise

Unser Tool reduziert den Aufwand für Accessibility Audits drastisch. Automatisierte Tests sind jedoch nur ein Teil eines umfassenden Audits – sie decken vor allem technisch erkennbare Fehler ab. Komplexe Barrieren wie semantisch falsche ARIA-Nutzung oder schlechte UX für Screenreader müssen dennoch manuell überprüft werden.

Deshalb kombinieren wir technische Automatisierung mit menschlicher Expertise. Unser Team besteht aus zertifizierten Accessibility-Expertinnen, die Accessibility nicht nur aus technischer, sondern auch aus nutzerzentrierter Perspektive bewerten. Mit unserer Lösung finden wir blitzschnell kritische Accessibility-Issues, sodass wir uns in der manuellen Prüfung auf die wirklich kniffligen Fälle konzentrieren können.

Mehr über unsere Accessibility-Services, unsere Expertinnen und unsere ganzheitlichen Audits erfährst du auf unserer Landingpage:

👉 liechtenecker.at/accessibility

Barrierefreiheit ist nicht nur eine gesetzliche Anforderung – sie macht Webseiten für alle nutzbarer. Und mit unserer Lösung geht das effizienter als je zuvor. 🚀