Navigation zwischen Tabs mit Pfeiltasten
Ermöglichen Sie, Tabs per Tastatur zu wechseln.
Navigation zwischen Tabs mit Pfeiltasten ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Tabs Are Not Just Clickable
A correct tab set is driven by the keyboard, not the mouse alone. The APG pattern expects arrow keys to move between tabs.
The Tablist Is One Tab Stop
Pressing Tab should land on the tab set just once, not stop on every tab. The whole tablist behaves as a single stop in the page order.
Only One Tab Is Tabbable
Give the active tab tabindex="0" and every other tab tabindex="-1". This is the roving tabindex that keeps Tab from hitting them all.
<button role="tab" tabindex="0">Profile</button>Arrow Keys Move Focus
Inside a horizontal tablist, Right and Left arrows move focus from tab to tab. This is how keyboard users explore the set.
Up and Down for Vertical Tabs
If your tabs stack vertically, use Up and Down arrows instead. Set aria-orientation="vertical" so assistive tech knows the layout.
<div role="tablist" aria-orientation="vertical">...</div>Wrap Around at the Ends
When focus is on the last tab and the user presses the next arrow, wrap back to the first. Looping keeps navigation smooth and predictable.
Home and End Jump Far
Add two shortcuts: Home moves focus to the first tab and End moves it to the last. Long tab sets become much faster to navigate.
Move the Roving Index
When an arrow shifts focus, update the tabindex: set the newly focused tab to 0 and the old one to -1, then call focus on it.
newTab.tabIndex = 0; oldTab.tabIndex = -1; newTab.focus();Automatic Activation
With automatic activation, focusing a tab also selects it and shows its panel. It feels instant but can be heavy if panels are costly.
Manual Activation
With manual activation, arrows only move focus; the user presses Enter or Space to select. Prefer this when revealing a panel is expensive.
Why This Matters
Without arrow support, keyboard users must Tab through every tab and panel. Proper key handling makes the widget efficient, not just reachable.
Quick Check
Focus is on a tab in a horizontal tablist. The user presses the Right arrow. What should happen?
Recap: Arrow Navigation
You learned tabs use a roving tabindex with arrow keys, plus Home and End. Choose automatic or manual activation based on panel cost.
Häufig gestellte Fragen
Ist die Lektion „Navigation zwischen Tabs mit Pfeiltasten“ kostenlos?
Ja — der vollständige Text von „Navigation zwischen Tabs mit Pfeiltasten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Navigation zwischen Tabs mit Pfeiltasten“?
Ermöglichen Sie, Tabs per Tastatur zu wechseln. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Navigation zwischen Tabs mit Pfeiltasten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das Tabs-Muster: tablist, tab, tabpanel
- Navigation zwischen Tabs mit Pfeiltasten
- Akkordeons mit Button und aria-expanded
- Disclosure oder Tabs: das richtige Muster wählen