Die Tastaturbedienung der Website prüfst du, indem du einen wichtigen Weg ohne Maus durchgehst: ein Menü öffnen, ein Formular ausfüllen oder einen Dialog schließen. Dabei beantwortest du drei Fragen: Erreiche ich die Funktion? Sehe ich, wo ich gerade bin? Komme ich wieder heraus?
Die folgenden Abbildungen machen diese Prüfpunkte sichtbar. Sie zeigen vereinfachte Beispiele, keine Ergebnisse eines Tests deiner Website.
Tastaturbedienung der Website: So startest du
Wähle eine konkrete Aufgabe, etwa „Kontaktformular finden und bis zur Eingabekontrolle ausfüllen“. Notiere die Startseite und das gewünschte Ergebnis. So entsteht ein nachvollziehbarer Weg, den du nach einer Korrektur wiederholen kannst.
Lege außerdem fest, welche Seitentypen du abdeckst: Startseite, Navigation, Formular und gegebenenfalls Warenkorb. Ein erfolgreich geprüfter Kontaktweg sagt noch nichts über andere Komponenten aus.
- Maus beiseite: Nutze während des Durchgangs nur die Tastatur.
- Umgebung festhalten: Notiere Datum, Browser, Betriebssystem und gegebenenfalls die Einstellung zur Tastaturnavigation.
- Schmale Ansicht mitprüfen: Dort können andere Menüs oder zusätzliche Überlagerungen erscheinen.
- Testdaten verwenden: Beende den Weg vor einer echten Bestellung, Zahlung oder Nachricht.
Beginne mit einer frisch geöffneten Seite. Prüfe zunächst den Hauptweg und danach Varianten, beispielsweise eine fehlerhafte Formulareingabe. Ein Fehlerhinweis kann zusätzliche Bedienelemente einblenden und dadurch den weiteren Weg verändern.
Welche Tasten brauchst du?
Für die Tastaturbedienung der Website brauchst du zunächst wenige Tasten. Welche davon wirkt, hängt vom jeweiligen Bedienelement ab:
- Tab: zum nächsten interaktiven Element wechseln.
- Umschalt + Tab: einen Schritt zurückgehen.
- Enter: einen Link öffnen; meist auch eine Schaltfläche auslösen.
- Leertaste: üblicherweise eine fokussierte Schaltfläche auslösen.
- Pfeiltasten: beispielsweise innerhalb zusammengesetzter Bedienelemente wechseln.
Entscheidend ist, ob du die Aufgabe erledigen kannst. Nicht jedes sichtbare Element benötigt einen eigenen Halt in der Tab-Reihenfolge. Ein anderer erreichbarer Tastaturweg kann dieselbe Funktion zugänglich machen.
Die Grundlage beschreibt das W3C in WCAG 2.1.1 zur Tastaturbedienung. Eine Ausnahme betrifft Funktionen, die vom Verlauf einer Bewegung abhängen, etwa freies Zeichnen. Eine gewöhnliche Suche oder ein Formular wird durch seine Bedienbarkeit mit der Maus nicht zu einer solchen Ausnahme.
Wo bist du gerade? Der sichtbare Fokus
Bei der Tastaturbedienung der Website zeigt der Fokus, welches Element deine nächste Eingabe erhält. In der folgenden Navigation ist unten sofort erkennbar: Enter würde den Kontakt-Link öffnen. Oben fehlt diese Orientierung.
Ein Rahmen ist eine mögliche Fokusmarkierung. Bei einem Eingabefeld kann auch eine sichtbare Einfügemarke Orientierung geben. Nach WCAG 2.4.7 zum sichtbaren Fokus muss eine per Tastatur bedienbare Oberfläche einen Modus mit sichtbarer Fokusmarkierung bieten. Die Markierung darf nicht nach kurzer Zeit verschwinden.
Dein Kurzcheck: Drücke Tab, halte einige Sekunden an und frage dich: „Kann ich das aktive Element eindeutig erkennen?“ Wiederhole das auf hellen und dunklen Flächen. Ein entfernter Browserrahmen braucht einen sichtbaren Ersatz.
Springt der Fokus in sinnvoller Reihenfolge?
Im Beispielformular führt Tab vom Namen zur E-Mail-Adresse und anschließend zur Schaltfläche. Die nummerierten Stationen zeigen einen nachvollziehbaren Weg. Mit Umschalt + Tab gehst du ihn rückwärts.
Prüfe auf deiner Website, ob zusammengehörige Eingaben beieinanderbleiben. Ein Sprung vom Namensfeld in die Fußzeile und dann zurück zum Formular wäre ein Anlass für eine genauere Prüfung.
WCAG 2.4.3 zur Fokusreihenfolge verlangt eine Reihenfolge, die Bedeutung und Bedienbarkeit erhält. Sie muss nicht immer exakt dem sichtbaren Aufbau entsprechen. Bei unabhängigen Spalten können mehrere Wege sinnvoll sein.
Hilfreiche Fehlernotiz: „Nach dem Feld E-Mail landet der Fokus auf dem Footer-Link Impressum; erst danach folgt Prüfen.“ Damit sind beide Endpunkte benannt. Nach einer Korrektur wiederholst du denselben Weg vorwärts und rückwärts.
Kommst du aus jedem Bereich wieder heraus?
Eine Tastaturfalle entsteht, wenn du einen Bereich erreichst, ihn aber nicht mehr per Tastatur verlassen kannst. Das kann etwa bei eingebetteten Anwendungen oder individuell entwickelten Bedienelementen auftreten.
Prüfe die vorgesehenen Wechsel- und Ausstiegstasten und beachte sichtbare Bedienhinweise. WCAG 2.1.2 zu Tastaturfallen fordert einen Tastaturausweg. Ist dafür eine besondere Methode nötig, müssen Nutzer darüber informiert werden. Escape ist häufig eine übliche Ausstiegstaste, aber nicht jede Komponente funktioniert gleich.
Wichtig bei Dialogen: Dass Tab innerhalb eines geöffneten modalen Dialogs im Kreis läuft, ist allein noch keine unerlaubte Tastaturfalle. Der Dialog muss sich verständlich per Tastatur verlassen lassen.
Was muss ein Dialog können?
Ein modaler Dialog legt sich über die Seite und beschränkt die Bedienung auf seinen Inhalt. Die Grafik zeigt drei Zustände: öffnen, innerhalb des Dialogs wechseln und wieder zur Seite zurückkehren.
Das WAI-ARIA-Dialogmuster des W3C beschreibt dafür folgenden Ablauf:
- Beim Öffnen wechselt der Fokus in den Dialog.
- Tab und Umschalt + Tab bewegen ihn zwischen den Bedienelementen im Dialog.
- Escape schließt den Dialog. Eine sichtbare, per Tastatur bedienbare Schließen-Schaltfläche ist ebenfalls empfohlen.
- Danach kehrt der Fokus normalerweise zum Auslöser zurück. Der Arbeitsablauf kann ein anderes sinnvolles Ziel erfordern.
Prüfe die Tastaturbedienung der Website deshalb auch nach dem Schließen: Kannst du verständlich dort weitermachen, wo du den Dialog geöffnet hast? Halte unerwartete Sprünge mit Ausgangs- und Zielpunkt fest.
Verdecken feste Leisten das aktive Element?
Eine Fokusmarkierung hilft wenig, wenn das Element hinter einer festen Kopfzeile oder einem Hinweisbanner liegt. Prüfe diese Stellen in schmaler Ansicht und nach dem Scrollen in beide Richtungen.
WCAG 2.4.11 zu nicht verdecktem Fokus verlangt auf Stufe AA, dass das fokussierte Element nicht vollständig durch Anbieterinhalte verdeckt ist. Teilweise Sichtbarkeit ist hier die Mindestanforderung; eine vollständig freie Darstellung ist das bessere Gestaltungsziel.
Bei selbst geöffneten Überlagerungen berücksichtigt das Kriterium außerdem, ob du das Element wieder sichtbar machen kannst, ohne den Fokus weiterzubewegen. Beurteile deshalb den tatsächlichen Zustand und die verfügbare Bedienmöglichkeit.
Checkliste für die Tastaturbedienung der Website
Halte für jedes Problem einen eigenen Eintrag fest. Eine konkrete Beobachtung hilft bei der Behebung mehr als eine vermutete Ursache.
- Wo? Seitenadresse, Browser, Betriebssystem und Datum.
- Ausgangszustand? Beispielsweise „Menü geschlossen“ oder „Dialog geöffnet“.
- Welche Eingabe? Die tatsächlich verwendete Tastenfolge.
- Was passiert? Erwartetes Verhalten und beobachtetes Ergebnis.
- Wie sichtbar machen? Screenshot oder Aufnahme ohne vertrauliche Daten.
- Nach der Korrektur? Den gleichen Weg erneut prüfen und Ergebnis notieren.
Bearbeite zuerst Hindernisse, die wichtige Aufgaben vollständig blockieren. Halte fest, welche Seiten und Zustände du tatsächlich untersucht hast. Der Durchgang liefert konkrete Beobachtungen; daraus solltest du keine umfassendere Prüfung ableiten, als du ausgeführt hast.
Passend dazu: Wie du Struktur und Lesbarkeit von Anfang an mitplanst, erklärt unser Beitrag „Modernes Webdesign verbindet Klarheit und Charakter“.
Quellen geprüft am 15. September 2026. Grundlage: die verlinkten W3C-Erläuterungen zu WCAG 2.2 und das WAI-ARIA-Dialogmuster.
