WCAG 2.0, 2.1, 2.2 - Umfassendes Barrierefreiheits-Demo

Die Evolution der WCAG-Standards

2.0

WCAG 2.0

Dezember 2008

Die Grundlage moderner Webzugänglichkeit

61 Erfolgskriterien
4 Grundprinzipien
3 Konformitätsstufen

2.1

WCAG 2.1

Juni 2018

Mobile First & Kognitive Zugänglichkeit

+17 neue Kriterien
Mobile Optimierung
Kognitive Unterstützung

2.2

WCAG 2.2

Oktober 2023

Verfeinerung & Benutzerfokus

+9 neue Kriterien
Verbesserter Fokus
Sichere Authentifizierung

WCAG 2.0

Grundlagen der Barrierefreiheit

Die vier Grundprinzipien: Wahrnehmbar, Bedienbar, Verständlich, Robust

Prinzip 1: Wahrnehmbar

1.1.1 Nicht-Text-Inhalt (A)

Alle Nicht-Text-Inhalte benötigen Textalternativen

Korrekt

Grüner Kreis mit weißem Häkchen symbolisiert erfolgreiche Aktion

<img src="success.png" alt="Grüner Kreis mit weißem Häkchen symbolisiert erfolgreiche Aktion">

Fehlerhaft

<img src="error.png"> <!-- Fehlt: alt-Attribut -->

Verschiedene Alt-Text-Szenarien:

Informative Bilder: Beschreibender Alt-Text

Dekorative Bilder: alt=""

Komplexe Grafiken: Alt-Text + ausführliche Beschreibung

Bilder mit Text: Text im Alt-Attribut wiedergeben

1.3.1 Info und Beziehungen (A)

Strukturelle Beziehungen müssen programmatisch erkennbar sein

Korrekt

Fehlerhaft

Name:

Label nicht verknüpft!

1.4.1 Nutzung von Farbe (A)

Farbe darf nicht das einzige Unterscheidungsmerkmal sein

Fehlerhaft

Pflichtfelder sind rot markiert:

Korrekt

Pflichtfelder sind mit * gekennzeichnet:

1.4.3 Kontrast (Minimum) (AA)

Text muss ausreichenden Kontrast zum Hintergrund haben

21:1 Perfekt

Weißer Text auf Schwarz

4.5:1 Minimum AA

Gerade ausreichend

2.4:1 Unzureichend

Zu wenig Kontrast

1.4:1 Sehr schlecht

Kaum lesbar

Anforderungen:

Normaler Text: 4.5:1 (AA), 7:1 (AAA)
Großer Text (18pt+): 3:1 (AA), 4.5:1 (AAA)

Prinzip 2: Bedienbar

2.1.1 Tastatur (A)

Alle Funktionen müssen per Tastatur erreichbar sein

Korrekt

Link als Button

Checkbox mit Label

Fehlerhaft

DIV als Button (nicht fokussierbar)

Verwenden Sie semantische HTML-Elemente!

Tab-Reihenfolge testen:

2.1.2 Keine Tastaturfalle (A)

Fokus darf nicht in einem Element gefangen sein

Modal mit Escape

Häufige Fallen:

Modale ohne Escape-Funktion
Embedded Videos/iFrames
Custom Dropdown-Menüs
Infinite Scroll ohne Skip-Link

2.2.1 Zeitbegrenzungen anpassbar (A)

Nutzer müssen Zeitlimits anpassen können

Session-Timeout mit Warnung

Ihre Sitzung läuft in 5:00 Minuten ab.

Ausnahmen:

Echtzeit-Events (Auktionen)
Essentielle Zeitlimits (Prüfungen)
Zeitlimit > 20 Stunden

2.2.2 Pausieren, Stoppen, Ausblenden (A)

Bewegte Inhalte müssen kontrollierbar sein

Bewegter Inhalt

Regel: Animationen > 5 Sekunden benötigen Kontrollen

2.4.1 Blöcke umgehen (A)

Mechanismen zum Überspringen wiederkehrender Inhalte

Skip Links

Zum Hauptinhalt springen

Navigation mit vielen Links...

Hauptinhalt beginnt hier

Weitere Techniken:

Überschriftenhierarchie (h1-h6)
ARIA Landmarks
Sitemap

2.4.3 Fokus-Reihenfolge (A)

Tab-Reihenfolge muss logisch und intuitiv sein

Natürliche Reihenfolge

Vermeiden: positive tabindex-Werte!

Prinzip 3: Verständlich

3.1.1 Sprache der Seite (A)

Die Hauptsprache muss programmatisch erkennbar sein

Korrekt

<html lang="de">
  <head>
    <title>Deutsche Webseite</title>
  </head>
  <body>
    <p>Deutscher Text...</p>
    <p lang="en">English text...</p>
  </body>
</html>

Screenreader nutzen das lang-Attribut für die korrekte Aussprache

3.2.1 Bei Fokus (A)

Fokus darf keine unerwarteten Kontextänderungen auslösen

Fehlerhaft

Ändert Kontext ohne Nutzeraktion

Korrekt

3.3.1 Fehlererkennung (A)

Fehler müssen erkannt und beschrieben werden

Korrekt

3.3.2 Beschriftungen oder Anleitungen (A)

Eingabefelder benötigen klare Beschriftungen

Korrekt

Telefonnummer (Format: +49 123 456789)

Wir rufen Sie nur im Notfall an

Bevorzugte Kontaktzeit *

Vormittags (9-12 Uhr)

Nachmittags (12-17 Uhr)

* Pflichtfelder

Prinzip 4: Robust

4.1.1 Syntaxanalyse (A)

HTML muss valide sein

Fehlerhaft

<div>
  <p>Nicht geschlossenes Tag
  <span id="test" id="test2">Doppelte IDs</span>
</div>

Korrekt

<div>
  <p>Korrekt geschlossenes Tag</p>
  <span id="unique-id">Eindeutige ID</span>
</div>

Nutzen Sie den W3C Validator zur Überprüfung

4.1.2 Name, Rolle, Wert (A)

UI-Komponenten müssen für Hilfstechnologien erkennbar sein

ARIA richtig eingesetzt

Custom Checkbox

75%

WCAG 2.1

Mobile, Touch & Kognitive Barrierefreiheit

17 neue Erfolgskriterien für moderne Anforderungen

Mobile Barrierefreiheit

1.3.4 Ausrichtung (AA)

Inhalte dürfen nicht auf eine Bildschirmausrichtung beschränkt sein

Hochformat OK

Querformat OK

Vermeiden: "Bitte drehen Sie Ihr Gerät"

2.5.1 Zeigergesten (A)

Alle Funktionen müssen mit einfachen Zeigern bedienbar sein

Nur Gesten

Pinch-to-Zoom nur mit Geste

Alternative Bedienung

+ Pinch-Geste möglich

2.5.2 Zeigerabbruch (A)

Aktionen bei Loslassen, nicht beim Drücken

Korrekt

Erlaubt Abbruch durch Wegziehen

Wichtig für Nutzer mit motorischen Einschränkungen

2.5.5 Zielgröße (AAA)

Touch-Ziele sollten mindestens 44×44 CSS-Pixel groß sein

iOS/Android empfehlen 44×44px minimum

Kognitive Barrierefreiheit

1.3.5 Eingabezweck identifizieren (AA)

Formularfelder sollten ihren Zweck programmatisch angeben

Mit Autocomplete

Browser können Felder automatisch ausfüllen

2.2.6 Timeouts (AAA)

Nutzer vor Datenverlust durch Inaktivität warnen

Warnung vorab

Inaktivitätswarnung

Nach 20 Minuten Inaktivität werden Ihre Daten automatisch gespeichert.

Sie können Ihre Arbeit jederzeit fortsetzen.

Best Practices:

Daten automatisch speichern
Warnung mindestens 20 Sekunden vorher
Möglichkeit zur Verlängerung

1.4.13 Eingeblendeter Inhalt (AA)

Hover/Focus-Inhalte müssen persistent und schließbar sein

Kontrollierbarer Tooltip

Anforderungen:

Schließbar: ESC-Taste
Schwebbar: Maus kann drüber bewegt werden
Persistent: Bleibt bis explizit geschlossen

2.1.4 Tastenkürzel (A)

Einzeltasten-Shortcuts können problematisch sein

Problematisch

J = Nächster Artikel

K = Vorheriger Artikel

? = Hilfe

Besser

Strg + J

Strg + K

F1

Konflikte mit Sprachsteuerung vermeiden

WCAG 2.2

Fokus auf Benutzerfreundlichkeit

9 neue Kriterien für bessere Nutzererfahrung

Fokus-Verbesserungen

2.4.11 Fokus nicht verdeckt (Minimum) (AA)

Fokussierte Elemente dürfen nicht vollständig verdeckt sein

Problem: Sticky Header

Scrollen Sie und fokussieren Sie die Links:

Link 1 - wird verdeckt Link 2 - wird verdeckt Link 3 Link 4 Link 5 Link 6

Lösung: Scroll-Padding

html {
  scroll-padding-top: 80px; /* Höhe des Headers */
}

2.4.13 Fokusdarstellung (AAA)

Fokusindikatoren müssen gut sichtbar sein

Browser-Default

4px solid

Hoher Kontrast

AAA-Anforderungen:

Mindestens 2 CSS-Pixel dick
Kontrastverhältnis 3:1 zum Hintergrund
Vollständig um das Element herum

Barrierefreie Authentifizierung

3.3.8 Barrierefreie Authentifizierung (Minimum) (AA)

Keine kognitiven Funktionstests zur Authentifizierung

Problematisch

Lösen Sie: 17 + 23 = ?

Geben Sie den Text ein:

                                                    K9mP2x
                                                

Welches Tier ist auf dem Bild?

Barrierefreie Alternativen

E-Mail-Link: Einmal-Link per E-Mail SMS-Code: Kopieren möglich Passkey: Biometrische Authentifizierung OAuth: Mit Google/Microsoft anmelden Passwort-Manager: Autocomplete aktiviert

Hilfe und Unterstützung

3.2.6 Konsistente Hilfe (A)

Hilfemechanismen an gleicher Stelle auf allen Seiten

Konsistente Platzierung

Seite 1

Seite 2

Beispiele für konsistente Hilfe:

Chat-Widget immer unten rechts
Hilfe-Link immer im Header
Support-Telefon immer im Footer

3.3.9 Redundante Eingabe (A)

Bereits eingegebene Informationen nicht erneut abfragen

Daten übernehmen

Schritt 1: Rechnungsadresse

Schritt 2: Lieferadresse

Lieferadresse = Rechnungsadresse

Adresse wurde übernommen

Test-Tools & Ressourcen

Automatische Tests

WAVE

WebAIM's Evaluation Tool

✓ 2.0 ✓ 2.1 ✓ 2.2

axe DevTools

Browser Extension

✓ 2.0 ✓ 2.1 ✓ 2.2

Lighthouse

Chrome DevTools

✓ 2.0 ✓ 2.1

Pa11y

Command Line Tool

✓ 2.0 ✓ 2.1 ✓ 2.2

Manuelle Tests

Screenreader

NVDA (Windows, kostenlos)
JAWS (Windows, kommerziell)
VoiceOver (macOS/iOS)
TalkBack (Android)

Browser-Tests

Nur Tastatur (Tab, Enter, Pfeile)
200% Zoom
Hochkontrast-Modus
Browser-Leseansicht

Mobile Tests

Touch-Zielgrößen prüfen
Pinch-to-Zoom testen
Orientierung wechseln
Einhand-Bedienung

Spezial-Tools

Kontrast-Checker

Überschriften-Tools

HeadingsMap Extension
Web Developer Toolbar

ARIA-Inspektor

Chrome Accessibility Tree
Firefox Accessibility Inspector

PDF-Prüfung

PAC 3 (PDF Accessibility Checker)
Adobe Acrobat Pro

Interaktive Test-Zone

Tastaturnavigation testen

Navigieren Sie nur mit der Tastatur:

Drücken Sie Tab zum Navigieren
Shift + Tab für rückwärts
Enter oder Space zum Aktivieren

Link Checkbox

Screenreader-Simulation

ARIA Live-Regionen Demo:

Nachrichten erscheinen hier...

Screenreader lesen automatisch Änderungen in Live-Regionen vor

Farbfehlsichtigkeit simulieren

Rot

Grün

Blau

Protanopie simulieren (Rot-Blindheit)

Verwenden Sie nicht nur Farbe zur Informationsvermittlung

Focus Trap Demo

Testen Sie die Fokus-Falle in einem Modal:

Was passiert:

Fokus geht zum Modal
Tab-Navigation bleibt im Modal
ESC schließt das Modal
Fokus kehrt zum Button zurück