--- title: "Tastatur" url: "https://barrierefreihochzwei.de/de/wcag/2-1-1-tastatur" language: "de" description: "WCAG 2.1.1 verlangt, dass alle Funktionen einer Website per Tastatur bedienbar sind. Hier lernst du, worauf es ankommt und wie du eigene Komponenten testest." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:41:59+02:00" --- # Tastatur Wenn jeder Klick auch ein Tastendruck sein kann. - **Erfolgskriterium:** 2.1.1 - **Prinzip:** Bedienbar - **Konformitätsstufe:** Level A - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/keyb...](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) Erfolgskriterium 2.1.1 # 2.1.1 Tastatur Level ABedienbar Wenn jeder Klick auch ein Tastendruck sein kann. ## 1. Was ist das Ziel dieses Kriteriums? Nicht alle können eine Maus benutzen – und das aus ganz unterschiedlichen Gründen. Blinde Menschen können einem Mauszeiger nicht folgen. Menschen mit motorischen Einschränkungen können präzise Mausbewegungen oft nur schwer kontrollieren. Wieder andere nutzen Hilfsmittel wie Spezialtastaturen, Schaltersteuerung oder Sprachsteuerung, die sich gegenüber der Website wie eine Tastatur verhalten. Das Ziel von Erfolgskriterium 2.1.1 ist daher glasklar: Alles, was du mit der Maus machen kannst, muss auch über die Tastatur funktionieren. So können alle deine Website bedienen – unabhängig davon, welche Eingabemethode sie verwenden. Kurz gesagt: Jede Funktion, jeder Button, jedes interaktive Element muss auch ohne Maus erreichbar und bedienbar sein. ## 2. Was fordert das Erfolgskriterium genau? Die Anforderung ist eigentlich simpel, aber weitreichend: Alle Funktionen deiner Website müssen über eine Tastaturschnittstelle bedienbar sein – ohne dass bestimmte Zeitvorgaben für einzelne Tastenanschläge nötig sind. **Konkret bedeutet das zum Beispiel:** - Alle Links, Buttons und Formularelemente lassen sich per Tastatur erreichen (meist mit der Tab-Taste) - Interaktive Elemente lassen sich per Tastatur auslösen, etwa mit Enter oder Leertaste - Eigene Komponenten wie Menüs, Tabs oder Schieberegler sind vollständig per Tastatur bedienbar - Drag-and-drop-Funktionen haben einen Tastaturweg (z. B. Buttons zum Verschieben oder ein Auswahlmenü) - Niemand muss eine Taste exakt eine bestimmte Zeit gedrückt halten oder blitzschnell mehrfach drücken Welche Tasten genau verwendet werden (z. B. Pfeiltasten in Menüs oder Escape zum Schließen von Dialogen), schreibt das Kriterium nicht vor – es sind aber bewährte Konventionen, an die sich Nutzer:innen gewöhnt haben. **Eine wichtige Ausnahme gibt es:** Funktionen, die zwingend vom Bewegungspfad abhängen – wie freihändiges Zeichnen oder Aquarellmalen in einer Mal-App – müssen nicht per Tastatur bedienbar sein. Aber Achtung: Das bezieht sich auf die zugrunde liegende Funktion, nicht auf die Eingabetechnik. Texteingabe per Handschrift ist zum Beispiel keine Ausnahme, denn Text lässt sich auch tippen. ## 3. Warum ist das wichtig für Barrierefreiheit? Stell dir vor, du surfst im Internet, aber deine Maus ist kaputt – frustrierend, oder? Für viele Menschen ist das Alltag. Blinde Menschen können den Mauszeiger nicht sehen, Menschen mit Tremor können ihn nicht präzise steuern, und Menschen mit Lähmungen nutzen oft alternative Eingabegeräte. Tastaturbedienbarkeit schafft echte Teilhabe, weil sie: - Blinden Menschen ermöglicht, mit Screenreadern alle Funktionen zu nutzen - Menschen mit motorischen Einschränkungen den Einsatz alternativer Eingabegeräte erlaubt, die Tastatureingaben erzeugen - Menschen mit Sprachsteuerung den Zugang erleichtert, da viele Sprachbefehle auf Tastaturbefehle abgebildet werden - Menschen mit Sehbehinderungen das Navigieren ohne Suchen des Mauszeigers ermöglicht - Menschen mit vorübergehenden Einschränkungen hilft (z. B. mit Gips am Arm) Und nicht zuletzt: Viele Power-User arbeiten ohnehin lieber mit der Tastatur – sie sind damit oft schneller als mit der Maus. ## 4. So setzt du das Kriterium erfolgreich um Die gute Nachricht: Native HTML-Elemente bringen Tastaturbedienung bereits mit. Probleme entstehen vor allem bei selbst gebauten Komponenten. Ein paar bewährte Praxis-Tipps: **Die Grundregeln:** - Verwende semantisches HTML: `