WCAG ausprobieren: 10 interaktive Demos
Regeln versteht man am besten, wenn man die Barriere selbst erlebt. Du kannst die Demos mit Tastatur, Maus, Touch und Screenreader bedienen. Nur die gezeigten Barrieren funktionieren absichtlich nicht für alle.
Kontrast-Rechner
Wähle Text- und Hintergrundfarbe. Der Rechner zeigt das Kontrastverhältnis und welche WCAG-Stufen es erfüllt.
Beispieltext in normaler Größe. Großer Text.
Fehler: Bitte gib gültige Hex-Farben ein, zum Beispiel #15152b.
17,43:1
- AA, normaler Text (4,5:1):
- AA, großer Text (3:1):
- AAA, normaler Text (7:1):
- AAA, großer Text (4,5:1):
- Bedienelemente und Grafiken (3:1):
Passende Regeln: 1.4.3 Kontrast (Minimum), 1.4.6 Kontrast (erhöht), 1.4.11 Nicht-Text-Kontrast
Screenreader-Simulation: Bilder
Ein Screenreader kann ein Bild nicht sehen. Er liest vor, was im Code steht. Wähle eine Variante und lies, was blinde Menschen hören.
Der Screenreader sagt:
Passende Regeln: 1.1.1 Nicht-Text-Inhalt, 1.3.1 Info und Beziehungen, 4.1.2 Name, Rolle, Wert
Tastatur-Test
Lege die Maus weg. Drücke Tab, um zum nächsten Element zu springen, und Enter zum Auslösen. Einen der beiden Knöpfe erreichst du so nicht.
Barriere: <div onclick>
Gut: <button>
Noch kein Knopf gedrückt.
Passende Regeln: 2.1.1 Tastatur, 2.1.2 Keine Tastaturfalle, 2.4.1 Blöcke umgehen, 2.4.3 Fokus-Reihenfolge
Sichtbarer Fokus
Gehe mit Tab durch die drei Knöpfe. Schalte dann den Fokusrahmen aus und versuche es noch einmal: Wo bist du gerade? Der Rahmen fehlt nur in diesem Kasten. Mit Tab kommst du immer wieder heraus.
Passende Regeln: 2.4.7 Fokus sichtbar, 2.4.11 Fokus nicht verdeckt (Minimum), 2.4.13 Fokus-Erscheinungsbild
Formulare und Fehlermeldungen
Sende das Formular mit einem Fehler ab, zum Beispiel ohne @-Zeichen. Eine gute Fehlermeldung sagt, was falsch ist und wie es richtig geht.
Passende Regeln: 3.3.1 Fehlererkennung, 3.3.2 Beschriftungen oder Anweisungen, 3.3.3 Fehlerempfehlung, 1.3.5 Eingabezweck bestimmen
Zielgröße
Stelle die Größe der Knöpfe ein und versuche, den mittleren zu treffen – am besten auf dem Handy oder mit der schwächeren Hand.
Passende Regeln: 2.5.8 Zielgröße (Minimum), 2.5.5 Zielgröße (erhöht)
Textabstand und Umbruch
Manche Menschen vergrößern Zeilen- und Buchstabenabstände, um besser lesen zu können. Schalte die Abstände ein und vergleiche die beiden Kästen.
Barriere: feste Höhe
Dieser Kasten hat eine feste Höhe. Wird der Text größer, wird er unten einfach abgeschnitten und ist nicht mehr lesbar.
Gut: wächst mit
Dieser Kasten wächst mit seinem Inhalt. Wird der Text größer, wird der Kasten höher. Nichts geht verloren.
Passende Regeln: 1.4.12 Textabstand, 1.4.10 Umbruch (Reflow)
Seh-Simulation: Farbe allein reicht nicht
Wähle eine Seheinschränkung. Welche Bestellung ist fehlgeschlagen? In der ersten Liste verrät das nur die Farbe.
Barriere: nur Farbe
Hinweis für Screenreader: In dieser Liste ist der Status absichtlich nur durch Farbe dargestellt.
- Bestellung 1001
- Bestellung 1002
- Bestellung 1003
Gut: Farbe, Symbol und Text
- Bestellung 1001: geliefert
- Bestellung 1002: fehlgeschlagen
- Bestellung 1003: geliefert
Passende Regeln: 1.4.1 Benutzung von Farbe
Bewegung anhalten
Bewegung lenkt ab und kann Schwindel auslösen. Deshalb startet hier nichts von selbst – und alles lässt sich anhalten.
Dein Gerät ist auf „weniger Bewegung“ eingestellt. Deshalb pulsiert der Kreis hier nur sanft, statt sich zu bewegen.
Passende Regeln: 2.2.2 Pausieren, Stoppen, Ausblenden, 2.3.3 Animation durch Interaktionen
Statusmeldungen
Sehende bemerken eine kleine Meldung am Bildschirmrand. Ein Screenreader sagt sie nur an, wenn sie im Code als Statusmeldung markiert ist.
Der Screenreader sagt:
Passende Regeln: 4.1.3 Statusmeldungen