Barrierefreiheit-Test-Tools und WCAG-Checker im Vergleich

Es gibt viele gute Tools für den Barrierefreiheitstest, und die meisten sind kostenlos. Sie unterscheiden sich weniger darin, was sie finden, als darin, wo sie laufen (Browser-Erweiterung, Kommandozeile, Cloud-Dienst), welche Regel-Engine sie nutzen und wer das Ergebnis liest: Entwickler, ein QA-Team oder die Inhaberin eines Unternehmens. Diese Seite vergleicht die Tools, nach denen am häufigsten gesucht wird, mit Angaben aus ihren offiziellen Seiten, und erklärt, wo Pandus steht.

Jedes Tool auf dieser Seite testet automatisch. Keines kann bestätigen, dass eine Website die WCAG erfüllt; alle finden einen Teil der Probleme. Unsere eigenen Prüfungen sind eine automatische Prüfung, kein vollständiges Audit, und keine Rechtsberatung.

Vergleichstabelle

Preise und Funktionen ändern sich; prüfen Sie vor einer Entscheidung die Seite des jeweiligen Anbieters.

WAVE

WAVE ist eine Sammlung von Prüfwerkzeugen von WebAIM an der Utah State University. Sie geben eine URL auf der Website ein oder nutzen die Erweiterungen für Chrome, Firefox und Edge. Die Erweiterung läuft vollständig in Ihrem Browser und funktioniert deshalb auch auf Seiten hinter einem Login, mit lokalen Dateien und dynamischen Seiten. Die Ergebnisse erscheinen als Symbole auf der Seite und in einer Seitenleiste mit Fehlern, Kontrastfehlern und Hinweisen zur manuellen Prüfung. Für viele Seiten gibt es eine API im Abo und eine eigenständige Engine. WAVE ist beliebt zum Lernen, weil es die Probleme dort zeigt, wo sie sind.

Lighthouse

Lighthouse ist Googles Open-Source-Werkzeug für Seitenqualität. Sie starten es im Lighthouse-Tab der Chrome DevTools, über die Kommandozeile oder online über PageSpeed Insights. Sein Barrierefreiheits-Score ist ein gewichteter Durchschnitt von Bestanden-oder-nicht-Prüfungen auf Basis von axe-Regeln; manuelle Prüfungen fließen nicht in den Score ein. Das ist ein nützliches schnelles Signal, aber ein Score von 100 deckt nur die automatischen Prüfungen ab – er bedeutet nicht, dass die Seite die WCAG erfüllt.

axe DevTools und axe-core

axe-core ist die Open-Source-Regel-Engine von Deque Systems, auf der viele Werkzeuge aufbauen, auch Pandus. axe DevTools ist Deques Produktlinie darum herum: eine Browser-Erweiterung mit kostenloser Version, kostenpflichtige Pro-Funktionen wie geführte Tests, ein Linter für VS Code und Integrationen für automatische Tests in CI.

Accessibility Insights for Web

Accessibility Insights ist Microsofts Open-Source-Werkzeugsammlung. Die Web-Erweiterung für Chrome und Edge bietet FastPass, das häufige, schwerwiegende Probleme in wenigen Minuten findet, und ein Assessment, das Menschen mit HTML-Kenntnissen durch die Kriterien von WCAG 2.1 AA führt, einschließlich manueller Schritte. Es gibt auch Versionen für Windows-Anwendungen.

IBM Equal Access Accessibility Checker

IBMs Equal Access Toolkit ist Open Source unter Apache-2.0. Der Checker integriert sich in die Entwicklerwerkzeuge von Chrome, Firefox und Edge, und das npm-Paket accessibility-checker führt dieselben Regeln in CI mit Selenium, Puppeteer oder Playwright aus. Er nutzt IBMs eigene Regel-Engine mit Regelsätzen für WCAG 2.2, 2.1 und 2.0 und ist damit eine gute zweite Meinung neben einem Tool auf Basis von axe.

Pa11y

Pa11y ist eine Familie kostenloser Open-Source-Kommandozeilenwerkzeuge. Pa11y testet eine Seite; Pa11y CI geht eine Liste von URLs durch und ist für Pipelines gemacht. Es kann HTML_CodeSniffer (Standard) oder axe-core ausführen.

BrowserStack Accessibility Testing

BrowserStack Accessibility Testing ist ein kommerzieller Dienst mit eigener Regel-Engine Spectra, einer Browser-Erweiterung für Chrome und Edge, einem Website-Scanner und CI-Integration. Laut BrowserStack enthält der kostenlose Tarif unbegrenzte Website-Scans auf Abruf für bis zu fünf verschiedene Seiten. Er passt zu Teams, die BrowserStack bereits für Cross-Browser-Tests nutzen.

Wo Pandus steht

Pandus nutzt dieselbe offene Engine axe-core wie Lighthouse und axe DevTools. Der Unterschied liegt in dem, was um den Test herum passiert:

• Jede Seite, jede Woche. Ein Tarif durchsucht die ganze Website nach Zeitplan und zeigt, was neu ist, was behoben wurde und wie der Trend verläuft.
• Berichte für Inhaber. Zu jedem Fund gibt es eine verständliche Regelkarte: was er für Kunden bedeutet und wie man ihn in Shopify, WooCommerce, PrestaShop oder Shoptet behebt.
• Sieben Sprachen. Ergebnisse und Berichte auf Deutsch, Englisch, Ukrainisch, Polnisch, Tschechisch, Rumänisch und Russisch.
• Zuordnung zur EN 301 549. Jede Regel verweist auf ihr WCAG-Kriterium und ihren Abschnitt in der EN 301 549 V3.2.1 und V4.1.1, der europäischen Norm hinter dem European Accessibility Act und dem BFSG.
• White-Label für Agenturen. Berichte unter der Marke der Agentur, siehe Pandus für Agenturen.
• Kostenlose Werkzeuge. Der WCAG-Check für eine Seite, der Kontrastrechner, die Browser-Erweiterung für Seiten hinter einem Login und das WordPress-Plugin.

Wenn Sie als Entwickler eine einzelne Komponente debuggen, ist eine DevTools-Erweiterung schneller. Wenn Sie jede Woche wissen müssen, ob der Shop eines Kunden schlechter geworden ist, und das jemandem erklären müssen, der nicht entwickelt, dafür ist Pandus gebaut.

So kombinieren Sie die Tools

1. Während der Entwicklung: eine Erweiterung oder ein Linter auf Basis von axe, dazu eine zweite Engine (WAVE oder IBM) für unklare Fälle.
2. In CI: Pa11y CI, das npm-Paket von IBM oder axe-core in Ihren End-to-End-Tests.
3. Nach dem Livegang: wöchentliches Monitoring der ganzen Website und Berichte für die Inhaber.
4. Immer: manuelle Tests mit Tastatur, Zoom und Screenreader – siehe Barrierefreiheit testen. Für eine Konformitätsaussage beauftragen Sie ein Audit.

Häufige Fragen

Welcher WCAG-Checker ist der beste?

Das hängt von der Aufgabe ab. Browser-Erweiterungen wie WAVE, axe DevTools, Accessibility Insights oder IBM Equal Access eignen sich für Entwickler, die eine Seite prüfen; Lighthouse liefert einen schnellen Score; Pa11y und das npm-Paket von IBM passen in CI-Pipelines; Monitoring-Dienste wie Pandus prüfen ganze Websites jede Woche und berichten an die Inhaber.

Welche Tools für den Barrierefreiheitstest sind kostenlos?

WAVE online und seine Erweiterungen, Lighthouse, die kostenlose Erweiterung axe DevTools, axe-core, Accessibility Insights, der IBM Equal Access Accessibility Checker und Pa11y lassen sich ohne Bezahlung nutzen. BrowserStack hat einen kostenlosen Tarif mit Grenzen; Pandus prüft eine Seite kostenlos.

Liefern WAVE, Lighthouse und axe DevTools dieselben Ergebnisse?

Nicht ganz. Lighthouse, axe DevTools und Accessibility Insights nutzen die Engine axe-core, ihre automatischen Ergebnisse überschneiden sich also; WAVE, IBM Equal Access und Pa11y nutzen standardmäßig eigene Regeln. Zwei Engines finden oft ein paar Probleme mehr.

Kann ein Tool bestätigen, dass eine Website die WCAG erfüllt?

Nein. Jedes automatische Tool prüft nur einen Teil der WCAG-Erfolgskriterien. Ein sauberes Ergebnis ist ein gutes Zeichen, keine Bestätigung; Tests mit Tastatur, Zoom und Screenreader durch einen Menschen bleiben nötig.

Wo steht Pandus in diesem Vergleich?

Pandus führt axe-core jede Woche auf jeder Seite einer Website aus, ordnet die Funde WCAG und EN 301 549 zu und macht daraus Berichte für Inhaber in sieben Sprachen, mit White-Label für Agenturen. Es ist eine automatische Prüfung, kein vollständiges Audit.

Quellen

• WebAIM, WAVE: https://wave.webaim.org/ und https://wave.webaim.org/extension/
• Chrome for Developers, Lighthouse Overview: https://developer.chrome.com/docs/lighthouse/overview
• Chrome for Developers, Lighthouse Accessibility Scoring: https://developer.chrome.com/docs/lighthouse/accessibility/scoring
• Deque, axe DevTools: https://www.deque.com/axe/devtools/
• Microsoft, Accessibility Insights: https://accessibilityinsights.io/ und https://github.com/microsoft/accessibility-insights-web
• IBM, Equal Access Toolkit: https://github.com/IBMa/equal-access
• Pa11y: https://pa11y.org/ und https://github.com/pa11y/pa11y
• BrowserStack, Accessibility Testing: https://www.browserstack.com/accessibility-testing und https://www.browserstack.com/accessibility-testing/free-accessibility-testing-tools