Gerenciando tabindex móvel em componentes
Permita que as teclas de seta movam o foco dentro de um controle composto.
Gerenciando tabindex móvel em componentes é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Uma parada para um widget inteiro
Em uma barra de ferramentas ou grupo de opções, Tab deve chegar ao widget uma vez, não a cada item. Roving tabindex é o padrão que torna isso possível.
A ideia principal
Exatamente um item mantém tabindex="0" por vez. Todos os outros recebem tabindex="-1", fazendo com que Tab entre no grupo por um único ponto.
Configuração inicial
Ao carregar, dê tabindex="0" ao primeiro item ou ao item selecionado e defina tabindex="-1" para os demais. Esse é o estado de repouso do grupo.
<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>As teclas de seta movem-se dentro do grupo
Depois que o focus estiver dentro, o usuário se move entre os itens com as teclas de seta, não com Tab. Tab ainda sai do widget inteiro.
A etapa do roving
Ao pressionar uma seta, você faz duas coisas: define o item antigo como -1 e o novo como 0, depois chama focus() no novo item. 🧭
old.tabIndex = -1;
next.tabIndex = 0;
next.focus();Por que apenas um zero
Manter um único tabindex="0" faz com que Tab sempre chegue ao item usado por último, tornando natural retornar ao widget.
Siga o padrão do APG
O ARIA Authoring Practices Guide especifica as teclas exatas para cada widget. Siga seu mapa do teclado em vez de inventar um.
Adição opcional de ciclo
Muitos widgets fazem o movimento das setas circular: pressionar a seta para a direita no último item leva ao primeiro. Consulte o APG para saber se o seu padrão deve fazer esse ciclo.
Home e End também
Widgets compostos geralmente acrescentam Home e End para saltar para o primeiro e o último item, um pequeno detalhe que acelera a navegação.
Roving versus aria-activedescendant
O tabindex móvel desloca o foco real no DOM. A alternativa, aria-activedescendant, mantém o foco em um contêiner e aponta para um item ativo virtual.
Teste o ciclo completo
Entre com Tab, percorra todos os itens com as setas, saia novamente com Tab, depois entre com Tab outra vez e confirme que o foco retorna ao último item usado.
Verificação rápida
Em uma barra de ferramentas com tabindex móvel, quantos itens têm tabindex="0" em um determinado momento?
Recapitulação
Você dominou o tabindex móvel: um item fica em 0, os demais em -1, as teclas de seta movem o 0 entre eles e Tab passa por todo o widget. 🚀
Perguntas Frequentes
A aula “Gerenciando tabindex móvel em componentes” é grátis?
Sim — o texto completo de “Gerenciando tabindex móvel em componentes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Gerenciando tabindex móvel em componentes”?
Permita que as teclas de seta movam o foco dentro de um controle composto. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Gerenciando tabindex móvel em componentes”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- tabindex 0, -1 e nunca positivo
- Movendo o foco após uma ação
- Restaurando o foco quando uma camada é fechada
- Gerenciando tabindex móvel em componentes