Was macht Barrierefreiheits-Audit?
Übersicht
Prüfen, ob jeder die Benutzeroberfläche wahrnehmen, bedienen und verstehen kann: nur mit der Tastatur, mit einem Screenreader, mit Vergrößerung und bei eingeschränkter Sehfähigkeit. Beheben Sie Mängel in den Komponenten, die sie verursachen, damit die Korrektur überall dort greift, wo sie verwendet werden.
Methode
- Automatisierter Scan, falls eine URL verfügbar ist:
npx @axe-core/cli <url>oder Lighthouse-Barrierefreiheit. Automatisierte Tools finden etwa ein Drittel der Probleme; behandeln Sie die Ergebnisse als Ausgangspunkt. - Code-Review der Komponenten anhand der untenstehenden Checkliste: Formulare, Schaltflächen, Links, Bilder, Modals, Menüs, Tabs, Tabellen, benutzerdefinierte Widgets.
- Tastaturtest: Mit der Tabulatortaste durch jedes interaktive Element navigieren. Sichtbarer Fokus, logische Reihenfolge, nichts ist unerreichbar, keine Fokusfallen, Escape schließt Overlays, der Fokus kehrt zum Auslöser zurück.
- Screenreader-Semantik: Jedes Steuerelement hat eine Rolle, einen zugänglichen Namen und seinen Zustand (erweitert, ausgewählt, aktiviert, ungültig).
- Bericht mit dem untenstehenden Vertrag, zugeordnet zu WCAG 2.2 AA.
Checkliste
| Bereich | Anforderung (WCAG) |
|---|---|
| Bilder | Informative Bilder haben einen aussagekräftigen alt-Text; dekorative Bilder erhalten alt="" (1.1.1) |
| Kontrast | Text 4,5:1, großer Text und UI-Komponenten 3:1 (1.4.3, 1.4.11) |
| Farbe | Informationen werden nicht allein durch Farbe vermittelt (1.4.1) |
| Struktur | Eine h1, geordnete Überschriften, Landmarken (header, nav, main, footer), Listen als Listen (1.3.1) |
| Formulare | Jedes Eingabefeld hat ein <label>; Fehler werden im Text benannt und mit aria-describedby verknüpft; Pflichtfelder sind gekennzeichnet (1.3.1, 3.3.1, 3.3.2) |
| Steuerelemente | Aktionen sind <button>, Navigation ist <a href>; kein klickbares div ohne Rolle, Tabindex und Tastaturhandler (2.1.1, 4.1.2) |
| Fokus | Sichtbarer Fokusindikator; niemals outline: none ohne Ersatz (2.4.7) |
| Modals und Menüs | Fokus wird hinein bewegt, bleibt geöffnet gefangen, Escape schließt, Fokus kehrt zurück (2.1.2, 2.4.3) |
| Namen | Nur-Symbol-Schaltflächen haben ein aria-label; Linktext ist aus dem Kontext verständlich (2.4.4, 4.1.2) |
| Bewegung | prefers-reduced-motion respektieren; keine automatisch abspielende Bewegung länger als 5 s ohne Pause (2.2.2, 2.3.3) |
| Zoom und Refow | Bei 200 % Zoom und 320 px Breite ohne horizontales Scrollen nutzbar (1.4.4, 1.4.10) |
| Ziele | Touch-Ziele mindestens 24 × 24 px (2.5.8) |
| Sprache | <html lang> gesetzt (3.1.1) |
ARIA-Regel: Natürliche HTML-Elemente bevorzugen. Fügen Sie ARIA nur hinzu, wenn kein natives Element passt, und implementieren Sie dann das vollständige Tastaturverhalten dieses Musters.
Ausgabe-Vertrag
### [Critical | Serious | Moderate | Minor] Titel — WCAG <Kriterium>
- Wo: Komponente und Datei:Zeile (und ggf. URL)
- Wer betroffen ist: Tastaturnutzer, Screenreadernutzer, Sehbehinderte usw.
- Lösung: Korrigiertes Markup oder CSS
Critical = blockiert eine Aufgabe für einige Benutzer (z. B. kann ein Formular nicht per Tastatur abgesendet werden). Enden Sie mit Bestandene Prüfungen und Manuell zu testen (Punkte, die eine echte Screenreader-Sitzung erfordern).
Häufige Fehler
divoderspanmitonClickanstelle einesbutton.- Platzhaltertext als einziges Label verwendet.
aria-label, das dem sichtbaren Text widerspricht.role="button"ohne Behandlung der Eingabetaste und Leertaste hinzugefügt.- WCAG-Konformität allein aufgrund eines automatisierten Scans behauptet.
Erstellt von Wageesha Tripathi · LinkedIn · E-Mail · Weitere Skills