Tastaturbedienung: WCAG 2.1.1 einfach erklärt
Also called: Tastaturnavigation, Tastaturzugänglichkeit, Bedienung ohne Maus
Definition
Tastaturbedienung bedeutet, dass sich jede Funktion einer Website allein mit der Tastatur erreichen und bedienen lässt – meist mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten. WCAG 2.1.1 verlangt das auf Stufe A.
Tastaturbedienung bedeutet, dass Besucher Ihre gesamte Website ohne Maus nutzen können: mit Tab von Link zu Link springen, Menüs öffnen, Formulare ausfüllen und eine Bestellung abschließen. Funktioniert auch nur eine einzige Funktion ausschließlich per Mausklick, bleiben Tastaturnutzer an dieser Stelle hängen.
Was es bedeutet
WCAG 2.1.1 Tastatur ist ein Erfolgskriterium der Stufe A in WCAG 2.2 – also eine Grundanforderung. Alle Funktionen müssen über eine Tastaturschnittstelle bedienbar sein, und zwar ohne dass bestimmte Zeitabstände zwischen einzelnen Tastenanschlägen nötig sind. Über EN 301 549 (Abschnitt 9.2.1.1) gilt die Anforderung auch für das Barrierefreiheitsstärkungsgesetz.
Die Tastaturnavigation betrifft mehr Menschen, als man denkt. Das W3C nennt blinde Nutzer, die keinem Mauszeiger folgen können, Menschen mit Sehschwäche, die den Zeiger aus den Augen verlieren, und Menschen mit Zittern in den Händen. Auch Sprachsteuerung, Schaltersteuerungen und Bildschirmtastaturen senden Tastaturbefehle – scheitert die Tastatur, scheitern sie mit.
| Taste | Erwartetes Verhalten |
|---|---|
| Tab / Umschalt+Tab | Zum nächsten / vorherigen Link, Button oder Formularfeld |
| Enter | Link öffnen, Button auslösen, Formular absenden |
| Leertaste | Button auslösen, Checkbox anhaken |
| Pfeiltasten | Innerhalb von Radiogruppen, Menüs, Tabs und Schiebereglern bewegen |
| Esc | Dialog, Menü oder Pop-up schließen |
Es gibt nur eine Ausnahme: Funktionen, bei denen das Ergebnis vom Weg der Bewegung abhängt, etwa Freihandzeichnen. Gerade Linien zeichnen, ein Fenster vergrößern oder ein Element per Drag-and-drop an ein Ziel ziehen fällt nicht darunter – dafür brauchen Sie eine Tastatur-Alternative.
Praxisbeispiele
Der häufigste Fehler ist ein klickbares Element, das gar kein echtes Bedienelement ist. Ein div mit Klick-Handler sieht aus wie ein Button, erhält aber nie den Tastaturfokus.
<!-- Fehler: nicht fokussierbar, Enter und Leertaste wirken nicht -->
<div class="btn" onclick="inDenWarenkorb()">In den Warenkorb</div>
<!-- Richtig: natives button-Element, fokussierbar und bedienbar -->
<button type="button" onclick="inDenWarenkorb()">In den Warenkorb</button>
<!-- Menü, das sich nur bei Mausberührung öffnet, fällt durch -->
<button aria-expanded="false" aria-controls="shop-menu">Shop</button>
<ul id="shop-menu" hidden>…</ul>Native Elemente wie <a href>, <button>, <input> und <select> verwenden, Menüs auch per Klick oder Enter öffnen und für Drag-and-drop sowie Schieberegler eine Tastatur-Alternative anbieten.
Klick-Handler auf div oder span setzen, Elemente mit tabindex="-1" aus der Tab-Reihenfolge nehmen oder wichtige Aktionen nur beim Überfahren mit der Maus einblenden.
Beim Testen der Tastaturbedienung zeigen sich oft zwei verwandte Probleme: Der Fokus kommt aus einem Element nicht mehr heraus – eine Tastaturfalle – oder er bewegt sich, ist aber nicht zu sehen. Dann fehlt ein sichtbarer Fokus. Ein Skip-Link erspart Tastaturnutzern, auf jeder Seite erst durch das ganze Menü zu tabben.
So prüfen Sie die Tastaturbedienung
Häufige Fragen
Was bedeutet Tastaturbedienung bei der Barrierefreiheit?
Jede Funktion einer Website lässt sich allein mit der Tastatur nutzen – meist mit Tab, Umschalt+Tab, Enter, Leertaste, Pfeiltasten und Esc. WCAG 2.1.1 verlangt das auf Stufe A.
Welche Tasten muss eine barrierefreie Website unterstützen?
Tab und Umschalt+Tab wechseln zwischen Bedienelementen, Enter löst Links und Buttons aus, die Leertaste Buttons und Checkboxen. Pfeiltasten bewegen innerhalb zusammengesetzter Elemente wie Tabs, Esc schließt Dialoge und Menüs.
Gilt WCAG 2.1.1 auch für Drag-and-drop?
Ja. Ein Element an ein Ziel zu ziehen hängt nicht vom genauen Bewegungsweg ab, deshalb braucht es einen Weg per Tastatur – etwa Buttons zum Verschieben nach oben oder unten. Ausgenommen sind nur Funktionen wie Freihandzeichnen.
Brauche ich tabindex für die Tastaturnavigation?
Meist nicht. Native Links, Buttons und Formularfelder sind von selbst fokussierbar. Setzen Sie tabindex="0" nur bei eigenen Widgets und vermeiden Sie positive Werte wie tabindex="5" – sie zerstören die natürliche Fokusreihenfolge.
Wie finde ich Tastaturprobleme auf meiner Website?
Beginnen Sie mit einem kurzen Tab-Test Ihrer wichtigsten Seiten. Elemente ohne Rolle oder Namen auf der gesamten Website zeigt Ihnen der kostenlose WCAG-Scanner – beheben Sie diese Meldungen zuerst.
Related terms
Tastaturfalle: WCAG 2.1.2 erklärt und behoben
Eine Tastaturfalle ist ein Bereich einer Seite, in den der Tastaturfokus hineinkommt, aus dem er aber nicht allein per Tastatur wieder herauskommt. WCAG 2.1.2 Keine Tastaturfalle verbietet das auf Stufe A.
Read definition: Tastaturfalle: WCAG 2.1.2 erklärt und behobenSichtbarer Fokus: WCAG 2.4.7 richtig umsetzen
Sichtbarer Fokus bedeutet, dass eine Website das Element, das gerade den Tastaturfokus hat, deutlich markiert – meist mit einem Rahmen. WCAG 2.4.7 verlangt das auf Stufe AA.
Read definition: Sichtbarer Fokus: WCAG 2.4.7 richtig umsetzenSkip-Link: Direkt zum Hauptinhalt springen
Ein Skip-Link ist ein Link ganz oben auf der Seite, der direkt zum Hauptinhalt springt. So müssen Tastatur- und Screenreader-Nutzer nicht auf jeder Seite das ganze Menü durchlaufen. Er ist eine ausreichende Technik für WCAG 2.4.1.
Read definition: Skip-Link: Direkt zum Hauptinhalt springenIcon-Button: So geben Sie ihm einen Namen
Ein Icon-Button ist eine Schaltfläche, die nur ein Symbol zeigt – Lupe, Kreuz, drei Striche – und keinen sichtbaren Text. Barrierefrei ist er erst mit einem zugänglichen Namen im Code, der Hilfstechnologien sagt, was er bewirkt.
Read definition: Icon-Button: So geben Sie ihm einen Namen