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