Automatisiertes Testen mit axe Core

Was ist automatisiertes Testen?

Automatisierte Accessibility-Tests prüfen Webseiten auf technische Verstöße gegen die Web Content Accessibility Guidelines (WCAG). Sie verwenden Programme, die den HTML-Code und das Verhalten von Webseiten analysieren und auf bekannte Muster für Barrieren testen – zum Beispiel fehlende Labels, zu geringe Kontraste oder unzulässige ARIA-Attribute.

Wann macht automatisiertes Testen Sinn?

• Bei großen Webseiten, um wiederkehrende Muster systematisch zu prüfen
• In Design-Systemen oder Komponentenbibliotheken, um Standards sicherzustellen
• In CI/CD-Pipelines, um Barrieren frühzeitig zu erkennen und dauerhaft zu vermeiden
• Als schneller Einstieg, bevor ein manuelles oder nutzerbasiertes Audit erfolgt

Was kann automatisiertes Testen?

• Fehlende oder falsche alt-Attribute erkennen
• Farbkontrast-Fehler zwischen Text und Hintergrund aufzeigen
• Formulare auf fehlende Labels prüfen
• Fehlerhafte ARIA-Attribute oder Landmark-Strukturen identifizieren
• Strukturelle Probleme wie mehrere <main>-Elemente erkennen

Was kann automatisiertes Testen nicht?

• Die Qualität von Alternativtexten oder Linktexten bewerten
• Die Verständlichkeit von Inhalten oder Fehlermeldungen einschätzen
• Tastaturbedienung, Fokusverhalten und dynamische Zustände umfassend prüfen
• Erfahrungen mit Screenreadern oder Assistive Technologies realistisch simulieren

Vorteile

• Schnell und reproduzierbar – ideal für kontinuierliche Überwachung
• Automatisierbar – Integration in Entwicklungsprozesse möglich
• Erkennt viele technische Verstöße, bevor sie produktiv gehen
• Ergebnisberichte sind messbar und vergleichbar

Nachteile

• Begrenzt auf automatisierbare Kriterien (ca. 20–30 % der WCAG)
• Erfordert Interpretation durch Fachleute
• Keine Bewertung der Benutzererfahrung

Einführung in axe Core

axe Core ist eine Open-Source-JavaScript-Bibliothek des Unternehmens Deque Systems. Sie analysiert Webseiten und Webanwendungen automatisiert auf Barrierefreiheitsprobleme und gibt Ergebnisse im JSON-Format zurück. axe Core ist die Grundlage vieler Tools – darunter die axe DevTools Browser-Erweiterung und Integrationen in Testframeworks wie Jest, Cypress oder Playwright.

Installation (Node.js)

1. Node.js (ab Version 18) installieren
2. Neues Projekt anlegen:

   mkdir axe-demo && cd axe-demo
   npm init -y
   npm install axe-core puppeteer

3. Neue Datei run-axe.js anlegen und Beispielcode einfügen:

import axe from 'axe-core';
import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });
  await page.addScriptTag({ content: axe.source });

  const results = await page.evaluate(async () => {
    return await window.axe.run(document, {
      runOnly: ['wcag2a', 'wcag2aa']
    });
  });

  console.log(JSON.stringify(results, null, 2));
  await browser.close();
})();

Dieser Code öffnet eine Seite im Headless-Chromium-Browser, injiziert axe Core und führt einen automatisierten WCAG-Test aus. Das Ergebnis enthält Listen von violations, passes und incomplete Checks.

Auswertung der Ergebnisse

Die JSON-Ausgabe von axe Core kann direkt in der Konsole oder mit Visualisierungstools weiterverarbeitet werden. Typischerweise enthält sie folgende Schlüssel:

• violations: Bestätigte Verstöße gegen WCAG-Regeln
• incomplete: Fälle, bei denen eine manuelle Prüfung notwendig ist
• passes: Bestandene Prüfungen

Jeder Verstoß enthält Details zur Regel-ID, eine Beschreibung, betroffene HTML-Knoten und den Schweregrad (impact). Entwickler:innen können diese Informationen nutzen, um gezielt Verbesserungen im Code umzusetzen.

Integration in den Entwicklungsprozess

• Continuous Integration (CI): axe Core kann in GitHub Actions, GitLab CI oder Jenkins integriert werden, um Accessibility bei jedem Commit zu prüfen.
• Unit-Tests: Über Tools wie jest-axe lassen sich Accessibility-Tests direkt in Komponententests einbauen.
• UI-Tests: Mit cypress-axe oder playwright-axe lassen sich komplette Userflows prüfen.

Fazit

Automatisiertes Testen mit axe Core ist ein zentraler Bestandteil moderner Barrierefreiheitsprüfungen. Es spart Zeit, erkennt häufige technische Probleme frühzeitig und lässt sich gut in Entwicklungsprozesse integrieren. Trotzdem bleibt es ein Werkzeug zur Unterstützung – keine vollständige Lösung. Ein kompletter Accessibility-Workflow kombiniert automatisierte Tests mit manuellen Prüfungen und Nutzertests.