Checkliste – Barrierefreiheit für Websites

Diese praktische Todo-Liste hilft Website-Teams, die wichtigsten Anforderungen der Barrierefreiheit systematisch zu prüfen. Die Punkte sind strukturiert nach den vier WCAG-Prinzipien: wahrnehmbar, bedienbar, verständlich und robust.

Prinzip 1: Wahrnehmbar (Perceivable)

Textalternativen

Alle informativen Bilder haben einen beschreibenden Alt-Text (WCAG 1.1.1) → Bilder & Alt-Texte
Dekorative Bilder haben ein leeres alt="" oder sind per CSS eingebunden (WCAG 1.1.1)
Icon-Buttons haben einen zugänglichen Namen (z.B. aria-label oder visuell versteckter Text) (WCAG 1.1.1)

Zeitbasierte Medien

Videos haben Untertitel (WCAG 1.2.2) → Video & Audio
Voraufgezeichnete Audio-Inhalte haben ein Transkript (WCAG 1.2.1)
Videos haben eine Audiodeskription oder eine Textalternative (WCAG 1.2.3/1.2.5)

Struktur & Semantik

Überschriften bilden eine logische Hierarchie (h1–h6) ohne Sprünge (WCAG 1.3.1) → Semantisches HTML
Listen verwenden <ul>, <ol> oder <dl> (WCAG 1.3.1)
Tabellen haben <th>, scope und <caption> (WCAG 1.3.1)
Formulare haben programmatisch verknüpfte Labels (WCAG 1.3.1) → Formulare
Felder für persönliche Daten verwenden passende autocomplete-Attribute (WCAG 1.3.5)
Inhalte sind nicht auf eine Bildschirmorientierung beschränkt (WCAG 1.3.4)

Farben & Kontraste

Text hat ein Kontrastverhältnis von mindestens 4.5:1 (normal) bzw. 3:1 (gross) (WCAG 1.4.3) → Farben & Kontraste
Farbe wird nicht als einziges Unterscheidungsmerkmal verwendet (WCAG 1.4.1)
UI-Komponenten und Grafiken haben einen Kontrast von mindestens 3:1 (WCAG 1.4.11)

Responsive & Zoom

Inhalte sind bei 400% Zoom ohne horizontales Scrollen nutzbar (Reflow auf 320px) (WCAG 1.4.10) → Responsive & Zoom
Text kann bis 200% vergrössert werden ohne Informationsverlust (WCAG 1.4.4)
Textabstände können vom Nutzer angepasst werden ohne Inhaltsverlust (WCAG 1.4.12)
Keine Bilder von Text, ausser wenn unvermeidbar (WCAG 1.4.5)

Prinzip 2: Bedienbar (Operable)

Tastatur

Alle interaktiven Elemente sind per Tastatur erreichbar und bedienbar (WCAG 2.1.1) → Tastaturnavigation
Es gibt keine Tastaturfallen – der Fokus kann immer weiter bewegt werden (WCAG 2.1.2)
Die Fokus-Reihenfolge ist logisch und nachvollziehbar (WCAG 2.4.3)
Fokus-Indikatoren sind deutlich sichtbar (WCAG 2.4.7) → Fokus-Indikatoren
Fokussierte Elemente sind nicht von anderen Inhalten verdeckt (WCAG 2.4.11)

Navigation

Es gibt einen „Skip to Content"-Link (WCAG 2.4.1)
Seitentitel sind beschreibend und einzigartig (WCAG 2.4.2)
Link-Texte sind aussagekräftig – nicht „hier klicken" (WCAG 2.4.4)
Überschriften und Labels sind beschreibend (WCAG 2.4.6)
Es gibt mehrere Wege, eine Seite zu finden (z.B. Navigation, Suche, Sitemap) (WCAG 2.4.5)
Hilfemechanismen sind konsistent platziert (WCAG 3.2.6)

Eingabemodalitäten

Funktionen mit Ziehbewegungen (Drag) bieten eine Alternative (z.B. Klick/Tap) (WCAG 2.5.7) → Komponentenmuster
Interaktive Elemente sind mindestens 24×24 CSS-Pixel gross (WCAG 2.5.8) → Touch-Targets
Zeigegerät-Aktionen können abgebrochen werden (WCAG 2.5.2)

Zeitlimits & Bewegung

Zeitlimits können verlängert oder deaktiviert werden (WCAG 2.2.1)
Automatisch bewegte Inhalte können pausiert/gestoppt werden (WCAG 2.2.2)
Keine blinkenden Inhalte über 3 Blitze pro Sekunde (WCAG 2.3.1)
Animationen können deaktiviert werden (prefers-reduced-motion) (WCAG 2.3.3) → Motion & Animation

Prinzip 3: Verständlich (Understandable)

Sprache

Die Seitensprache ist im <html lang>-Attribut definiert (WCAG 3.1.1) → Sprache & Verständlichkeit
Sprachwechsel innerhalb der Seite sind mit lang markiert (WCAG 3.1.2)

Vorhersehbarkeit

Navigation ist auf allen Seiten konsistent (WCAG 3.2.3)
Gleichartige Funktionen sind konsistent benannt (WCAG 3.2.4)
Kontextänderungen passieren nicht unerwartet bei Fokus oder Eingabe (WCAG 3.2.1/3.2.2)

Formulare & Fehlervermeidung

Fehlermeldungen beschreiben den Fehler in Text und schlagen Korrekturen vor (WCAG 3.3.1/3.3.3) → Formulare
Pflichtfelder sind visuell und programmatisch gekennzeichnet (WCAG 3.3.2)
Bereits eingegebene Daten werden nicht erneut abgefragt (WCAG 3.3.7)
Authentifizierung erfordert keine kognitiven Funktionstests (z.B. Rätsel) (WCAG 3.3.8)

Prinzip 4: Robust (Robust)

Kompatibilität

HTML ist valide und korrekt verschachtelt (WCAG 4.1.1 – in 2.2 entfallen, aber weiterhin Best Practice)
Alle interaktiven Elemente haben einen zugänglichen Namen und eine Rolle (WCAG 4.1.2) → ARIA
Statusmeldungen werden per aria-live oder role="status" angekündigt (WCAG 4.1.3)
Modale Dialoge verwenden aria-modal="true" und Fokus-Trap (WCAG 4.1.2) → Komponentenmuster

Weiterführende Ressourcen