Keyboard Navigation Accessibility
Der Weg durch die Navigation, ohne Maus
Sprunglink, Menüknopf, Untermenü, geschlossenes Panel: vier Stellen.
Fokus-Fahrplan
Tab fährt durch die Seite. Pfeile bewegen sich im Widget.
Eine gute Tastaturroute hat einen Einstieg, einen sichtbaren Fokus und einen sicheren Ausgang.
- 1Zum InhaltTab erreicht den Sprunglink.
- 3SpeichernTab verlässt die Gruppe. Umschalt + Tab führt zurück.
Tab verbindet die Seite
Links, Schaltflächen und Felder folgen der sichtbaren Reihenfolge. Positive tabindex-Werte reißen diese Route auseinander.
Pfeile ordnen eine Gruppe
In einer echten Toolbar, Tab-Liste oder Radiogruppe bewegen Pfeile den Fokus intern. Normale Navigationslinks brauchen diese Sonderlogik nicht.
Der Ausgang bleibt offen
Tab oder Umschalt + Tab führt aus jeder Gruppe heraus. Öffnet ein Element eine Ebene, schließt Escape sie und gibt den Fokus an den Auslöser zurück.
Beispiel: Website-Navigation
Ein Aufklappmenü bleibt Teil des normalen Tab-Wegs
Enter oder Leertaste öffnet den Knopf „Leistungen“. Danach erreicht Tab die sichtbaren Unterpunkte. Pfeiltasten dürfen ergänzen, dürfen Tab aber nicht ersetzen.
Esc schließt die Liste und setzt den Fokus auf „Leistungen“.
const nav = document.querySelector('#hauptnavigation');
const knopf = nav.querySelector('[aria-controls="leistungen"]');
const liste = nav.querySelector('#leistungen');
function setzeOffen(offen) {
knopf.setAttribute('aria-expanded', String(offen));
liste.hidden = !offen;
}
knopf.addEventListener('click', () => {
setzeOffen(knopf.getAttribute('aria-expanded') !== 'true');
});
nav.addEventListener('keydown', (ereignis) => {
if (ereignis.key !== 'Escape' || liste.hidden) return;
setzeOffen(false);
knopf.focus();
});
nav.addEventListener('focusout', () => {
requestAnimationFrame(() => {
if (!nav.contains(document.activeElement)) setzeOffen(false);
});
});Prüfprotokoll
Zeichnen Sie die Route auf, statt nur Tasten abzuhaken
Schreiben Sie jedes fokussierte Element in Reihenfolge mit. Das zeigt Sprünge, unsichtbare Stopps und Fangkreise sofort.
- TabVorwärtsJeder Fokus ist sichtbar und folgt der Seite.
- ⇧ TabRückwärtsDie Route funktioniert vollständig zurück.
- EnterAuslösenLink oder Knopf tut dasselbe wie per Zeiger.
- LeertasteKnöpfeSchaltflächen wechseln ihren Zustand.
- ← →WidgetNur Gruppen mit eigenem Tastaturmuster wechseln intern.
- EscSchließenTemporäre Ebenen verschwinden, der Fokus bleibt sinnvoll.
Der Test endet erst hinter dem Baustein: Erreichen Sie das nächste Element und kommen Sie mit Umschalt + Tab wieder zurück, gibt es keinen Tastatur-Fangkreis.
Aus dem Prüfbericht
Vier Befunde in der Navigation
Prüfen Jeder Tastaturweg führt durch das ganze Menü Regel bypass
Ohne Sprunglink und Hauptbereich beginnt jede Seite mit allen Menüpunkten. Ein main und ein Sprunglink verkürzen den Weg.
Kritisch Der Menüknopf zeigt nur drei Striche Regel button-name
Das Symbol trägt aria-hidden und lässt den Knopf namenlos. Ein aria-label benennt die Aktion, die er in der Navigation auslöst.
Kritisch Der Pfeil im Untermenü hat keinen Text Regel link-name
Ein Menüpunkt aus reinem Symbol steht ohne Ziel in der Linkliste. Der Name des Unterpunkts gehört in den Link.
Zum Mitnehmen
Die Navigation, korrigiert
Ein Sprunglink, zwei Namen, ein wirklich geschlossenes Untermenü.
Korrektur in 3 Schritten ansehen
Sprunglink vor die Navigation setzen
Der Link steht als erstes im body und führt zum main. Sichtbar wird er, sobald er den Fokus hat.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <nav id="hauptmenue">…</nav> <div id="inhalt">…</div> </body>Nachher
<body> <a class="skip-link" href="#inhalt">Zum Inhalt springen</a> <nav id="hauptmenue">…</nav> <main id="inhalt">…</main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite neu und drücken Sie einmal Tab. Der Sprunglink wird sichtbar.
Menüknopf und Unterpunkt benennen
Das Symbol bleibt sichtbar und stumm. Ein aria-label am Knopf und der Name des Unterpunkts im Link liefern die Wörter.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-expanded="false"> <span aria-hidden="true">☰</span> </button> <a href="/leistungen"><span aria-hidden="true">›</span></a>Nachher
<button type="button" aria-expanded="false" aria-label="Menü öffnen"> <span aria-hidden="true">☰</span> </button> <a href="/leistungen">Leistungen</a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag nennt seinen Punkt.
Das geschlossene Untermenü ausblenden
hidden nimmt die Unterpunkte aus Bild und Tab-Weg. Ein aria-hidden allein lässt sie erreichbar und stumm.
KorrekturvergleichSchritt 3 · HTML Vorher
<ul id="untermenue" aria-hidden="true"> <li><a href="/leistungen/audit">Audit</a></li> </ul>Nachher
<ul id="untermenue" hidden> <li><a href="/leistungen/audit">Audit</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie bei geschlossenem Menü mit Tab weiter. Der Fokus überspringt die Unterpunkte.