Automated Accessibility Testing
Der Testlauf findet, was messbar ist
Namen, Kontrast, ARIA-Werte: fünf Regeln, die zuverlässig anschlagen.
Im echten Zustand
Browserzustände gezielt prüfen
Playwright stellt den Zustand her. axe prüft genau diesen Moment.
analyze() sieht nur den Zustand, der beim Aufruf gerendert ist. Öffnen Sie Menüs, Dialoge und Fehlermeldungen deshalb vor dem Scan. Der Bericht verbindet Regel, DOM-Ziel und geprüften Zustand. Ein vollständiger Test für einen geöffneten Zustand
tests/navigation.a11y.spec.tsimport { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('offene Navigation mit axe prüfen', async ({ page }) => {
await page.goto('/');
await page
.getByRole('button', { name: 'Menü öffnen' })
.click();
await page.locator('#hauptnavigation').waitFor();
const scan = await new AxeBuilder({ page })
.include('#hauptnavigation')
.analyze();
expect(scan.violations).toEqual([]);
});Drei Prüfspuren schließen verschiedene Lücken
Automation liefert messbare Beweise. Das Gesamturteil braucht weiterhin Menschen.
Playwright öffnet festgelegte Zustände. axe stoppt messbare Rückfälle im Code.
Er sieht Inhalte aus dem CMS, Einbettungen und Änderungen außerhalb des Deployments.
Ob Alternativtexte passen, die Fokusreihenfolge sinnvoll ist und ein ganzer Nutzerweg funktioniert.
So prüfen Sie Ihre Testarchitektur
- Zustände inventarisierenListen Sie jede Ansicht auf, die erst nach einer Handlung erscheint.
- Fehler absichtlich setzenEntfernen Sie testweise einen Namen. Der passende Test muss rot werden.
- Befund zurückverfolgenRegel, Selektor und Seitenzustand müssen im Bericht erkennbar sein.
- Handprüfung benennenHalten Sie fest, welche Fragen weiterhin menschliches Urteil brauchen.
Aus dem Prüfbericht
Fünf Regeln, die jeder Lauf prüft
Kritisch Formularfelder ohne Namen Regel label
Der Lauf meldet jedes Feld ohne zugänglichen Namen. Ein label mit for verbindet den sichtbaren Text mit dem Feld.
Kritisch Symbol-Schaltflächen ohne Text Regel button-name
Ein Button mit reinem Icon liefert keinen Namen. aria-label an der Schaltfläche macht die Aktion für Bericht und Vorleseprogramm lesbar.
Kritisch Zu schwache Textkontraste Regel color-contrast
Der Lauf rechnet jedes Farbpaar aus. Unter 4,5:1 bei normalem Text hilft eine hellere oder dunklere Schriftfarbe.
Kritisch ARIA-Werte, die es nicht gibt Regel aria-valid-attr-value
aria-expanded="maybe" besteht keinen Lauf. Erlaubt sind true und false, passend zum tatsächlichen Zustand.
Kritisch Links ohne Linktext Regel link-name
Ein leerer Anker taucht in jedem Bericht auf. Schreiben Sie das Ziel als sichtbaren Text in den Link.
Zum Mitnehmen
Die gemeldeten Befunde, korrigiert
Drei der fünf Regeln, im Code geschlossen.
Korrektur in 3 Schritten ansehen
Feldnamen und Buttonnamen ergänzen
Ein label mit for benennt das Feld, aria-label die Symbolschaltfläche. Beide Regeln bestehen danach im selben Lauf.
KorrekturvergleichSchritt 1 · HTML Vorher
<input id="query" type="search"> <button type="submit"> <span aria-hidden="true">⇄</span> </button>Nachher
<label for="query">Suchbegriff</label> <input id="query" type="search"> <button type="submit" aria-label="Suchen"> <span aria-hidden="true">⇄</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tab-Taste durch das Formular. Jedes Element sagt seinen Namen.
Den ARIA-Zustand richtig setzen
aria-expanded kennt nur true und false. Der geschlossene Bereich startet mit false, die Klickfunktion pflegt den Wert danach weiter.
KorrekturvergleichSchritt 2 · ARIA Vorher
<button aria-controls="notiz" aria-expanded="maybe"> Schichtnotiz öffnen </button>Nachher
<button aria-controls="notiz" aria-expanded="false"> Schichtnotiz öffnen </button>Markierte Zeilen wurden geändert
So prüfen Sie es Klappen Sie den Bereich auf. Das Vorleseprogramm sagt „erweitert“.
Den Textkontrast anheben
Normaler Text braucht mindestens 4,5:1 zum Hintergrund. Auf der vorhandenen Fläche erreicht weiße Schrift 5,31:1.
KorrekturvergleichSchritt 3 · CSS Vorher
.machine-tag { color: #58635f; background: #626e69; }Nachher
.machine-tag { color: #ffffff; background: #626e69; }Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie die Stelle bei geringer Bildschirmhelligkeit an. Der Text hebt sich klar von der Fläche ab.