axe-core: Barrierefreiheit testen und Ergebnisse verstehen

Befunde und manuelle Prüfung

axe-core ist die Open-Source-Regel-Engine, die AllyProof neben HTML_CodeSniffer und separaten APCA-Hinweisen verwendet. Deque strebt die Vermeidung falsch positiver Befunde an, weist aber auf mögliche Softwarefehler hin. Diese Entwicklungsrichtlinie garantiert nicht die Richtigkeit jedes Ergebnisses der kombinierten AllyProof-Prüfung.

Prüfen Sie das betroffene Element, die Regelhinweise und den Seitenzustand. Ein Scan umfasst die ausgeführten Seiten, Zustände und Regeln. Eine bestandene Regelprüfung belegt nicht die Konformität eines gesamten Erfolgskriteriums oder einer Website.

AllyProof kombiniert die WCAG-Versionstags einschließlich früherer Versionen. Best-Practice-Ergebnisse und Hinweise bleiben von bewerteten Befunden unterscheidbar. Planen Sie manuelle Bewertungen parallel zu automatisierten Scans.

Eine Prüfung mit Playwright ausführen

Installieren Sie in einem Projekt mit eingerichtetem Playwright Test @axe-core/playwright als Entwicklungsabhängigkeit. Speichern Sie das Beispiel als tests/accessibility.spec.ts, starten Sie Ihre lokale Website auf Port 3000 und führen Sie npx playwright test tests/accessibility.spec.ts aus.

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("homepage accessibility checks", async ({ page }) => {
  await page.goto("http://127.0.0.1:3000");
  const result = await new AxeBuilder({ page })
    .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"])
    .analyze();
  await test.info().attach("axe-results", {
    body: JSON.stringify(result, null, 2),
    contentType: "application/json",
  });
  expect(result.violations).toEqual([]);
});

Die Prüfung erfasst die gerenderte Seite im aktuellen Zustand. Öffnen Sie ein Menü oder einen Dialog vor analyze(), wenn Sie diesen Zustand prüfen möchten. Prüfen Sie weitere Seiten und wichtige Nutzungsabläufe separat. Die angehängte JSON-Datei hält unvollständige Prüfungen für die manuelle Prüfung fest, auch wenn die Assertion erfolgreich ist.

Vom Befund zur überprüften Korrektur

Nutzen Sie bei jedem Befund die Regel-ID und die betroffenen Elemente, um die Komponente zu finden. Prüfen Sie den Korrekturvorschlag an der tatsächlichen Oberfläche, ändern Sie den Quellcode und testen Sie dieselbe Seite im selben Zustand erneut. Ein Formularfeld ohne Beschriftung benötigt beispielsweise einen geeigneten zugänglichen Namen; ein leeres aria-label behebt das Problem nicht.

Unser WordPress-Beispiel zur Korrektur und Nachprüfung und das Webflow-Beispiel zeigen den Weg vom Befund zurück zum Editor. Ergänzen Sie dies durch Tastaturtests und weitere manuelle Prüfungen.

Wann AllyProof axe-core ergänzt

Nutzen Sie eigene axe-core-Tests für Prüfungen im Entwicklungsablauf. Um eine öffentliche Seite ohne Testcode zu prüfen, starten Sie einen kostenlosen Barrierefreiheitsscan. Die Vorschau verwendet die kombinierte AllyProof-Prüfung; ihre Ergebnisse können deshalb von diesem einfachen axe-core-Beispiel abweichen.

Für Agenturen, die Kundenwebsites betreuen, bietet das Website-Monitoring geplante Scans, einen Problemverlauf und gemeinsame Nachverfolgung. Vergleichen Sie die Tarife, wenn Sie diesen laufenden Ablauf benötigen. Keine der beiden Methoden ersetzt eine vollständige Bewertung der Barrierefreiheit.

Quellen und weiterführende Hinweise

• axe-core README
• W3C: Barrierefreiheit bewerten
• Automatisierte und manuelle Tests
• Playwright: accessibility testing