Checkliste: Barrierefreiheit prüfen | UX & Usability Toolkit

Textkontrast ausreichend (mind. 4.5:1)

Prüfung mit Tools wie Contrast Checker oder Lighthouse

Nicht-Text-Inhalte mit Alternativtext versehen

z. B. <img alt="..."> oder aria-label bei Icons

Struktur durch Überschriften und ARIA-Rollen klar erkennbar

z. B. <h1>-<h6> korrekt verschachtelt

Audio und Video mit Untertiteln bzw. Transkription versehen

Gilt auch für Tutorials, Erklärvideos und Podcasts

Inhalte bei Textvergrößerung (200 %) noch nutzbar

Kein horizontales Scrollen erforderlich

Alle Funktionen per Tastatur bedienbar

Tab-Reihenfolge logisch, Fokus sichtbar

Interaktive Elemente ausreichend groß und fokussierbar

z. B. Buttons, Formulare, Links

Keine Zeitlimits ohne Warnung oder Verlängerung

z. B. bei Formularen oder Sessions

Animationen und Bewegung abschaltbar (wenn vorhanden)

z. B. durch 'prefers-reduced-motion' respektieren

Keine Inhalte oder Funktionen nur mit Maus zugänglich

z. B. Hover-Menüs brauchen Fokusalternative

Sprache der Seite maschinenlesbar angegeben

z. B. <html lang="de">

Navigation und Interaktionsmuster konsistent

z. B. gleiches Verhalten bei Buttons, Menüs, Formularen

Fehlermeldungen verständlich und hilfreich

z. B. konkrete Hinweise bei Formulareingaben

Formulare mit Labeln, Feldhilfen und Statusanzeige versehen

z. B. <label for="...">, aria-describedby

Inhalte in einfacher Sprache zugänglich (optional)

z. B. Zusatzseite mit vereinfachter Erklärung

Semantisch korrektes HTML verwendet

z. B. keine <div> für Buttons oder Überschriften

Kompatibilität mit Screenreadern getestet

z. B. NVDA, VoiceOver, TalkBack

ARIA-Attribute korrekt eingesetzt

z. B. keine Redundanz, keine falsche Rolle

Validität des Codes geprüft (HTML-Validator)

Gibt Hinweise auf strukturelle Fehler

Barrierefreiheit regelmäßig auditiert und dokumentiert

z. B. im Rahmen von Releases oder Pflegezyklen