Keyboard Accessibility
Ohne Maus durch die ganze Seite
Sprunglink, Aufklappschalter, Scrollbereich: drei Stellen im Tastaturweg.
Tastatur-Linienplan
Der Fokus braucht eine Route – und jeder Halt eine Funktion
Tab führt zwischen Bedienelementen. Erst am Ziel entscheidet der Elementtyp, ob Enter, Leertaste, Pfeile oder Escape richtig sind.
Tab-Reihenfolge
Fokus sichtbar verfolgen- 01SprunglinkErscheint beim ersten Tab und führt zum Hauptinhalt.Start
- 02NavigationslinkDer Fokusrahmen zeigt genau, welcher Link folgt.Enter
- 03OptionsfeldgruppeEin Tab-Stopp hinein, dann Auswahl innerhalb der Gruppe.← ↑ ↓ →
- 04AufklappschalterSein sichtbarer Name erklärt, welcher Inhalt folgt.Enter · Space
- 05Dialog öffnenNach dem Öffnen liegt der Fokus im Dialog.Fokus
- 06Modaler DialogTab bleibt im Fenster. Escape schließt; der Fokus kehrt zu 05 zurück.Esc ↩
- 07Nächster LinkNach dem geschlossenen Dialog geht die normale Route weiter.Ziel
Vier Bewegungen
Welche Taste wann übernimmt
- TabShift + Tab
- Zwischen Komponentenvorwärts und rückwärts in logischer Reihenfolge
- EnterSpace
- Am BedienelementLinks mit Enter, Schalter mit Enter oder Leertaste
- ← ↑ ↓ →
- Innerhalb einer Komponentezum Beispiel in Optionsfeldern, Tabs oder echten ARIA-Menüs
- Esc
- Aus einem geöffneten KontextDialog oder Popup schließen und sinnvoll zurückkehren
Implementierungsvergleich
Gleiches Aussehen, anderer Lieferumfang
Eine ARIA-Rolle benennt ein Element. Sie programmiert dessen Tastaturverhalten nicht.
<button>Speichern</button>- im Tab-Weg
- Enter und Leertaste
- Rolle und Name aus HTML
<div role="button">Speichern</div>- Fokus selbst ergänzen
- Tasten selbst behandeln
- Zustände selbst synchronisieren
Prüfprotokoll
Eine Runde deckt drei Fehlerklassen auf
- RouteNeu laden, Maus weglegen, Tab und Shift + Tab drücken.
Jede Funktion muss erreichbar sein; die Reihenfolge soll dem sichtbaren Aufbau folgen.
- SignalBei jedem Halt den Fokus benennen.
Wenn Sie nicht sofort sehen, wo Sie sind, ist der Fokusindikator zu schwach oder verdeckt.
- FunktionLinks, Schalter und Gruppen mit ihren erwarteten Tasten bedienen.
Bei eigenen Widgets gilt das WAI-ARIA-Muster des konkreten Elements.
- AusgangJede geöffnete Ebene wieder verlassen.
Dialoge schließen, Popups verlassen und kontrollieren, wohin der Fokus zurückkehrt.
AusgelassenKlickbare Fläche fehlt im Tab-Weg.
UnsichtbarFunktion ist erreichbar, aber Fokus nicht erkennbar.
GefangenFokus kommt hinein, aber nicht wieder heraus.
Aus dem Prüfbericht
Drei Befunde im Tastaturweg
Kritisch Der Aufklappschalter besteht nur aus einem Pfeil Regel summary-name
Ein leeres summary nennt sein Thema nicht. Schreiben Sie den Titel des Bereichs direkt in das summary.
Kritisch Der Scrollkasten nimmt keine Tastatur an Regel scrollable-region-focusable
Browser nehmen Scrollbereiche nicht einheitlich in den Tab-Weg auf. Mit tabindex null wird der Kasten gezielt erreichbar und lässt sich mit Pfeiltasten scrollen.
Prüfen Kein Weg an der Navigation vorbei Regel bypass
Ohne Sprunglink, Hauptbereich und Überschriften führt jeder Tastaturweg durch das ganze Menü. Ein main und ein Sprunglink kürzen ihn.
Zum Mitnehmen
Der Tastaturweg, korrigiert
Ein Sprunglink, ein benannter Schalter, ein erreichbarer Scrollbereich.
Korrektur in 3 Schritten ansehen
Sprunglink und Hauptbereich ergänzen
Der erste Tab führt an der Navigation vorbei zum Inhalt. Sichtbar wird der Sprunglink erst, sobald er den Fokus hat.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <nav>…</nav> <div class="inhalt"> <h2 role="presentation">Öffnungszeiten</h2> </div> </body>Nachher
<body> <a class="skip-link" href="#inhalt">Zum Inhalt springen</a> <nav>…</nav> <main id="inhalt" class="inhalt"> <h2>Öffnungszeiten</h2> </main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite neu und drücken Sie Tab. Der Sprunglink erscheint als erstes.
Den Aufklappschalter benennen
Das Thema steht im summary selbst. So nennt der Schalter seinen Inhalt auch im eingeklappten Zustand.
KorrekturvergleichSchritt 2 · HTML Vorher
<details> <summary></summary> <p>Montag bis Freitag von 9 bis 17 Uhr.</p> </details>Nachher
<details> <summary>Öffnungszeiten der Werkstatt</summary> <p>Montag bis Freitag von 9 bis 17 Uhr.</p> </details>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf den Schalter. Ein Vorleseprogramm nennt jetzt sein Thema.
Den Scrollbereich anspringbar machen
Mit tabindex null steht der Kasten im Tab-Weg. Rolle und aria-label sagen dazu, was in ihm steht.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="protokoll" style="max-height:6rem;overflow:auto"> <p>Schritt 01 bis Schritt 24 …</p> </div>Nachher
<div class="protokoll" style="max-height:6rem;overflow:auto" tabindex="0" role="region" aria-label="Schrittprotokoll"> <p>Schritt 01 bis Schritt 24 …</p> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab in den Kasten und drücken Sie Pfeil nach unten. Der Inhalt bewegt sich.