Muitos usuários diferentes dependem do teclado para navegar em aplicativos, desde usuários com deficiências motoras temporárias e permanentes até usuários que usam atalhos de teclado para serem mais eficientes e produtivos. Uma ordem lógica da tabulação é uma parte importante de fornecer uma experiência de navegação suave pelo teclado.
Como testar manualmente
Para verificar se a ordem de tabulação do aplicativo é lógica, tente navegar pela página. A ordem em que os elementos estão focados deve seguir a ordem do DOM. Em geral, o foco precisa seguir a ordem de leitura, movendo-se da esquerda para a direita, da parte de cima para a parte de baixo da página.
Saiba mais em Noções básicas sobre o acesso ao teclado.
Você consegue acessar todos os controles interativos da página?
Caso contrário, talvez seja necessário usar tabindex para melhorar a capacidade de foco desses controles.
A regra geral é que qualquer controle com que o usuário possa interagir ou fornecer entrada
deve ser focado e mostrar um indicador de foco.
Se um usuário de teclado não conseguir ver o que está com foco, ele não vai conseguir interagir com a página.
Como corrigir
Se a ordem de foco parecer errada, você deve reorganizar os elementos no DOM para tornar a ordem das guias mais natural.
Se você não conseguir acessar todos os controles interativos da página,
a primeira correção é substituir os controles personalizados por alternativas HTML padronizadas.
Por exemplo,
substitua um <div> que atua como um botão por <button>.
Usar elementos HTML integrados pode melhorar muito a acessibilidade do seu site,
e diminuir significativamente a carga de trabalho.
Se você estiver criando componentes interativos personalizados sem um equivalente HTML padronizado,
use o atributo tabindex para garantir que eles sejam acessíveis por teclado.
Exemplo:
<div tabindex="0">Focus me with the TAB key</div>
Saiba mais em Controlar o foco com o tabindex.
Recursos
Código-fonte da auditoria A página tem uma ordem lógica de guias