Navegação entre abas com as teclas de seta

Um conjunto de abas correto é operado pelo teclado, não apenas pelo mouse. O padrão APG espera que as teclas de seta movam o foco entre as abas.

Pressionar Tab deve levar ao conjunto de abas uma única vez, não parar em cada aba. A tablist inteira se comporta como um único ponto de parada na ordem da página.

Dê à aba ativa tabindex="0" e a todas as outras tabindex="-1". Esse é o tabindex móvel, que impede o Tab de passar por todas elas.

Dentro de uma tablist horizontal, as setas Direita e Esquerda movem o foco de uma aba para outra. É assim que os usuários do teclado exploram o conjunto.

Se suas abas estiverem empilhadas verticalmente, use as setas Cima e Baixo. Defina aria-orientation="vertical" para que as tecnologias assistivas conheçam o layout.

Quando o foco estiver na última aba e o usuário pressionar a próxima seta, faça o ciclo voltar à primeira. Esse ciclo mantém a navegação fluida e previsível.

Adicione dois atalhos: Home move o foco para a primeira aba, e End move-o para a última. Assim, conjuntos longos de abas ficam muito mais rápidos de percorrer.

Quando uma seta move o foco, atualize o índice de tabulação: defina a aba que recebeu o foco como 0 e a anterior como -1; em seguida, chame focus nela.

Com a ativação automática, focar uma aba também a seleciona e exibe o painel correspondente. A resposta parece instantânea, mas pode ser pesada quando os painéis têm um custo alto.

Com a ativação manual, as setas apenas movem o foco; o usuário pressiona Enter ou Espaço para selecionar. Prefira esta opção quando exibir um painel for custoso.

Sem suporte às setas, usuários de teclado precisam usar Tab para percorrer cada aba e painel. O tratamento adequado das teclas torna o componente eficiente, não apenas acessível.

Você aprendeu que as abas usam um índice de tabulação móvel com as teclas de seta, além de Home e End. Escolha a ativação automática ou manual com base no custo do painel.