Gehirngerecht Digital

Automatisiert auf digitale Barrierefreiheit testen

Mit den folgenden Tools kannst du deine Website automatisiert auf digitale Barrierefreiheit testen und gängige Barrieren finden.

Screenshot der automatisierten Testung einer Seite mit sitebrunch Accessibility

Warum automatisiert testen?

Mit automatisierten Tests auf digitale Barrierefreiheit kann man bis zu 30 % der Fehler mit der WCAG finden.

Automatisierte Test-Tools ersetzen also keinen vollständigen manuellen Test, können aber dabei helfen, gängige und häufige Fehlerquellen schnell aufzudecken.

Beispiele solcher Fehler sind:

  • Fehlende Textalternativen (Alt-Attribute)
  • Mangelhafter Farbkontrast
  • Fehlerhafte Formular-Label
  • Fehlende Sprachangabe im HTML
  • Fehlender Seitentitel

Mittlerweile gibt es unzählige Test-Tools da draußen. Im Prinzip machen sie aber alle das Gleiche. Wir stellen hier ein paar der gängigsten vor.

Tools zum Testen von barrierefreiheit

  • ARC Toolkit

    Eine Browser-Erweiterung, die sich in die Entwicklertools integriert, um Webseiten auf WCAG-Konformität zu prüfen. Es gliedert Ergebnisse übersichtlich in Fehler, Warnungen und Best Practices, wobei es Entwicklern hilft, Barrieren direkt im Quellcode zu lokalisieren. 

    Zur Browser-Extention von ARC Toolkit
    Screenshot von den Testergebnissen von ARC-Toolkit in der Entwicklerkonsole.

  • axe DevTools

    Der Branchenstandard für automatisierte Barrierefreiheits-Tests. Es scannt Webseiten auf WCAG-Konformität und garantiert dabei keine “False Positives” (Fehler, die keine sind!) Die Ergebnisse werden präzise im Quellcode markiert und mit klaren Anleitungen zur Behebung der Fehler verknüpft.

    Zum Download von axe DevTools
    Screenshot von den Testergebnissen von axe-DevTools in der Entwicklerkonsole

  • WAVE

    Auf der Website von WAVE kannst du einfach deine Webadresse eingeben und es wird eine Seite der Website getestet! (Hier muss man allerdings manchmal genau hinschauen, ob die Fehler auch wirklich Fehler sind.)

    Zum Website von Wave
    Screenshot von den Testergebnissen der Website WAVe

  • sitebrunch Accessibility

    Schon in der Gratisversion von sitebrunch Accessibility kannst du URLs eingeben, die automatisiert getestet werden sollen. Ab dem Solo-Account kannst du ganze Websites monitoren und alle 7 Tage komplett durchscannen lassen. 

    Zur Anmeldung bei sitebrunch Accessibility
    Screenshots vom automatisierten Testergebnis von sitbrunch mit bestanden und gefailten Checks.

  • Googel Lighthouse

    Einfach in Chrome einen Rechtsklick machen, die Entwicklerkonsole öffnen und auf den Tab »Lighthouse« gehen. Dort den Test starten und abwarten. 

    Ein Score von 100% heißt bei weitem nicht, dass man barrierfrei ist! Wie gesagt, finden automatisierter Tests nur 20-30% der Fehler. 

    Screenshot von den Testergebnissen von Lighthouse in der Entwicklerkonsole

Häufige Fragen zu Automatisierten TEsts

    Was kann automatisiert getestet werden?

    Automatisierte Tools prüfen primär den Quellcode gegen technische Standards der WCAG (Web Content Accessibility Guidelines).

    Dazu gehören:

    Was kann nicht automatisiert geprüft werden?

    Automatisierte Testtools können zwar erkennen, ob ein Alt-Attribut da ist, aber nicht, ob es inhaltlich sinnvoll ist. Wenn »Bild334« darinsteht, reicht das für sie schon als »Alt-Text vorhanden« aus.

    Ein weiteres Beispiel ist, dass die verstehen, dass ein Element fokussierbar ist, aber nicht, ob es einen visuellen Fokuszustand hat (der nach der WCAG gefordert ist).

    Welche Tools für automatisiertes Testen auf Barrierefreiheit werden empfohlen?

    Ein paar der Empfehlungen sind:

    • axe-core: Die wohl am weitesten verbreitete Library (integriert in viele andere Tools)
    • Lighthouse: Direkt in den Google Chrome DevTools eingebaut.
    • WAVE: Browser-Add-on für schnelle visuelle Checks.
    • sitebrunch Accessiblity: Für ein durchgängiges Monitoring der Website

    Wann sollte man automatisierte Tests auf Barrierefreiheit einsetzen?

    Am besten so früh wie möglich!

    • Während der Entwicklung und im Build-Prozess (CI/CD): Um zu verhindern, dass offensichtliche Fehler (wie fehlende Kontraste) überhaupt live gehen.
    • Nach der Entwicklung: Per Browser-Extension.
    • Regelmäßiges Monitoring: Um sicherzustellen, dass Redakteure beim Einpflegen neuer Inhalte die Standards halten.

    Mehr dazu auch in unserem Artikel über das Testen.

Du willst die Tools in Aktion sehen?

In unseren YouTube-Videos und YouTube-Shorts stellen wir immer wieder verschiedene Tools vor und geben praktische Anleitungen zur Umsetzung digitaler Barrierefreiheit. 

Besuche den Gehirngerecht-YouTube-Kanal
Screenshot eines YouTube-Shorts in dem Tobias über das Tool ContrastGrid spricht.