Tastatur & Fokus

Um die Barrierefreiheit einer Website und ihrer Navigation zu gewährleisten, müssen diese auch mit alternativen Hilfsmitteln abseits einer Maus bedienbar sein. Eine zentrale Rolle spielt dabei die Tastatur. So können beispielsweise Menschen mit motorischen Einschränkungen oder sehbeeinträchtigte Menschen mit Hilfstechnologien wie Screenreadern durch die Website navigieren. Wir fokussieren uns an dieser Stelle nur auf die Nutzung der Tastatur, die Optimierung für Screenreader wird im gleichnamigen Kapitel behandelt.

Funktionsweise der Tastatur

Obwohl auf der Tastatur eine Vielzahl von Tasten zur Verfügung steht, beschränkt sich die Auswahl auf ein paar wenige Tasten beziehungsweise Tastenkombinationen. Wenn wir nachfolgend von fokussierbaren Elementen sprechen, sind damit Hyperlinks, Formularfelder, Buttons und andere UI-Elemente wie Select oder Radio gemeint. Zur Nutzung der Website werden folgende Tasten benötigt:

Tab: Zum nächsten fokussierbaren Element springen
Shift + Tab: Zum vorherigen fokussierbaren Element springen
Enter: Link oder Button aktivieren
Space: Buttons oder andere Controls aktivieren
Esc: Geöffnete Menüs oder Dialoge schließen
Pfeiltasten: Zusätzliches Mittel zur Navigation (Zum Beispiel in einer Tab-Navigation)

„Für zentrale Navigations- und Einstiegsangebote sowie Angebote, die eine Nutzerinteraktion ermöglichen, beispielsweise Formulare und die Durchführung von Authentifizierungs-, Identifizierungs- und Zahlungsprozessen, soll ein höchstmögliches Maß an Barrierefreiheit angestrebt werden.“

§ 3 Abs. 4 BITV 2.0: Anzuwendende Standards

Logische Fokus-Reihenfolge

Die visuelle Reihenfolge von Elementen ist nicht immer gleich der Fokus-Reihenfolge. Ein konkretes Beispiel für dieses Verhalten ist ein Element, das per CSS visuell an einer anderen Stelle positioniert wird, im Quellcode aber noch dieselbe Position hat. Die Fokus-Reihenfolge orientiert sich an der Position der Elemente im Quellcode, wenn diese nicht durch Befehle geändert wurden. Für so eine Änderung der Position wird tabindex verwendet, allerdings ist der Befehl für einen semantisch sauberen Quellcode nicht notwendig. Die Nutzung von tabindex hat folgende Auswirkungen:

tabindex="0": Das Element wird in die natürliche Tab-Reihenfolge entsprechend seiner Position im Quellcode aufgenommen
tabindex="-1": Das Element wird aus der natürlichen Tab-Reihenfolge entfernt
tabindex="1", tabindex="2"…: Das Element wird vor Elementen der natürlichen Tab-Reihenfolge eingeordnet und erhält somit eine höhere Priorität

Besonders auf einen positiven tabindex sollte aber auf jeden Fall verzichtet werden, um die natürliche Fokus-Reihenfolge nicht zu beeinflussen. Ist ein Element mit einem positiven Wert beispielsweise mitten innerhalb der Website, wird dieses als erstes fokussiert, bevor die natürliche Reihenfolge abgearbeitet wird. Auch wenn die Reihenfolge bei der Erstellung Sinn ergeben sollte, ist sie für die Nutzer*innen unberechenbar.

Sichtbarer Tastaturfokus

Um den Nutzer*innen zu vermitteln, welches Element derzeit fokussiert ist, muss dieses entsprechend hervorgehoben werden. Dafür lässt sich die Pseudoklasse :focus-visible verwenden, die das fokussierte Element beispielsweise bei der Nutzung der Tastatur hervorhebt. Wie dieser sichtbare Fokus umgesetzt wird, ist den Ersteller*innen der Website selbst überlassen, eine etablierte Darstellungsmethode der meisten Browser ist allerdings der blaue Fokus-Ring. Dieser lässt sich wie folgt umsetzen:

:focus-visible {
    outline: 3px solid #005FCC;
    outline-offset: 2px;
}

Es empfiehlt sich, den sichtbaren Tastaturfokus konsistent zu verwenden. Der blaue Fokus-Ring kann über den folgenden Befehl zwar deaktiviert oder durch eigene Gestaltung ersetzt werden, sollte aber nicht komplett deaktiviert werden:

*:focus {
    outline: none;
}

Der Tastaturfokus sollte außerdem nicht durch andere Elemente wie beispielsweise Cookie-Banner oder Overlays verdeckt werden.

Die vielseitigen Darstellungsmöglichkeiten von Menüs bringen entsprechende Anforderungen bei der Verwendung mit der Tastatur mit sich. Handelt es sich beispielsweise um ein Mega-Menü oder ein Flyout-Menü, sollten sich die Untermenüs nicht einfach beim Fokus des übergeordneten Elements öffnen, sondern ein kontrolliertes Verhalten ermöglichen. Bei Mega- und Flyout-Menüs müssen auch Untermenüs vollständig mit der Tastatur erreichbar sein. Besitzt ein Navigationspunkt ein Untermenü, sollte dieses kontrolliert geöffnet oder geschlossen werden können. Die dafür notwendige semantische Struktur haben wir im Kapitel “Mega- & Flyout-Menüs” behandelt.

Sobald ein Untermenü geöffnet ist, führt der nächste Tab zum ersten Element dieses Menüs. Das Untermenü kann über die ESC-Taste oder den selben Toggle wieder geschlossen werden. Auch wenn der Fokus das Untermenü verlässt, kann dieses geschlossen werden, wie es auf dieser Website umgesetzt wurde.

Screenshot: Navi
Beim geöffneten Mega-Menü von Navi zeigt der sichtbare Fokusrahmen, welches Element aktuell mit der Tastatur fokussiert ist. Die enthaltenen Navigationsziele bleiben anschließend über die Tab-Taste erreichbar.

Auch Menüs auf mobilen Geräten sollten für alternative Hilfsmittel optimiert sein. Die meisten Websites arbeiten mit einem Overlay-Menü, das über einen Toggle geöffnet wird. Dieses Verhalten gleicht im Grunde der Verwendung von Mega- und Flyout-Menüs, führt den Tastaturfokus allerdings direkt zum ersten fokussierbaren Element im Menü oder direkt zum Close-Button. Bei Overlay-Menüs, die sich wie ein modaler Dialog verhalten, empfiehlt es sich, mit einer sogenannten Focus Trap zu arbeiten, die verhindert, dass Nutzer*innen versehentlich Elemente außerhalb des Menüs fokussieren, während dieses noch geöffnet ist. Wenn das Menü über den Close-Button geschlossen wird, sollte der Tastaturfokus wieder zum Toggle-Button führen.

Bei der Navigation mit der Tastatur werden fokussierbare Elemente grundsätzlich entsprechend ihrer Reihenfolge im Dokument durchlaufen. Befindet sich am Anfang jeder Seite eine umfangreiche Hauptnavigation, müsse Nutzer*innen diese möglicherweise bei jedem Seitenaufruf erneut durchlaufen, bevor sie den eigentlichen Inhalt erreichen.

Skiplinks ermöglichen es, wiederkehrende Bereiche zu überspringen und direkt zum relevanten Abschnitt der Seite zu gelangen. Diese führen im Regelfall zum Inhalt, können aber auch mit einem Skiplink zum Menü und zur Fußzeile ergänzt werden.

<a class="skip-link" href="#main-content">
    Zum Inhalt springen
</a>

...

<main id="main-content">
    ...
</main>

Skiplinks sollten möglichst die ersten fokussierbaren Elemente der Seite sein. Visuell können diese Links verborgen werden und sichtbar werden, wenn sie den Tastaturfokus erhalten:

.skip-link {
    position: absolute;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

Bei Bedarf können auch andere wiederkehrende Bereiche durch Skiplinks überspringbar werden. Sie sollten lediglich einen direkten Weg zu relevanten Bereichen der Website ermöglichen und unnötige Tastatureingaben reduzieren.

Zusammenfassung

Eine barrierefreie Navigation muss vollständig mit der Tastatur bedienbar sein und jederzeit anzeigen, welches Element aktuell fokussiert ist. Die Fokus-Reihenfolge sollte dabei der logischen Reihenfolge des Dokuments folgen und nicht durch positive tabindex-Werte künstlich verändert werden.

Ein sichtbarer Tastaturfokus ermöglicht Orientierung, Skiplinks machen wiederkehrende Bereiche überspringbar und ermöglichen einen direkten Zugang zu relevanten Inhalten. Bei komplexen Navigationen muss zusätzlich sichergestellt werden, dass Untermenüs kontrolliert geöffnet oder geschlossen werden können und der Fokus nachvollziehbar geführt wird.

Quellen

  1. Bypass Blocks (Level A). W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
  2. Focus Visible (Level AA). W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
  3. § 3 Anzuwendende Standards (BITV 2.0). Gesetze im Internet. Abgerufen am 01.11.2026.