Stufe A · WCAG 2.0
2.1.1 Tastatur
Alles, was mit der Maus geht, geht auch mit der Tastatur.
Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.
Woran es in der Praxis scheitert
Ein Karussell, dessen Pfeile divs mit Klick-Handler sind. Ein eigenes Auswahlfeld, das nur per Klick aufgeht. Eine Liste, die sich nur per Drag sortieren lässt.
Wie man es repariert
Nehmen Sie echte button- und a-Elemente. Wo ein eigenes Widget unvermeidlich ist, setzen Sie die Tastaturbedienung um, die sein ARIA-Muster vorschreibt — nicht nur Tab.
Auf einen Blick
- Stufe
- Stufe A — das Minimum. Ein Verstoß hier macht etwas meist unmöglich, nicht bloß mühsam.
- Prinzip
- Bedienbar
- Richtlinie
- 2.1 Per Tastatur zugänglich
- Neu in
- WCAG 2.0
- EN 301 549
- 9.2.1.1
- Englische Bezeichnung
- Keyboard
- Automatische Prüfung
- Teilweise automatisch
So prüfen Sie es von Hand
- Legen Sie die Maus weg. Klicken Sie in die Adressleiste und gehen Sie dann mit Tab durch die ganze Seite.
- Prüfen Sie, ob Sie jeden Link, jeden Button, jedes Feld und jedes Menü erreichen und bedienen können – Enter für Links und Buttons, Leertaste für Checkboxen und Buttons, die Pfeiltasten in Menüs, Tabs und Radiogruppen.
- Gehen Sie die Strecke ab, die Umsatz bringt: suchen, filtern, Größe wählen, in den Warenkorb, zur Kasse, bezahlen. Ein einziger Schritt, der eine Maus braucht, lässt die ganze Strecke durchfallen.
- Achten Sie besonders auf eigene Widgets – Schieberegler, Datumsauswahl, Karussells, Cookie-Banner, Chatfenster. Dort stecken die Fehler.
Im Code
<div class="add-to-cart" onclick="addToCart()">
In den Warenkorb
</div>
<button type="button" class="add-to-cart" onclick="addToCart()">
In den Warenkorb
</button>
Teilweise automatisch
Wie weit eine automatische Prüfung kommt
Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.
Unser Tastatur-Agent läuft die Journeys ab, die Sie ihm geben, und protokolliert jeden Tastendruck — ein Fund kommt mit der Spur, die ihn erzeugt hat. Bei einem Crawl aus einem Konto geht er außerdem eine Seite je Template ab und betätigt, was er erreicht; so findet er Elemente, die auf einen Klick reagieren, aber auf keine Taste. Jedes Widget der Website probiert er trotzdem nicht aus.
Regeln, die dieses Kriterium prüfen
frame-focusable-contentFrames mit fokussierbarem Inhalt dürfen keinen tabindex=-1 haben.scrollable-region-focusableScrollbereich per Tastatur nicht erreichbarserver-side-image-mapServerseitige Imagemaps dürfen nicht verwendet werden.keyboard:unreachableElement per Tastatur nicht erreichbar Tastatur-Agent
Die Regel-IDs stammen aus axe-core (Version 4.14.0), der Open-Source-Engine, auf der unser Scan läuft, und von unserem Tastatur-Agenten – so heißen sie auch in einem Bericht oder im CI-Log. Eine unterstrichene ID hat hier eine eigene Seite.
Wo es besonders zählt
Leitfäden, in denen dieses Kriterium zu den ersten Prüfpunkten gehört.
- BFSG für Onlineshops
- BFSG für Banken und Finanzdienstleistungen
- BFSG für Ticketing und Personenbeförderung
- BFSG für E-Books und Lese-Apps
- BFSG für Telekommunikationsdienste
- Shopware Barrierefreiheit und das BFSG
- Shopify Barrierefreiheit und das BFSG
- TYPO3 Barrierefreiheit und das BFSG
- WordPress Barrierefreiheit und das BFSG
Verwandte Kriterien
Weitere Kriterien unter derselben Richtlinie.
Weiterlesen
-
Tastatur-Agent
Tastaturtest für Ihre Website: Der Agent drückt echte Tasten, findet Tastaturfallen und unsichtbaren Fokus und belegt jeden Schritt mit einem Protokoll.
-
Tastaturbedienbarkeit
Alle Funktionen einer Website lassen sich ohne Maus, allein mit der Tastatur bedienen (WCAG 2.1.1, Stufe A).
-
keyboard:unreachable
Ein klickbares div oder role="button" ohne Tab-Fokus verstößt gegen WCAG 2.1.1. Ursachen und Lösung mit echten Buttons und Links – mit Codebeispiel.
-
scrollable-region-focusable
Die axe-Regel scrollable-region-focusable meldet Scrollbereiche, die per Tastatur nicht erreichbar sind. Lösung mit tabindex – mit Codebeispiel.
Finden Sie heraus, welche Kriterien Ihre Website verfehlt
Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.