Wenn uns jemand fragt, wo er oder sie mit der Optimierung auf Barrierefreiheit anfangen soll, lautet unsere Antwort fast immer: bei der Tastaturbedienbarkeit. Sie ist das grundlegende Schlüsselelement einer barrierefreien Website und gleichzeitig der Bereich, in dem sich mit überschaubarem Aufwand am meisten bewegen lässt.
Der Grund ist einfach: Fast jede assistive Technologie (Screenreader, Sprachsteuerung, Spezialtastaturen, Schalter-Systeme) setzt auf der Tastaturebene auf. Wer die Tastaturbedienung sauber löst, legt damit das Fundament für alles Weitere.
Was bedeutet Tastaturbedienbarkeit?
Eine Website ist tastaturbedienbar, wenn man sie vollständig ohne Maus nutzen kann, also nur mit der Tastatur. Das betrifft alles: Navigation, Formulare, Menüs, Buttons, Slider, Modals, Cookie-Banner, Video-Player.
Die wichtigsten Tasten im Überblick:
| Taste | Funktion |
|---|---|
Tab | Zum nächsten interaktiven Element springen |
Shift + Tab | Zum vorherigen Element zurück |
Enter | Links und Buttons aktivieren |
Leertaste | Buttons aktivieren, Checkboxen umschalten, Seite scrollen |
Pfeiltasten | Innerhalb von Komponenten navigieren (Radio-Buttons, Tabs, Menüs, Select) |
Esc | Overlays, Modals oder Dropdowns schließen |
Wichtig: Nicht jedes Element gehört in die Tab-Reihenfolge. Innerhalb zusammengehöriger Gruppen; etwa einer Radio-Button-Gruppe oder einer Tab-Leiste wird mit den Pfeiltasten navigiert, nicht mit Tab. Das ist kein Detail, sondern erwartetes Verhalten.
Für wen ist das relevant?
Vielleicht denkst du: „Die meisten Menschen nutzen doch eine Maus oder ein Touchpad." Stimmt, aber eben nicht alle. Und viel mehr Menschen, als man auf den ersten Blick vermutet:
- Menschen mit motorischen Einschränkungen, für die präzises Zielen mit der Maus schwierig oder unmöglich ist; etwa bei Tremor, Spastik oder Lähmungen
- Blinde und sehbehinderte Personen, die einen Screenreader verwenden (dieser wird über die Tastatur gesteuert)
- Menschen mit temporären Einschränkungen – gebrochene Hand, Sehnenscheidenentzündung, ein Baby auf dem Arm
- Menschen mit situativen Einschränkungen – defekte Maus, unterwegs im Zug, helles Sonnenlicht
- Nutzer*innen von Sprachsteuerung, die per Sprachbefehl Tastaturaktionen auslösen
- Power-User und Entwickler*innen, die schlicht schneller per Tastatur arbeiten
Wenn deine Seite nicht über die Tastatur bedienbar ist, können diese Menschen sie nicht oder nur mit großer Mühe nutzen. Im Zweifel springen sie ab und gehen zur Konkurrenz.
Warum ist das so wichtig?
Weil es um Teilhabe geht. Digitale Angebote sind heute oft der einzige Weg zu Informationen, Terminen, Behördengängen oder Einkäufen. Wer hier ausgeschlossen wird, wird real ausgeschlossen.
Weil es rechtlich relevant ist. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) gelten seit dem 28. Juni 2025 verbindliche Anforderungen für viele private Anbieter; etwa im E-Commerce, bei Bankdienstleistungen oder im Personenverkehr. Öffentliche Stellen sind über die BITV 2.0 schon länger in der Pflicht. Fachlicher Maßstab ist in beiden Fällen die europäische Norm EN 301 549, die für Webinhalte auf die WCAG verweist (aber auch weitergehende Anforderungen definiert).
Weil es deine Seite besser macht. Tastaturbedienbarkeit erzwingt sauberes, semantisches HTML. Das wiederum verbessert die Wartbarkeit, die Kompatibilität mit neuen Geräten und häufig auch die Auffindbarkeit in Suchmaschinen.
Tastaturbedienbarkeit ist kein optionales Extra. Sie ist essenziell.
Der Bezug zur WCAG
Vier Erfolgskriterien der WCAG sind hier besonders relevant:
- 2.1.1 Tastatur (Stufe A): Alle Funktionen sind per Tastatur nutzbar.
- 2.1.2 Keine Tastaturfalle (Stufe A): Der Fokus lässt sich aus jedem Element wieder herausbewegen.
- 2.4.3 Fokus-Reihenfolge (Stufe A): Die Reihenfolge ist logisch und sinnvoll.
- 2.4.7 Fokus sichtbar (Stufe AA): Der Fokus ist jederzeit klar erkennbar.
Der Selbsttest: Ist deine Website tastaturfreundlich?
Das Beste an diesem Test: Du brauchst kein Fachwissen und keine Software. Leg die Maus weg und arbeite dich mit Tab durch deine Seite. Frage dich dabei:
- Erreiche ich jedes interaktive Element; auch das Cookie-Banner, den Slider, das Suchfeld im Menü?
- Sehe ich jederzeit, wo ich gerade bin?
- Ist die Reihenfolge logisch und folgt sie dem, was ich sehe?
- Komme ich aus jedem Element wieder heraus (Modals, Videoplayer, eingebettete Widgets)?
- Kann ich Dropdowns mit
Enteröffnen und mitEscschließen? - Springt der Fokus nach dem Schließen eines Modals dorthin zurück, wo er vorher war?
Häufige Stolperfallen
- Kein sichtbarer Fokus, oft, weil jemand
outline: nonegesetzt hat, um „Designstörungen" zu entfernen. Das ist der Klassiker Nummer eins. - Dropdown-Menüs, die nur auf
:hoverreagieren und sich per Tastatur gar nicht öffnen lassen - Tastaturfallen – der Fokus landet in einem Widget (z. B. einem eingebetteten Player) und kommt nicht mehr heraus
<div>und<span>als Buttons; sie sehen aus wie Buttons, sind aber für die Tastatur unsichtbar- Fokus, der in geschlossenen Overlays weiterläuft; man tabbt „ins Nichts" hinter einem Modal
- Unlogische Fokus-Reihenfolge, meist verursacht durch CSS-Umsortierung (Flexbox
order, Grid) odertabindex-Werte größer als 0 - Formularfelder ohne korrekt verknüpftes
<label> - Skip-Link fehlt; bei 40 Menüpunkten muss man sich zu jeder Unterseite neu durchtabben
Hilfreiche kostenfreie Tools
- Accessibility Insights for Web bietet mit „Tab Stops" eine Visualisierung der Fokus-Reihenfolge direkt auf der Seite. Ideal für den Einstieg.
- axe DevTools Browser-Erweiterung für automatisierte Prüfungen
- WAVE schneller visueller Überblick über Strukturprobleme
- NVDA (Windows) oder VoiceOver (macOS, bereits integriert); kostenlose Screenreader zum Gegentesten
Ein wichtiger Hinweis: Automatisierte Tools finden nur einen Teil der Probleme – typischerweise etwa ein Drittel. Ob eine Fokus-Reihenfolge sinnvoll ist, kann keine Software beurteilen. Der manuelle Tastaturtest bleibt unverzichtbar.
Beispiel: Auf der folgenden Bildschirmaufnahme vom Einstiegsbereich der Hansolu-Website siehst du die Tab-Reihenfolge, die mit einem Tool angezeigt wird. Das hilft um zu schauen, welche Elemente in welcher Reihenfolge anfokussiert werden können. So lässt schnell erkennen, on die Reihenfolge passt oder nicht.
Was du konkret tun kannst
Für die Umsetzung brauchst du Zugriff auf den Code deiner Website – oder eine gute Zusammenarbeit mit deiner Webagentur. Die wichtigsten Hebel:
1. Semantisches HTML verwenden
Der mit Abstand wirksamste Schritt. Native HTML-Elemente bringen Tastaturbedienbarkeit von Haus aus mit.
<!-- Gut: funktioniert sofort mit Tastatur -->
<button type="button">Menü öffnen</button>
<!-- Schlecht: für die Tastatur nicht existent -->
<div class="button" onclick="openMenu()">Menü öffnen</div>
Nutze <button>, <a href="...">, <label>, <fieldset>, <nav>, <main>. Faustregel: Kein ARIA ist besser als schlechtes ARIA. Ein natives Element schlägt fast immer den Nachbau.
2. Fokus sichtbar machen und schön gestalten
Entferne den Fokusring nicht. Gestalte ihn.
/* Sichtbar, kontraststark, und nur bei Tastaturnutzung */
:focus-visible {
outline: 3px solid #0057b8;
outline-offset: 2px;
border-radius: 2px;
}
:focus-visible ist der elegante Kompromiss: Mausklicks lösen keinen Fokusring aus, Tastaturnutzung schon. Achte auf ausreichenden Kontrast zum Hintergrund (mindestens 3:1).
3. Skip-Link einbauen
Ein „Zum Inhalt springen"-Link als erstes fokussierbares Element spart Tastaturnutzenden auf jeder Unterseite Dutzende Tab-Anschläge.
<a href="#main" class="skip-link">Zum Hauptinhalt springen</a>
4. Fokus in Overlays managen
Öffnet sich ein Modal, muss der Fokus hinein wandern und darin gefangen bleiben (Fokusfalle; hier ist sie erwünscht). Esc schließt es, und der Fokus kehrt zum auslösenden Button zurück. Ein natives <dialog>-Element übernimmt vieles davon bereits.
5. tabindex sparsam einsetzen
tabindex="0"– nimmt ein Element in die natürliche Reihenfolge auftabindex="-1"– macht ein Element per Skript fokussierbar, aber nicht perTabtabindex="1"oder höher – Finger weg. Das zerstört fast immer die Reihenfolge.
6. Regelmäßig testen
Nimm den Tastaturtest in deine Routine auf – bei jedem Relaunch, jedem neuen Feature, jedem Plugin-Update. Barrierefreiheit ist kein Projekt mit Enddatum, sondern eine laufende Qualitätsdisziplin.
Tastaturbedienbarkeit ist der Einstieg
Tastaturbedienbarkeit ist der Einstieg mit dem besten Verhältnis von Aufwand zu Wirkung. Sie kostet dich einen Nachmittag zum Testen, macht deine Website für einen erheblichen Teil deiner Nutzer*innen überhaupt erst zugänglich und schafft die Grundlage für alle weiteren Schritte in Richtung Barrierefreiheit.
Der Test dauert zehn Minuten. Leg die Maus weg.
Kostenfreie Beratung zur Tastaturbedienbarkeit
Du hast beim Selbsttest Stolperstellen gefunden und weißt nicht, wie du sie behebst? Oder du möchtest wissen, ob deine Website die Anforderungen des BFSG erfüllt? Dann nutze unsere kostenfreie Erstberatung. Wir schauen gemeinsam auf deine Website und zeigen dir, wo die größten Hebel liegen.
Hier geht es zu unserem Anfrageformular
Nils ist unser Spezialist für User Experience (UX) und barrierefreie Webinhalte. Er ist unter anderem zertifizierter UX-Manager und Certified Professional in Accessibility Core Competencies (CPACC).
Hier kommst du zum LinkedIn-Profil von Nils