Roving tabindex in Widgets verwalten
Ermöglichen Sie, sich mit den Pfeiltasten innerhalb eines zusammengesetzten Steuerelements zu bewegen.
Roving tabindex in Widgets verwalten ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.
One Stop for a Whole Widget
In a toolbar or radio group, Tab should reach the widget once, not every item. Roving tabindex is the pattern that makes this work.
The Core Idea
Exactly one item holds tabindex="0" at a time. Every other item gets tabindex="-1", so Tab enters the group at a single point.
Initial Setup
On load, give the first or selected item tabindex="0" and set the rest to tabindex="-1". That is the resting state of the group.
<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>Arrow Keys Move Within
Once focus is inside, the user moves between items with the arrow keys, not Tab. Tab still exits the whole widget.
The Roving Step
On an arrow press you do two things: set the old item to -1 and the new item to 0, then call focus() on the new one. 🧭
old.tabIndex = -1;
next.tabIndex = 0;
next.focus();Why Only One Zero
Keeping a single tabindex="0" means Tab always lands on the item the user last used, so returning to the widget feels natural.
Match the APG Pattern
The ARIA Authoring Practices Guide specifies the exact keys for each widget. Follow its keyboard map rather than inventing one.
Optional Wrapping
Many widgets wrap arrow movement: pressing right on the last item loops to the first. Check the APG for whether your pattern should wrap.
Home and End Too
Composite widgets often add Home and End to jump to the first and last items, a small touch that speeds up navigation.
Roving vs aria-activedescendant
Roving tabindex moves real DOM focus. The alternative, aria-activedescendant, keeps focus on a container and points to a virtual active item.
Test the Whole Cycle
Tab in, arrow through every item, Tab back out, then Tab in again and confirm focus returns to the last-used item.
Quick Check
In a roving tabindex toolbar, how many items have tabindex="0" at any moment?
Recap
You mastered roving tabindex: one item at 0, the rest at -1, arrow keys rove the 0 between them, and Tab moves past the whole widget. 🚀
Häufig gestellte Fragen
Ist die Lektion „Roving tabindex in Widgets verwalten“ kostenlos?
Ja — der vollständige Text von „Roving tabindex in Widgets verwalten“ 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 „Roving tabindex in Widgets verwalten“?
Ermöglichen Sie, sich mit den Pfeiltasten innerhalb eines zusammengesetzten Steuerelements zu bewegen. 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 4 von 4.
Wie lange dauert die Lektion „Roving tabindex in Widgets verwalten“?
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
- tabindex 0, -1 und niemals positiv
- Fokus nach einer Aktion verschieben
- Fokus beim Schließen einer Ebene zurückgeben
- Roving tabindex in Widgets verwalten