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 de guias é uma parte importante de oferecer uma experiência de navegação pelo teclado tranquila.
Como testar manualmente
Para verificar se a ordem das guias do seu aplicativo é lógica, tente navegar pela página. A ordem em que os elementos são focados precisa seguir a ordem do DOM. Em geral, o foco precisa seguir a ordem de leitura, movendo-se da esquerda para a direita, de cima para baixo na página.
Saiba mais em Noções básicas de acesso por teclado.
Você consegue acessar todos os controles interativos na 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 um 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, reorganize os elementos no DOM para tornar a ordem das guias mais natural.
Se você não conseguir acessar todos os controles interativos na página,
a primeira correção recomendada é substituir os controles personalizados por alternativas HTML padronizadas.
Por exemplo,
substitua um <div> que atua como um botão por <button>.
O uso de elementos HTML integrados pode melhorar bastante a acessibilidade do seu site
e reduzir 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 tabindex.
Recursos
Código-fonte da auditoria A página tem uma ordem lógica de guias