Beispiele

WCAG Regeln interaktiv verstehen

Barrierefreiheit ist kein abstraktes Konzept. Testen Sie selbst, wie sich Barrieren anfühlen und wie kleine Änderungen den Unterschied machen.

Jetzt ausprobieren

WCAG Regeln interaktiv

Probiere hier einen kleinen Ausschnitt an WCAG-Regeln aus und erlebe dieses interaktiv. Viel Spaß.

Kontrastverhältnis

Teste, wie die Lesbarkeit bei geringem Kontrast abnimmt.

Dieser Text muss gut lesbar sein.

Verhältnis: 4.5:1
Bestanden

WCAG 1.4.3 (AA)

Fokus-Sichtbarkeit

Was passiert, wenn man nicht sieht, wo das aktive Element ist? Nutze dazu die TAB Taste und schalte dann den Tastaturfokus aus.

Tastatur-Fokus an/aus

WCAG 2.4.7 (AA)

Klickflächen

Kleine Buttons sind schwer zu treffen, besonders auf dem Smartphone. 22px Minimum (AA) besser 44px (AAA).

22px
44px

WCAG 2.5.8 (AA)

Status Meldungen

Dynamische Updates müssen für Screenreader-Nutzer hörbar sein. Hier wird der “Sprech-Output” simuliert. Klicke auf “In den Warenkorb”.

aria-live aktiv

Screenreader:

Wartet auf Aktion...

WCAG 4.1.3 (AA)

Alternativtexte

Jeder Nicht-Text-Inhalt, der dem Nutzer präsentiert wird, benötigt eine Textalternative, die denselben Zweck erfüllt.

Team bei der Arbeit an Monitoren

Screenreader-Ausgabe:

"Team bei der Arbeit an Monitoren"

WCAG 1.1.1 (A)

Fehlererkennung

Fehler müssen textlich benannt werden. Nur ein roter Rand reicht für viele Nutzer nicht aus.

Hilfreiche Fehlermeldung

WCAG 3.3.1 (A)

Bewegung pausieren

Starke Bewegung kann Schwindel verursachen. Biete eine Option zum Pausieren an.

WCAG 2.2.2 (A)

Textabstände

Anpassbare Abstände helfen Menschen mit Sehbehinderung oder Legasthenie.

Barrierefreiheit bedeutet auch, dass Texte flexibel bleiben müssen. Texte müssen auch bei größeren Abständen lesbar bleiben.
Abstände optimieren

WCAG 1.4.12 (AA)

Fokus-Reihenfolge

Das WCAG-Erfolgskriterium 2.4.3 „Fokus-Reihenfolge“ (Level A) stellt sicher, dass Nutzer, die mit der Tastatur (oder anderen sequenziellen Eingabegeräten) navigieren, die Inhalte in einer logischen und sinnvollen Abfolge durchlaufen.

Logische Reihenfolge

WCAG 2.4.3 (A)