Automatisierte Accessibility-Tests direkt in der Pipeline.
axe-core ist die führende Open-Source-Engine für automatisierte Barrierefreiheitstests und lässt sich direkt in unsere Entwicklungs-Pipeline einbinden. Sie analysiert das gerenderte DOM gegen die WCAG-Regeln und ist bewusst so gebaut, dass sie keine Fehlalarme produziert. Damit fängt sie einen großen Teil typischer Probleme schon früh und automatisch ab, von fehlenden Alternativtexten bis zu unzureichenden Kontrasten. Den Rest übernehmen unsere manuellen Prüfungen, denn Automatik erreicht erfahrungsgemäß nur einen Teil aller Kriterien.
Mehr in der DokumentationWir hängen axe-core in CI und in unsere Komponententests, damit jeder Pull Request automatisch gegen die Regeln läuft. So rutscht eine kaputte Beschriftung oder ein zu schwacher Kontrast nicht erst in Produktion, sondern fällt sofort im Build auf. Das hält Barrierefreiheit als Dauerzustand stabil, statt sie einmalig herzustellen und langsam wieder zu verlieren.
import { render } from "@testing-library/react";
import { axe, toHaveNoViolations } from "jest-axe";
expect.extend(toHaveNoViolations);
test("button has no a11y violations", async () => {
const { container } = render(<button type="button">Senden</button>);
expect(await axe(container)).toHaveNoViolations();
});Gut zu wissen
axe findet nur, was sich maschinell beweisen lässt, also etwa rund ein Drittel der WCAG-Kriterien. Ein grüner axe-Lauf heißt deshalb nie barrierefrei, sondern nur keine offensichtlichen Maschinenfehler. Tastatur und Screenreader prüfen wir trotzdem von Hand.
Weitere Werkzeuge, mit denen wir im selben Bereich arbeiten.
Das musst du nicht entscheiden, das ist unser Job. Erzähl uns einfach von deinem Vorhaben.