2.1.1 Tastatur

Was bedeutet das?

Alles, was Besucher mit der Maus erledigen können, muss auch mit der Tastatur gehen: Menüs öffnen, Filter setzen, Produkte in den Warenkorb legen, Formulare absenden, Dialoge schließen. Üblich sind die Tab-Taste zum Weiterspringen, die Eingabetaste und die Leertaste zum Auslösen sowie die Pfeiltasten innerhalb von Bedienelementen.

Ausgenommen sind nur Funktionen, bei denen der genaue Weg der Bewegung zählt, etwa freihändiges Zeichnen oder eine Unterschrift mit dem Finger. Ein Schieberegler gehört nicht dazu: Den Wert kann man auch per Pfeiltaste einstellen.

Wem hilft das?

• Blinde Menschen, die mit Screenreader und Tastatur arbeiten
• Menschen mit motorischen Einschränkungen, die keine Maus führen können
• Menschen, die Sprachsteuerung, Schaltersteuerung oder eine Bildschirmtastatur nutzen
• Vielnutzer, die mit der Tastatur schlicht schneller sind

Typische Fehler

• Klickbare div- oder span-Elemente ohne Tastaturbedienung, etwa als Menüknopf oder Warenkorb-Symbol
• Untermenüs, die sich nur beim Überfahren mit der Maus öffnen
• Eigene Auswahllisten, Bildergalerien oder Schieberegler, die auf Pfeiltasten nicht reagieren
• Links ohne href-Attribut, die nur per JavaScript-Klick funktionieren
• Elemente mit tabindex="-1", die dadurch aus der Tab-Reihenfolge fallen, obwohl man sie bedienen muss

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.
• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Ist jede Funktion allein mit der Tastatur erreichbar und bedienbar (Menüs, Slider, Dialoge, Formulare)?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<div class="menu-toggle" onclick="toggleMenu()">
  Menü
</div>

<button type="button" class="menu-toggle"
        aria-expanded="false" aria-controls="hauptmenue">
  Menü
</button>
<nav id="hauptmenue" hidden>…</nav>

Ein echtes button-Element ist automatisch per Tab erreichbar und reagiert auf Eingabe- und Leertaste, ohne zusätzlichen Code.

Praxistipps

• Legen Sie die Maus für fünf Minuten beiseite und versuchen Sie, auf Ihrer Website einen Kauf oder eine Anfrage abzuschließen.
• Verwenden Sie native Elemente wie button, a href, select und input, bevor Sie eigene Bedienelemente bauen.

Ratgeber und Muster dazu

• Ohne Maus ans Ziel: Tastatur und FokusViele Menschen bedienen das Web ohne Maus: mit Tastatur, Schaltern, Sprachsteuerung oder Screenreader. Hier lesen Sie, was dafür funktionieren muss und wie Sie den Fokus in modernen Web-Apps richtig führen.
• BFSG-Prüfung: So lassen Sie Ihre Website auf Barrierefreiheit prüfenDas BFSG verlangt barrierefreie Angebote, aber kein bestimmtes Prüfverfahren. Hier steht, welche Prüfung was leistet, wie ein Audit abläuft, was es bei uns kostet und was Sie danach in der Hand haben.
• BFSG für kleine Unternehmen: Wann die Ausnahme greift und wann nichtKleinstunternehmen mit Dienstleistungen sind vom BFSG ausgenommen. Doch die Ausnahme hat klare Grenzen, und wer wächst, verlässt sie schneller als gedacht.
• Cookie-Banner, die niemanden aussperrenDer Cookie-Banner ist oft das Erste, was Besucher sehen, und für manche das Letzte: Wer ihn mit Tastatur oder Screenreader nicht bedienen kann, kommt nicht weiter. So machen Sie ihn für alle bedienbar.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.1.1 Keyboard