Anleitung

Tastaturnavigation implementieren — So geht’s

Eine praktische Schritt-für-Schritt Anleitung zur vollständigen Tastaturnavigation auf deiner Website. Nicht barrierefrei ohne Tastaturunterstützung.

10 min Lesezeit Mittelstufe März 2026

Tastatur mit beleuchteten Tasten, deutliche Sichtbarkeit der Navigationstasten auf schwarzem Hintergrund

Warum Tastaturnavigation essentiell ist

Viele Menschen nutzen ihre Websites nicht mit der Maus. Manche haben motorische Beeinträchtigungen, andere bevorzugen einfach die Tastatur — und es gibt auch Menschen, die komplett auf Screenreader angewiesen sind. Die Tastaturnavigation ist keine „nice-to-have” Funktion. Sie’s ein Grundrecht der Barrierefreiheit.

Nach WCAG 2.1 und BITV 2.0 muss jede Website vollständig mit der Tastatur navigierbar sein. Das bedeutet: Jedes interaktive Element — Links, Buttons, Formulare — muss erreichbar und bedienbar sein, ohne die Maus zu berühren. Wir zeigen dir, wie’s funktioniert.

Person sitzt am Schreibtisch vor Laptop, beide Hände auf der Tastatur, konzentrierter Blick auf den Bildschirm, helles Bürolicht

Tastaturlayout mit hervorgehobenen Navigationstasten: Tab, Enter, Pfeile, Escape auf weißem Hintergrund mit Beschriftungen

Die Grundlagen: Tab-Reihenfolge

Alles beginnt mit dem Tab-Key. Wenn jemand die Tab-Taste drückt, springt der Fokus zum nächsten interaktiven Element auf deiner Seite. Aber hier’s der kritische Punkt: Diese Reihenfolge muss logisch sein. Nicht zufällig. Nicht rückwärts. Nicht im Zickzack über die Seite.

Die Tab-Reihenfolge folgt normalerweise dem DOM-Baum deines HTML — von oben nach unten, von links nach rechts. Das funktioniert, wenn du dein HTML strukturiert hast. Aber wenn du CSS verwendet hast, um Elemente visuell zu verschieben? Dann wird’s chaotisch.

Faustregel: Die visuelle Reihenfolge muss mit der HTML-Reihenfolge übereinstimmen. Nutze nicht CSS, um Elemente herum zu verschieben.

Schritt 1: Fokus-Styling

Wenn jemand mit Tab durch deine Website navigiert, muss er sehen, wo der Fokus gerade ist. Viele Entwickler entfernen die Standard-Fokuszeichen mit outline: none; — das ist ein großer Fehler. Das macht deine Website für Tastatur-Nutzer praktisch unbenutzbar.

Stattdessen solltest du ein visuelles Fokus-Styling definieren. Das kann eine Umrandung, eine Hintergrundfarbe oder ein Schatten sein. Die wichtigsten Anforderungen:

Kontrastquote mindestens 3:1 zur Hintergrundfarbe
Mindestens 2px breit
Sichtbar auf hellem und dunklem Hintergrund
Konsistent auf allen fokussierbaren Elementen

Code-Editor mit CSS-Fokus-Styling Regeln, blaue Umrandung um Button im Browser-Preview, deutlich sichtbar

HTML-Struktur auf weißem Hintergrund, Tags wie button, a href, input mit grünen Häkchen markiert, div ohne Häkchen

Schritt 2: Semantisches HTML verwenden

Hier’s eine unbequeme Wahrheit: Ein <div> mit einem Click-Handler ist kein Button. Es sieht aus wie ein Button. Es funktioniert wie ein Button. Aber es ist keiner — nicht für Tastatur-Nutzer und nicht für Screenreader.

Verwende echte HTML-Elemente für das, wofür sie gedacht sind:

Falsch:


                    <div onclick="handleClick()">Klick mich</div>

Richtig:


                    <button>Klick mich</button>

Nutze <a> für Links, <button> für Buttons, <input> für Formulare. Diese Elemente sind von Haus aus fokussierbar und von der Tastatur aus bedienbar.

Schritt 3: Skip-Links implementieren

Stell dir vor: Du landest auf einer Website und musst Tab 47 Mal drücken, um zum Hauptinhalt zu gelangen. Weil da eine Navigation mit 50 Links oben ist. Das ist frustrierend, und für Menschen mit motorischen Beeinträchtigungen physisch anstrengend.

Skip-Links lösen das Problem. Das sind versteckte Links, die nur sichtbar werden, wenn man die Tastatur benutzt. Der erste Link auf jeder Seite sollte zu #main-content führen — direkt zum Hauptinhalt.

Was Skip-Links bewirken:

Tastatur-Nutzer springen direkt zum Inhalt
Screenreader können Navigation überspringen
Schnellere Navigation für alle
WCAG 2.4.1 Bypass Blocks erfüllt

Website-Ansicht mit blauem Skip-Link 'Zum Hauptinhalt springen' oben sichtbar, restliche Navigation darunter abgeblendet

Person testet Website nur mit Tastatur, Hände auf Tastatur sichtbar, mehrere Tabs im Browser geöffnet zur Überprüfung

Schritt 4: Testen mit der Tastatur

Theorie ist schön, aber Praxis ist besser. Teste deine Website wirklich nur mit der Tastatur. Nicht mit Screenreader — nur Tastatur. Hier’s wie:

Tab-Navigation: Drücke Tab und schaue, ob die Fokusreihenfolge Sinn macht. Logisch von oben nach unten?
Fokus-Sichtbarkeit: Kannst du jederzeit sehen, wo der Fokus ist? Ist die Fokuszeichen deutlich?
Alle Funktionen erreichbar: Jede Schaltfläche, jedes Menü, jedes Modal — alles mit Tab erreichbar?
Keine Fokus-Fallen: Kannst du aus Modalen oder Dropdowns mit Escape oder Tab heraus?

Wenn du bei einem Element steckenbleibst, haben deine Benutzer auch ein Problem. Behebe es.

Tastaturnavigation ist nicht verhandelbar

Barrierefreie Tastaturnavigation ist nicht eine Extra-Feature für deine Website. Sie’s eine Grundanforderung. Menschen mit unterschiedlichsten Fähigkeiten müssen deine Website nutzen können — ohne Kompromisse.

Beginne mit semantischem HTML. Implementiere sichtbare Fokuszeichen. Füge Skip-Links hinzu. Teste mit der Tastatur. Das’s die Grundlagen, und sie werden dich weit bringen.

Du möchtest mehr über Web-Accessibility erfahren?

Zum nächsten Artikel: WCAG 2.1 verstehen

Hinweis zum Inhalt

Dieser Artikel bietet allgemeine Informationen zu Web-Accessibility-Standards und Tastaturnavigation. Er ersetzt keine rechtliche Beratung und keine professionelle Audit-Dienstleistungen. Anforderungen können je nach Kontext und Jurisdiktion unterschiedlich sein. Konsultiere die offiziellen WCAG 2.1 und BITV 2.0 Richtlinien oder einen zertifizierten Accessibility-Experten für spezifische Implementierungsfragen.