Roving tabindex
Índice de aba móvel
O índice de aba móvel dá ao grupo um ponto de parada na aba. As teclas de seta então movem o foco entre os itens dentro do grupo.
one tabindex=0 + remaining tabindex=-1 + arrow key swaps the active itemtabindex=0Itálico-1Link-1Citar-1focus() + swap tabindexone tabindex=0 + remaining tabindex=-1 + arrow key swaps the active itemA11YOutro exemplo
Uma barra de ferramentas começa com Negrito no tabindex 0. Os outros botões usam -1. Seta para a direita move 0 para Itálico.
Partes principais
- 01widget composto
- 02Um único Tabulador
- 03Itens inativos
- 04Regra de tecla de seta
- 05Item ativo atualizado
- 06Saída da aba
Use-o quando
Use-o para widgets compostos com comportamento documentado de teclas de seta. Mantenha exatamente um item na ordem normal do Tab.
Não o use quando
Não o use para links não relacionados ou para a página inteira. Não deixe dois itens com tabindex 0.
Nome usado no código
one tabindex=0 + remaining tabindex=-1 + arrow key swaps the active item Antes de lançar
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with Índice de aba móvel (Roving tabindex). User context: Uma barra de ferramentas começa com Negrito no tabindex 0. Os outros botões usam -1. Seta para a direita move 0 para Itálico. Recommended pattern: Índice de aba móvel (Roving tabindex). Why it fits: Use-o para widgets compostos com comportamento documentado de teclas de seta. Mantenha exatamente um item na ordem normal do Tab. Do not use it when: Não o use para links não relacionados ou para a página inteira. Não deixe dois itens com tabindex 0. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): É oficial para essa fonte. Outras plataformas ou equipes podem usar o termo de outra maneira. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Índice de aba móvel (Roving tabindex) is used now. Definition: O índice de aba móvel dá ao grupo um ponto de parada na aba. As teclas de seta então movem o foco entre os itens dentro do grupo. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.