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

Offizielle Definition beim W3C lesen

So prüfen Sie es von Hand

  1. Legen Sie die Maus weg. Klicken Sie in die Adressleiste und gehen Sie dann mit Tab durch die ganze Seite.
  2. 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.
  3. 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.
  4. Achten Sie besonders auf eigene Widgets – Schieberegler, Datumsauswahl, Karussells, Cookie-Banner, Chatfenster. Dort stecken die Fehler.

Im Code

Nicht erfüllt
<div class="add-to-cart" onclick="addToCart()">
  In den Warenkorb
</div>
Erfüllt
<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 erreichbar
  • server-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.

Alle Regeln erklärt

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.

Kostenlosen Scan anfordern So testet der Agent

Bericht innerhalb eines Werktags.