Folge 3: Bedienbar – alle 34 Regeln

Willkommen bei WCAG einfach erklärt. In dieser Folge geht es um Prinzip 2: Bedienbar. Alles muss sich bedienen lassen – mit Tastatur, Maus, Touch, Sprache oder Hilfsmitteln, und ohne Zeitdruck. Zu diesem Prinzip gehören 34 Regeln. Wir gehen sie der Reihe nach durch.

Richtlinie 2 Punkt 1: Per Tastatur zugänglich. Alles funktioniert auch ganz ohne Maus.

2 Punkt 1 Punkt 1, Tastatur. Stufe A. Alles lässt sich allein mit der Tastatur bedienen. Viele Menschen nutzen keine Maus: wegen einer Lähmung, eines Tremors, Blindheit – oder einfach, weil es schneller ist.

2 Punkt 1 Punkt 2, Keine Tastaturfalle. Stufe A. Der Tastaturfokus bleibt nirgends stecken. Wer mit Tab in einen Bereich hineinkommt, kommt mit der Tastatur auch wieder heraus.

2 Punkt 1 Punkt 3, Tastatur (keine Ausnahme). Stufe Dreifach-A. Wirklich alles funktioniert per Tastatur – ohne die Ausnahmen aus Regel 2.1.1, etwa für Freihandzeichnen.

2 Punkt 1 Punkt 4, Tastaturkürzel mit Zeichentasten. Stufe A. Tastaturkürzel aus nur einem Buchstaben, einer Ziffer oder einem Zeichen lassen sich abschalten, ändern oder sind nur aktiv, solange das Element den Fokus hat. Sonst lösen Spracheingabe oder ein Verrutschen versehentlich Aktionen aus.

Richtlinie 2 Punkt 2: Ausreichend Zeit. Menschen bekommen die Zeit, die sie brauchen.

2 Punkt 2 Punkt 1, Zeiteinteilung anpassbar. Stufe A. Zeitlimits lassen sich abschalten, anpassen oder verlängern. Manche Menschen brauchen zum Lesen und Tippen deutlich länger.

2 Punkt 2 Punkt 2, Pausieren, Stoppen, Ausblenden. Stufe A. Was sich von selbst bewegt, blinkt oder scrollt, länger als 5 Sekunden läuft und neben anderem Inhalt steht, lässt sich pausieren, stoppen oder ausblenden. Dasselbe gilt für Inhalte, die sich automatisch aktualisieren. Bewegung lenkt stark ab.

2 Punkt 2 Punkt 3, Keine Zeiteinteilung. Stufe Dreifach-A. Es gibt überhaupt keine Zeitlimits. Ausnahmen sind echte Live-Ereignisse und Medien, die nun einmal ablaufen.

2 Punkt 2 Punkt 4, Unterbrechungen. Stufe Dreifach-A. Unterbrechungen wie Pop-ups und Benachrichtigungen lassen sich aufschieben oder abschalten. Nur Notfälle dürfen stören.

2 Punkt 2 Punkt 5, Erneute Authentifizierung. Stufe Dreifach-A. Wer nach Ablauf der Sitzung neu anmelden muss, verliert keine Daten und kann dort weitermachen, wo er war.

2 Punkt 2 Punkt 6, Zeitüberschreitungen. Stufe Dreifach-A. Menschen erfahren vorab, nach wie viel Untätigkeit Daten verloren gehen – außer die Daten bleiben länger als 20 Stunden erhalten.

Richtlinie 2 Punkt 3: Anfälle und körperliche Reaktionen. Nichts blitzt oder bewegt sich so, dass es krank machen kann.

2 Punkt 3 Punkt 1, Grenzwert von dreimaligem Blitzen oder weniger. Stufe A. Nichts blitzt mehr als dreimal pro Sekunde – oder das Blitzen ist so klein und schwach, dass es unter den Grenzwerten bleibt. Starkes Blitzen kann epileptische Anfälle auslösen – das kann lebensgefährlich sein.

2 Punkt 3 Punkt 2, Drei Blitze. Stufe Dreifach-A. Es blitzt nie mehr als dreimal pro Sekunde – ganz ohne Ausnahme für kleine oder dunkle Flächen.

2 Punkt 3 Punkt 3, Animation durch Interaktionen. Stufe Dreifach-A. Bewegungseffekte, die durch Scrollen oder Klicken ausgelöst werden, lassen sich abschalten. Parallax und Zoom-Effekte können Schwindel und Übelkeit auslösen.

Richtlinie 2 Punkt 4: Navigierbar. Menschen finden sich zurecht und wissen immer, wo sie sind.

2 Punkt 4 Punkt 1, Blöcke umgehen. Stufe A. Wiederkehrende Bereiche wie die Navigation lassen sich überspringen. Niemand muss auf jeder Seite 30-mal Tab drücken, um zum Inhalt zu kommen.

2 Punkt 4 Punkt 2, Seite mit Titel versehen. Stufe A. Jede Seite hat einen Titel, der Thema oder Zweck beschreibt. Er steht im Browser-Tab und wird vom Screenreader zuerst vorgelesen.

2 Punkt 4 Punkt 3, Fokus-Reihenfolge. Stufe A. Mit der Tab-Taste wandert der Fokus in einer sinnvollen Reihenfolge – in der Regel von oben nach unten und von links nach rechts.

2 Punkt 4 Punkt 4, Linkzweck (im Kontext). Stufe A. Aus dem Linktext – zusammen mit dem Satz oder Absatz drumherum – wird klar, wohin der Link führt.

2 Punkt 4 Punkt 5, Verschiedene Methoden. Stufe Doppel-A. Es gibt mindestens zwei Wege, eine Seite zu finden – zum Beispiel Navigation und Suche oder Navigation und Sitemap. Ausgenommen sind Seiten, die ein Schritt in einem Ablauf sind, etwa im Bestellvorgang.

2 Punkt 4 Punkt 6, Überschriften und Beschriftungen. Stufe Doppel-A. Überschriften und Beschriftungen sagen klar, worum es geht. Screenreader-Nutzende springen von Überschrift zu Überschrift, um eine Seite zu überfliegen.

2 Punkt 4 Punkt 7, Fokus sichtbar. Stufe Doppel-A. Man sieht immer, welches Element gerade den Tastaturfokus hat. Ohne sichtbaren Fokus ist Tastaturbedienung wie Mausbedienung ohne Mauszeiger.

2 Punkt 4 Punkt 8, Position. Stufe Dreifach-A. Menschen erkennen, wo sie sich innerhalb der Website befinden.

2 Punkt 4 Punkt 9, Linkzweck (reiner Link). Stufe Dreifach-A. Der Linktext ist schon für sich allein verständlich – ganz ohne den Text drumherum. Screenreader können Links als reine Liste anzeigen.

2 Punkt 4 Punkt 10, Abschnittsüberschriften. Stufe Dreifach-A. Längere Inhalte sind durch Überschriften in Abschnitte gegliedert.

2 Punkt 4 Punkt 11, Fokus nicht verdeckt (Minimum). Stufe Doppel-A. Das fokussierte Element ist nicht komplett verdeckt – zum Beispiel durch einen fest stehenden Kopfbereich, ein Cookie-Banner oder ein Chat-Fenster.

2 Punkt 4 Punkt 12, Fokus nicht verdeckt (erhöht). Stufe Dreifach-A. Das fokussierte Element ist vollständig sichtbar. Kein Teil davon wird verdeckt.

2 Punkt 4 Punkt 13, Fokus-Erscheinungsbild. Stufe Dreifach-A. Der Fokusrahmen ist groß und kontrastreich genug: mindestens so groß wie ein 2 Pixel dicker Rahmen um das Element, mit einem Kontrast von 3:1 zwischen fokussiert und nicht fokussiert.

Richtlinie 2 Punkt 5: Eingabemodalitäten. Bedienung per Touch, Zeiger und Bewegung ist einfach und fehlertolerant.

2 Punkt 5 Punkt 1, Zeigergesten. Stufe A. Funktionen, die Mehrfinger- oder Wischgesten brauchen, gibt es auch als einfaches Tippen oder Klicken.

2 Punkt 5 Punkt 2, Zeigerabbruch. Stufe A. Eine Aktion wird erst beim Loslassen ausgelöst, nicht schon beim Herunterdrücken. So lässt sich ein Fehlklick abbrechen: einfach wegziehen.

2 Punkt 5 Punkt 3, Beschriftung im Namen. Stufe A. Der sichtbare Text eines Bedienelements steckt auch in seinem Namen im Code. Sonst funktioniert Sprachsteuerung nicht: „Klicke Senden“ findet den Knopf nicht.

2 Punkt 5 Punkt 4, Bewegungsaktivierung. Stufe A. Funktionen, die durch Schütteln oder Neigen des Geräts ausgelöst werden, gibt es auch als Knopf – und die Bewegungssteuerung lässt sich abschalten.

2 Punkt 5 Punkt 5, Zielgröße (erhöht). Stufe Dreifach-A. Klick- und Tippflächen sind mindestens 44 × 44 CSS-Pixel groß.

2 Punkt 5 Punkt 6, Gleichzeitige Eingabemechanismen. Stufe Dreifach-A. Menschen können jederzeit zwischen Eingabearten wechseln: Touch, Maus, Tastatur, Stift, Sprache.

2 Punkt 5 Punkt 7, Ziehbewegungen. Stufe Doppel-A. Alles, was man durch Ziehen erledigt, geht auch mit einfachen Klicks. Ziehen mit gedrückter Taste ist bei Tremor oder mit Mundstab kaum möglich.

2 Punkt 5 Punkt 8, Zielgröße (Minimum). Stufe Doppel-A. Klick- und Tippflächen sind mindestens 24 × 24 CSS-Pixel groß – oder haben so viel Abstand, dass man nicht versehentlich das Nachbarelement trifft.

Das waren alle Regeln zum Prinzip Bedienbar. Zu jeder Regel findest du auf der Website ein Beispiel und einen Praxis-Tipp. Danke fürs Zuhören.