Ordem de leitura
O que a norma pede
A ordem dos elementos no código é lógica e preserva o sentido e a forma de usar o conteúdo, porque é nessa ordem que o leitor de tela lê.
- 1.3.2 (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 informação numa sequência lógica que funcione em uma coluna e anote a ordem de leitura dos leiautes complexos. O leitor de tela lê na ordem do código, e não na ordem visual.
Card de preço
O preço aparece visualmente acima do nome do serviço.
Errado: Ordem visual só
No protótipo
Preço grande no topo, nome embaixo, sem indicar ordem de leitura.
Pode ser lido como preço antes de saber de quê.
Certo: Ordem de leitura anotada
No protótipo
Ordem: nome do serviço, preço, prazo.
A leitura faz sentido.
Escreva o HTML na ordem lógica de leitura e não use position: absolute ou propriedades como order para inverter o sentido do conteúdo.
Mensagem de erro
O erro aparece visualmente acima do formulário.
Errado: Erro no fim do código
<form>…</form> <div class="erro-topo">Corrija os campos abaixo</div> /* posicionado no topo com CSS */O leitor só lê o erro depois do formulário inteiro.
Certo: Erro antes no código
<div class="erro">Corrija os campos abaixo</div> <form>…</form>A ordem de leitura acompanha a lógica.
Inclua o teste com leitor de tela nos fluxos críticos, priorizando páginas de resultado e de erro. Ordem de leitura errada é um defeito invisível para quem enxerga.
Teste com leitor de tela
Nunca foi feito no produto.
Errado: Só teste visual
Processo
A aprovação é feita olhando a tela.
Ordens trocadas passam despercebidas.
Certo: Teste com leitor
Processo
Fluxos críticos testados com leitor de tela a cada versão.
Problemas de ordem são pegos.
Leia a página inteira com o comando de leitura contínua do leitor de tela e compare a sequência lida com a ordem visual. Desativar o CSS também mostra a ordem do código.
Card de preço
Leitura contínua.
Errado: Fora de ordem
“R$ 45,00”
“5 dias úteis”
“Certidão negativa”
O preço vem antes de saber o serviço.
Certo: Em ordem
“Certidão negativa”
“R$ 45,00”
“5 dias úteis”
Sentido preservado.
Escreva de forma que o texto faça sentido lido de cima para baixo, com o contexto antes do detalhe. Evite relacionar blocos com “ao lado” ou “acima”.
Aviso em coluna lateral
Um aviso na lateral se refere ao texto principal.
Errado: Referência visual
Texto
“Veja ao lado os documentos.”
Na leitura sequencial, não há “ao lado”.
Certo: Referência por nome
Texto
“Veja a seção ‘Documentos necessários’.”
Funciona em qualquer ordem visual.