Управление перемещаемым tabindex в виджетах
Позвольте стрелкам перемещать фокус внутри составного элемента управления.
«Управление перемещаемым tabindex в виджетах» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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. 🚀
Часто задаваемые вопросы
Урок «Управление перемещаемым tabindex в виджетах» бесплатный?
Да — полный текст урока «Управление перемещаемым tabindex в виджетах» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Управление перемещаемым tabindex в виджетах»?
Позвольте стрелкам перемещать фокус внутри составного элемента управления. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Управление перемещаемым tabindex в виджетах»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- tabindex 0, -1 и никогда не положительный
- Перемещение фокуса после действия
- Возврат фокуса после закрытия слоя
- Управление перемещаемым tabindex в виджетах