Ordem de apresentação
O que a norma pede
A ordem em que os elementos aparecem na tela preserva o sentido e a forma de usar o conteúdo.
- 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 o conteúdo na ordem em que a pessoa vai usá-lo e revise essa ordem na versão de celular, que empilha as colunas. A leitura precisa fazer sentido na sequência em que as coisas aparecem.
Página de resultado
A página mostra o resultado e as instruções.
Errado: Ordem confusa no celular
No protótipo
No celular, as instruções aparecem antes do resultado a que se referem.
A pessoa lê instruções sem saber para quê.
Certo: Ordem lógica
No protótipo
Resultado, depois “O que fazer agora”, em todas as larguras.
A leitura faz sentido.
Mantenha a ordem do código como base da ordem visual e evite reordenar com CSS quando isso muda o sentido. Teste a ordem em todos os pontos de quebra do leiaute.
Colunas empilhadas
No celular, as colunas se empilham.
Errado: Reordenação que confunde
.instrucoes { order: -1; } /* sobe as instruções no celular */As instruções aparecem antes do contexto.
Certo: Ordem natural
/* sem reordenação: resultado, depois instruções */A ordem faz sentido em qualquer tela.
Inclua a revisão da versão de celular nos critérios de aceite, porque a ordem empilhada é a que a maioria vê. Priorize as páginas de serviço e de resultado.
Aprovação do leiaute
O leiaute foi aprovado só na versão de computador.
Errado: Só desktop
Decisão
Versão de celular gerada automaticamente, sem revisão.
A ordem perde o sentido para a maioria.
Certo: Celular revisado
Decisão
Leiaute aprovado nas duas versões.
Sentido preservado em todas as telas.
Leia a página de cima para baixo em larguras de computador e de celular e confira se a sequência faz sentido, com as instruções antes das ações. Registre os trechos cuja ordem muda o sentido.
Página de resultado no celular
Leitura sequencial.
Errado: Fora de ordem
Sequência
“Leve este comprovante ao posto” → “Seu pedido foi aprovado”
A ação aparece antes do contexto.
Certo: Em ordem
Sequência
“Seu pedido foi aprovado” → “Leve este comprovante ao posto”
Sentido preservado.
Comece pelo que a pessoa precisa saber primeiro e coloque a ação depois da explicação. Evite blocos que só fazem sentido lidos lado a lado.
Aviso de aprovação
Texto do resultado.
Errado: Ação primeiro
Texto
“Compareça com RG e CPF. Seu pedido foi aprovado.”
A pessoa lê a ação sem contexto.
Certo: Contexto primeiro
Texto
“Seu pedido foi aprovado. Compareça ao posto com RG e CPF.”
Leitura natural.