WCAG: Prinzip 2 Bedienbarkeit

Dieser Text kann auch als PDF Datei heruntergeladen werden.

Das WCAG-Prinzip Bedienbarkeit stellt sicher, dass alle Funktionen einer digitalen Oberfläche von allen Nutzenden bedient werden können, unabhängig von ihren individuellen Fähigkeiten oder bevorzugten Eingabemethoden. Im Fokus stehen insbesondere Menschen, die keine Maus verwenden, Screenreader nutzen oder mit motorischen Einschränkungen arbeiten. Bedienbarkeit betrifft nicht nur technische Interaktionen, sondern auch die sinnvolle Strukturierung von Navigation, Formularen und Fokusführung.

Ohne durchdachte Bedienung können selbst die besten Inhalte unerreichbar bleiben. Wenn interaktive Elemente nicht per Tastatur erreichbar sind oder der Fokus nicht sichtbar ist, können Menschen mit Beeinträchtigungen digitale Angebote nicht nutzen.

Die barrierefreie Bedienung eines Webauftrittes oder einer mobilen Anwendung ist ein Zusammenspiel aus sauberem HTML, semantischer Struktur, sinnvoller Fokusführung und Einhaltung technischer Standards. Redaktion, Entwicklung und UX sollten gemeinsam dafür sorgen, dass Nutzerinteraktionen ohne Hürden möglich sind, mit Tastatur, Bildschirmvergrößerung oder anderen assistiven Technologien.

Zur besseren Verständlichkeit findet ihr am Ende dieses Dokuments ein Glossar mit kurzen Erklärungen zentraler Begriffe rund um die folgenden Erklärungen.

Im Folgenden werden die einzelnen Erfolgskriterien unter dem Prinzip Bedienbarkeit praxisnah erläutert. Die Umsetzungsempfehlungen enthalten konkrete Hinweise für Redaktion, Entwicklung und Gestaltung. Dabei wird jedes Erfolgskriterium zunächst kurz erklärt. Im Anschluss folgen jeweils die Hinweise zur technischen Umsetzung. Die Erfolgskriterien sind in drei Konformitätsstufen eingeteilt:

• Stufe A sind grundlegende Anforderungen, um Webauftritte und Webanwendungen nutzen zu können.
• Stufe AA ist der Standard, der für gute Zugänglichkeit erreicht werden sollte.
• Stufe AAA umfasst sehr hohe Anforderungen.

Da öffentliche Stellen laut BITV 2.0 sowie Unternehmen nach dem BFSG zur Erfüllung der Stufen A und AA verpflichtet sind, konzentriert sich dieser Leitfaden auf genau diese. Die Stufe AAA kann zur Umsetzung des höchstmöglichen Maßes der Barrierefreiheit genutzt werden, bleibt an dieser Stelle jedoch außen vor. Sie kann jederzeit bei Bedarf ergänzend berücksichtigt werden.

Alle interaktive Bedienelemente eines Webauftritt müssen vollständig über die Tastatur bedienbar sein. Das bedeutet, dass Menschen, die keine Maus nutzen können, alle Elemente bedienen und steuern können. Umsetzungsempfehlung: Nutzt standardisierte HTML-Elemente wie , , und , die automatisch tastaturzugänglich sind. Prüft regelmäßig, ob sich Menüs, Buttons, Links und Formular per Tab-Taste, Enter, Leertaste oder Pfeiltasten erreichen und steuern lassen. Ein Navigationsmenü sollte nicht nur mit der Maus bedienbar sein, sondern sich auch mit Enter öffnen und mit den Pfeiltasten navigieren lassen.

2.1.2 Keine Tastaturfalle (Stufe A):

Permalink "2.1.2 Keine Tastaturfalle (Stufe A):"#

Nutzende dürfen bei der Tastaturbedienung nicht in einem Element (z. B. einem Popup-Fenster oder interaktiven Widget) „feststecken“. Sie müssen jederzeit zu anderen Inhalten navigieren können.

Umsetzungsempfehlung: Sorgt dafür, dass Fokusbereiche klar definiert sind und Nutzende jederzeit weiter navigieren oder zurückkehren können. Tastaturfallen werden vermieden, in dem man z. B. den Fokus von einem Element wieder entfernen kann, in dem eine Interaktion abgebrochen werden kann.

2.1.4 Zeichentastenbefehle (Stufe A):

Permalink "2.1.4 Zeichentastenbefehle (Stufe A):"#

Tastenkürzel, die nur aus einem einzelnen Zeichen bestehen, können versehentlich ausgelöst werden und sollten deshalb vermieden werden, deaktivierbar oder anpassbar sein.

Umsetzungsempfehlung: Vermeidet Einzeltasten-Shortcuts ohne Modifikatortasten (wie Strg oder Alt). Falls ihr solche Shortcuts verwendet, bietet Möglichkeiten an, diese anzupassen oder abzuschalten. Beispiel: Ein Mailprogramm nutzt „e“ zum Archivieren von E-Mails. Dies sollte entweder auf eine Kombination (z. B. Alt+E) geändert oder durch Nutzende abschaltbar sein.

2.2 Ausreichende Zeit

Permalink "2.2 Ausreichende Zeit"#

2.2.1. Zeiteinteilung anpassbar (Stufe A):

Permalink "2.2.1. Zeiteinteilung anpassbar (Stufe A):"#

Bei zeitlich begrenzten Inhalten müssen Nutzende die Möglichkeit haben, die Zeitbegrenzung zu verlängern, zu deaktivieren oder Eingaben zu speichern. Zeitlich begrenzte Inhalte sind beispielsweise Online-Formulare, Buchungsprozesse (wie bei Zugtickets, Hotelreservierungen oder Konzertkarten), Online-Tests und -Prüfungen oder automatisierte Abmeldeprozesse bei Inaktivität (z. B. Online-Banking).

Umsetzungsempfehlung: Implementiert vor Ablauf einer Sitzung eine deutliche Vorwarnung, bevor ein Zeitlimit erreicht ist. Gleichzeitig muss Nutzenden eine klare Möglichkeit gegeben werden, dieses Limit zu verlängern, zu pausieren oder ganz abzuschalten. Ebenfalls sollte sichergestellt sein, dass Nutzereingaben nicht verloren gehen, falls die Zeit doch einmal abläuft, etwa durch automatische Speicherung von Daten oder Zwischenspeichern nach Abschnitten.

2.2.2. Anhalten, Beenden, Ausblenden (Stufe A):

Permalink "2.2.2. Anhalten, Beenden, Ausblenden (Stufe A):"#

Automatisch ablaufende Inhalte, wie Animationen oder Karussells, dürfen nicht von anderen Inhalten ablenken und müssen pausier bar oder zu stoppen sein. Diese Steuerungsmöglichkeiten sollten immer eingebaut werden, sobald Inhalte automatisch starten, sich bewegen, sich regelmäßig aktualisieren oder rotieren, und Nutzende diese Inhalte nicht selbst aktiv gestartet haben. Dies gilt insbesondere für Inhalte, die länger als fünf Sekunden laufen, sich wiederholen oder fortlaufend aktualisieren.

Umsetzungsempfehlung: Bietet gut sichtbare Schaltflächen oder Steuerungen an, um automatisch rotierende oder abspielende Inhalte zu stoppen oder auszublenden, besser noch werden Animationen nicht automatisch gestartet. Achtet darauf, dass die Bedienelemente per Tastatur zugänglich sind.

2.3 Anfälle und körperliche Reaktionen

Permalink "2.3 Anfälle und körperliche Reaktionen"#

2.3.1. Drei Blitze oder Unterschwellenwert (Stufe A):

Permalink "2.3.1. Drei Blitze oder Unterschwellenwert (Stufe A):"#

Vermeidet Inhalte, die häufiger als dreimal pro Sekunde blinken oder blitzen, da diese bei Personen epileptische Anfälle auslösen können.

Umsetzungsempfehlung: Verzichtet vollständig auf stark blinkende oder blitzende Animationen. Wenn Bewegungseffekte unvermeidbar sind, prüft ihre Frequenz sorgfältig, sodass sie deutlich unter drei Blitzen pro Sekunde bleibt.

2.4 Navigierbar

Permalink "2.4 Navigierbar"#

2.4.1. Blöcke umgehen (Stufe A):

Permalink "2.4.1. Blöcke umgehen (Stufe A):"#

Wiederholte Inhalte (z. B. Navigation, Header) sollten übersprungen werden können, um direkt zum gewünschten Inhalt zu gelangen. In der Praxis hat sich bewährt, drei „Skip-Links“ einzubauen. Diese müssen am Anfang der Seite stehen, um Nutzenden eine schnelle und unkomplizierte Navigation zu ermöglichen. So müssen Nutzende, die auf Tastaturbedienung oder Screenreader angewiesen sind, nicht bei jedem Seitenaufruf durch Menüs, Kopfbereiche oder Banner navigieren.

Umsetzungsempfehlung: Setzt am Anfang jeder Seite drei fokussierbare „Zum Inhalt springen“-Links ein, die beim Tabulatorfokus sichtbar werden und direkt zum Hauptinhalt führen.

2.4.2. Seiten-Titel (Stufe A):

Permalink "2.4.2. Seiten-Titel (Stufe A):"#

Jede Seite benötigt einen eindeutigen, aussagekräftigen Titel, der ihren Inhalt klar beschreibt. Ein guter Seitentitel setzt sich aus der individuellen Seite und dem Namen des gesamten Webauftrittes zusammen. Ein klar formulierter Seitentitel ist besonders wichtig, weil er die erste Orientierungshilfe für viele Nutzende darstellt, insbesondere für Personen, die Screenreader verwenden oder mehrere Browser-Tabs gleichzeitig geöffnet haben. Der Titel erscheint in der Titelleiste des Browsers, in der Tab-Darstellung und in der Verlaufsliste. Ein gut gewählter Titel hilft, sich schneller zu orientieren, Inhalte zu unterscheiden und gezielt zwischen Seiten zu wechseln. Er trägt maßgeblich zur Zugänglichkeit und zur besseren Nutzbarkeit bei, da unklare oder gleichlautende Titel wie „Startseite“ oder „Home“ keinen Hinweis auf den spezifischen Inhalt oder Zweck der Seite geben.

Umsetzungsempfehlung: Verwendet das HTML-Element