Linting und CI-Gates für Barrierefreiheit

Tests werden ausgeführt, nachdem der Code geschrieben wurde, aber ein Linter weist bereits während der Eingabe auf Probleme hin. Je früher Sie ein Problem erkennen, desto günstiger lässt es sich beheben.

Für React-Projekte prüft das eslint-plugin-jsx-a11y-ESLint-Plugin Ihr JSX direkt im Editor auf häufige Fehler bei der Barrierefreiheit.

jsx-a11y erkennt beispielsweise ein Bild ohne alt-Prop, einen Anker ohne href oder einen Click-Handler an einem nicht interaktiven Element.

Fügen Sie das alt-Prop hinzu, und die Warnung verschwindet. Die Behebung ist winzig, und Sie haben sie gesehen, bevor der Code überhaupt ausgeliefert wurde.

Ein Linter liest den Quellcode, nicht die gerenderte Seite. Er kann weder den Kontrast noch die Fokusreihenfolge messen und ergänzt daher axe-Scans, ersetzt sie aber nicht.

Ein CI-Gate ist eine Prüfung, die bestanden werden muss, bevor Code zusammengeführt werden kann. Wenn Ihr Barrierefreiheitstest fehlschlägt, wird der Pull Request einfach blockiert.

Ohne ein Gate ist ein fehlgeschlagenes Audit nur eine Warnung, die alle ignorieren. Ein Gate macht Barrierefreiheit zu einer Anforderung statt zu einer höflichen Empfehlung.

Ein CI-Workflow installiert die Abhängigkeiten und führt anschließend Ihre Lint- und Testbefehle aus. Ein Exit-Code ungleich null lässt den Job automatisch fehlschlagen.

Wenn der Build fehlschlägt, sieht der Autor im Protokoll die genau fehlschlagende Regel und das betroffene Element. Die Feedbackschleife dauert Minuten statt Wochen.

Ein Gate, das aus den falschen Gründen fehlschlägt, wird deaktiviert. Halten Sie die Tests stabil und begrenzen Sie ihren Umfang, damit das Team einem fehlerhaften Build ein echtes Problem zuordnet.

Die stärkste Konfiguration kombiniert alle drei Ebenen: Linting während des Codierens, axe in den Tests und ein CI-Gate beim Zusammenführen. Jede Ebene erkennt, was die anderen übersehen.

Linten Sie während des Codierens, führen Sie axe in Ihren Tests aus und sichern Sie Zusammenführungen mit einem CI-Gate ab. Zusammen verhindern diese Schutzmechanismen, dass Regressionen bei der Barrierefreiheit jemals ausgeliefert werden. 🚦