Sites institucionais · GUIA PRÁTICO

Como testar navegação por teclado e foco visível

Percorra menus, formulários e controles sem mouse. Verifique a ordem de foco, o indicador visível e caminhos para pular blocos repetidos.

Um teste com teclado revela se alguém consegue percorrer links, menus, formulários e ações sem mouse ou tela sensível ao toque. É uma revisão manual simples, mas não substitui auditoria completa nem o teste com tecnologias assistivas.

Faça o percurso sem usar o ponteiro

Recarregue a página e mantenha as mãos longe do mouse. Use Tab para avançar e Shift + Tab para voltar. Use Enter para seguir um link ou ativar a maioria dos botões; Espaço pode ativar botões e controles como caixas de seleção. Setas podem ser necessárias dentro de componentes específicos.

Passe por cabeçalho, navegação, conteúdo principal, formulários, avisos, modais e rodapé. Tente concluir uma tarefa real, como encontrar um serviço, preencher um pedido e voltar à página inicial.

Observe três sinais

Foco visível: em cada parada deve ficar claro qual elemento está selecionado. A borda não pode sumir contra o fundo nem ficar coberta por um cabeçalho fixo. O critério WCAG de foco visível pede um modo de operação em que o foco do teclado possa ser percebido; veja a explicação da W3C sobre foco visível.

Ordem coerente: a sequência acompanha o sentido visual e não salta para regiões aleatórias. Se a página abre um painel, a pessoa precisa alcançar o conteúdo e fechá-lo sem ficar presa.

Atalhos úteis: páginas extensas se beneficiam de um link “Pular para o conteúdo” no começo, que fica visível quando recebe foco. A WAI inclui skip links entre as verificações básicas de acessibilidade.

Registre falhas reproduzíveis

Anote página, elemento, tecla pressionada e o que ocorreu. Exemplos: “Tab pula o botão de enviar”, “não é possível fechar o menu com teclado” ou “o foco está atrás do cabeçalho fixo”. Grave o percurso sem incluir dados pessoais. Corrija o comportamento e repita o mesmo caminho.

Um componente customizado pode exigir navegação adicional; não presuma que o botão funciona só porque aceita clique. Para menus suspensos de navegação, compare o padrão simples de divulgação com o exemplo da W3C para links expansíveis. Para uma janela modal, use o fluxo próprio descrito no guia validar diálogos modais acessíveis.

Lista de verificação

  • A página começa com um percurso útil e previsível.
  • O foco permanece visível em links, botões e campos.
  • Menus e controles podem ser abertos, usados e fechados.
  • Não há armadilha de foco fora de um diálogo modal intencional.
  • Um link permite pular blocos de navegação repetidos.
  • As tarefas principais podem ser terminadas só com teclado.

O guia da Google para desenvolvedores também recomenda sites acessíveis e funcionais em diferentes dispositivos. Isso não significa que este teste isolado garanta conformidade ou posição no Google.

Continue por aqui