--- title: "Tastaturbedienung" url: "https://www.insideuxdesign.com/de/glossar/tastaturbedienung" language: "de" description: "Was bedeutet Tastaturbedienung? Einfach erklärt mit WCAG-Kriterien, Fokus, Skip-Links und Beispiel. Erfahre, wie du deine Website ohne Maus testest." published: "2026-10-14T15:19:41+02:00" updated: "2026-10-14T15:19:41+02:00" --- # Tastaturbedienung Tastaturbedienung bedeutet, dass sich eine Website oder App vollständig ohne Maus bedienen lässt. Für viele Menschen mit Behinderungen ist das die Voraussetzung, um ein Angebot überhaupt nutzen zu können. - **Buchstabe:** T - **Englischer Begriff:** Keyboard Accessibility UX-Glossar · engl. Keyboard Accessibility # Tastaturbedienung Tastaturbedienung bedeutet, dass sich eine Website oder App vollständig ohne Maus bedienen lässt. Für viele Menschen mit Behinderungen ist das die Voraussetzung, um ein Angebot überhaupt nutzen zu können. Stell dir vor, du willst in einem Onlineshop bestellen, aber deine Hand ist nach einer Verletzung eingegipst. Eine Maus kannst du nicht bedienen, also drückst du die Tabulatortaste. Ein Rahmen springt durch das Menü, dann verschwindet er irgendwo im Banner. Welcher Button gerade aktiv ist, siehst du nicht mehr. Der Warenkorb bleibt unerreichbar. Genau das soll Tastaturbedienung verhindern. ## Einfach erklärt Tastaturbedienung bedeutet, dass sich eine Website oder App vollständig ohne Maus und ohne Touchscreen nutzen lässt. Ein Vergleich aus dem Alltag: Ein Gebäude mit Treppe und Aufzug ist für alle erreichbar. Gibt es nur die Treppe, bleiben manche Menschen draußen. Die Tastatur ist für viele digitale Angebote dieser Aufzug. Darauf angewiesen sind zum Beispiel Menschen mit motorischen Einschränkungen, Menschen, die mit einem [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader) arbeiten, und alle, die Sondertastaturen, Schalter oder Sprachsteuerung nutzen. Viele Profis arbeiten außerdem einfach lieber mit der Tastatur, weil es schneller geht. Die wichtigsten Tasten sind schnell erklärt: Mit Tab springst du zum nächsten bedienbaren Element, mit Umschalt und Tab zurück. Enter löst Links und Buttons aus, die Leertaste Buttons und Checkboxen. Mit den Pfeiltasten bewegst du dich innerhalb von Menüs, Radiobuttons oder Tabs, mit Escape schließt du Dialoge. ## Was die WCAG verlangen Die [WCAG](https://www.insideuxdesign.com/de/glossar/wcag) (Web Content Accessibility Guidelines) machen daraus prüfbare Kriterien. Die wichtigsten: - **2.1.1 Tastatur (Stufe A):** Jede Funktion muss per Tastatur bedienbar sein. Ausnahme sind nur Funktionen, bei denen der Weg der Bewegung zählt, etwa freies Zeichnen. - **2.1.2 Keine Tastaturfalle (Stufe A):** Der Fokus darf nirgends hängen bleiben. Du musst jedes Element auch wieder verlassen können. - **2.4.7 Fokus sichtbar (Stufe AA):** Es muss erkennbar sein, welches Element gerade den Fokus hat, also auf Eingaben reagiert. - **2.4.11 Fokus nicht verdeckt (Stufe AA, neu in WCAG 2.2):** Das fokussierte Element darf nicht vollständig von Inhalten wie Sticky-Headern oder Cookie-Bannern verdeckt sein. Dazu kommt 2.4.1 (Stufe A): Wiederkehrende Blöcke wie die Navigation müssen sich überspringen lassen. Die gängigste Lösung ist ein Skip-Link, also ein Link „Zum Inhalt springen“, der beim ersten Tab-Druck erscheint und direkt zum Hauptinhalt führt. ## Ein Beispiel Ein Beispiel: Ein Buchungsportal baut seine Datumsauswahl aus klickbaren div-Elementen. Per Tab erreichst du sie gar nicht, und der Fokusrahmen wurde per CSS mit `outline: none` entfernt, weil er „unschön“ aussah. Für Menschen ohne Maus endet die Buchung hier. Nach der Überarbeitung sind die Tage echte Buttons, die Pfeiltasten wechseln zwischen den Tagen, und ein kräftiger Fokusrahmen in der Markenfarbe zeigt die Position. Die Funktion ist dieselbe, aber jetzt kommen alle ans Ziel. Warum solche Details zählen, zeigt der Artikel [Warum Barrierefreiheit mehr als Kontrast und Größe ist](https://www.insideuxdesign.com/de/blog/warum-barrierefreiheit-mehr-als-kontrast-und-groesse-ist). ## In der Praxis - **Leg die Maus weg.** Geh deine wichtigsten Abläufe nur mit Tab, Enter, Leertaste und Escape durch. Das dauert Minuten und deckt viele Probleme auf. - **Nutze native Elemente.** Echte Buttons, Links und Formularfelder sind von Haus aus per Tastatur bedienbar. Eigene Komponenten brauchen zusätzliche Tastatursteuerung und oft [ARIA](https://www.insideuxdesign.com/de/glossar/aria). - **Gestalte den Fokus, statt ihn zu entfernen.** Ein gut sichtbarer Fokusrahmen gehört ins [Design System](https://www.insideuxdesign.com/de/glossar/design-system). Weitere Prüfmethoden findest du im Artikel [Accessibility-Prüfung: Werkzeuge und Methoden für UX-Designer](https://www.insideuxdesign.com/de/blog/accessibility-pruefung-werkzeuge-und-methoden-fuer-ux-designer). ## Verwandte Begriffe [Barrierefreiheit](https://www.insideuxdesign.com/de/glossar/barrierefreiheit), [WCAG](https://www.insideuxdesign.com/de/glossar/wcag), [Screenreader](https://www.insideuxdesign.com/de/glossar/screenreader), [ARIA](https://www.insideuxdesign.com/de/glossar/aria) ## Quellen - [W3C: Understanding Success Criterion 2.1.1: Keyboard. W3C WAI, 2023](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) - [W3C: Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum). W3C WAI, 2023](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html) - [W3C: Understanding Success Criterion 2.4.1: Bypass Blocks. W3C WAI, 2023](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html) - [WebAIM: Keyboard Accessibility. WebAIM](https://webaim.org/techniques/keyboard/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)