# Tastaturbedienung: WCAG 2.1.1 einfach erklärt

Source: https://allyway.ai/de/glossary/tastaturbedienung

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](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) ist ein Erfolgskriterium der Stufe A in [WCAG 2.2](https://allyway.ai/de/regulations/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](https://allyway.ai/de/regulations/en-301-549) (Abschnitt 9.2.1.1) gilt die Anforderung auch für das [Barrierefreiheitsstärkungsgesetz](https://allyway.ai/de/regulations/bfsg).

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.

> **Note:** > **Die Maus darf bleiben**
> WCAG verlangt nicht, Maus- oder Touch-Bedienung abzuschaffen. Die Tastatur muss nur dasselbe leisten können – zum Beispiel ein Button „Verschieben nach …“ neben Drag-and-drop.

## 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.

```html title="Beispiel"
<!-- 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>
```

**Do:** Do

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.

**Don't:** Don't

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](https://allyway.ai/de/glossary/tastaturfalle) – oder er bewegt sich, ist aber nicht zu sehen. Dann fehlt ein [sichtbarer Fokus](https://allyway.ai/de/glossary/fokus-sichtbar). Ein [Skip-Link](https://allyway.ai/de/glossary/skip-link) erspart Tastaturnutzern, auf jeder Seite erst durch das ganze Menü zu tabben.

## So prüfen Sie die Tastaturbedienung



## Häufige Fragen

Q: Was bedeutet Tastaturbedienung bei der Barrierefreiheit?
A: 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.

Q: Welche Tasten muss eine barrierefreie Website unterstützen?
A: 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.

Q: Gilt WCAG 2.1.1 auch für Drag-and-drop?
A: 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.

Q: Brauche ich tabindex für die Tastaturnavigation?
A: 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.

Q: Wie finde ich Tastaturprobleme auf meiner Website?
A: 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](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites) – beheben Sie diese Meldungen zuerst.