Ordem de foco previsível
O que a norma pede
O foco do teclado percorre os elementos numa ordem lógica, que acompanha a leitura da página e não muda o sentido nem a forma de usar o conteúdo.
- 2.4.3 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Organize a tela para que a ordem de leitura fique clara e anote no protótipo a ordem de foco das telas com mais de uma coluna. O botão de envio deve vir depois dos campos que ele envia.
Formulário em duas colunas
A tela de cadastro tem dados pessoais à esquerda e endereço à direita.
Errado: Ordem não definida
No protótipo
Campos lado a lado em linhas, sem indicação de ordem.
O foco pode pular entre colunas: nome, CEP, CPF, rua…
Certo: Ordem anotada
No protótipo
Ordem de foco: coluna 1 (nome, CPF, telefone), depois coluna 2 (CEP, rua, número).
A ordem acompanha os grupos de informação.
Mantenha a ordem do HTML igual à ordem visual. Evite tabindex maior que zero e reordenações feitas só com CSS, como order e row-reverse, que mudam o que se vê sem mudar o caminho do foco.
Botões do rodapé do formulário
O leiaute mostra “Cancelar” à esquerda e “Enviar” à direita.
Errado: Ordem forçada com tabindex
<button tabindex="2">Cancelar</button> <button tabindex="1">Enviar</button>O foco pula para fora da ordem da página.
Certo: Ordem do código igual à visual
<button type="button">Cancelar</button> <button type="submit">Enviar</button>O foco segue o que a pessoa vê.
Peça a verificação da ordem de foco sempre que um leiaute for reorganizado e inclua esse ponto nos critérios de aceite das telas com formulário. Uma ordem confusa num fluxo de serviço é defeito de alta prioridade.
Redesenho da página inicial
A nova versão troca de lugar a busca e o menu.
Errado: Mudança só no visual
Entrega
Elementos reposicionados com CSS, sem revisar a ordem do código.
O foco vai para o rodapé antes do menu.
Certo: Visual e código juntos
Entrega
Critério de aceite: “A ordem de foco segue a ordem visual nova.”
O redesenho não quebra a navegação.
Percorra a página com Tab e compare o caminho do foco com a ordem em que você leria a tela, inclusive depois de abrir menus e modais. Registre o ponto exato em que a ordem salta para trás ou para outra área.
Cadastro com dados e endereço
Navegação com Tab a partir do primeiro campo.
Errado: Foco pula entre colunas
Tab → Nome
Tab → CEP
Tab → CPF
Tab → Rua
A ordem mistura os dois grupos.
Certo: Foco segue os grupos
Tab → Nome
Tab → CPF
Tab → CEP
Tab → Rua
A ordem é previsível.
Coloque as instruções antes dos campos a que se referem e descreva as etapas na ordem em que acontecem. Evite remeter a algo que só aparece mais adiante na página.
Instrução do envio de documentos
A página pede o upload de documentos pessoais.
Errado: Instrução depois do campo
Na página
[Enviar arquivo] … “Atenção: envie o arquivo em PDF com até 5 MB.”
Quem navega em ordem descobre a regra depois de errar.
Certo: Instrução antes do campo
Na página
“Envie o documento em PDF com até 5 MB.” [Enviar arquivo]
A pessoa lê a regra antes de agir.