Rótulo de campo previsível
O que a norma pede
Os rótulos ficam numa posição previsível em relação aos campos: em geral, acima ou à esquerda de campos de texto e à direita de caixas de seleção e botões de rádio.
- 1.3.2 (A)
- 3.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:
Coloque o rótulo dos campos de texto acima ou à esquerda, colado ao campo, e o rótulo de caixas de seleção e botões de rádio à direita da opção. Mantenha esse padrão em todos os formulários.
Formulário com ampliação
Pessoa com baixa visão usa zoom de 400%.
Errado: Rótulo distante
No protótipo
Rótulos alinhados à esquerda da tela; campos à direita, 400 px depois.
Com zoom, rótulo e campo não aparecem juntos.
Certo: Rótulo colado
No protótipo
Rótulo logo acima de cada campo.
Rótulo e campo aparecem juntos.
Mantenha no HTML o label antes do campo de texto e depois da caixa de seleção, na mesma ordem da tela. Não posicione rótulos com CSS absoluto longe dos campos.
Aceite de termos
Uma caixa de seleção de aceite.
Errado: Rótulo antes, sem associação
<span>Li e aceito os termos</span> <input type="checkbox">Posição incomum e sem associação.
Certo: Padrão previsível
<input id="aceite" type="checkbox"> <label for="aceite">Li e aceito os termos</label>Posição esperada e clicável.
Defina a posição dos rótulos no sistema de design e revise os formulários antigos com rótulos distantes. Quem usa ampliação vê só uma parte da tela e depende de achar o rótulo onde espera.
Formulários de vários fornecedores
Cada formulário posiciona rótulos de um jeito.
Errado: Sem padrão
Situação
Rótulos acima, ao lado, dentro e depois, conforme o sistema.
A pessoa reaprende a cada serviço.
Certo: Padrão único
Situação
Todos os fornecedores usam o componente de campo do portal.
Preencher fica previsível.
Observe a posição de cada rótulo em relação ao campo, também com zoom de 400%, em que rótulo e campo precisam aparecer juntos. Clique no rótulo e confira se o campo recebe foco.
Zoom de 400%
Formulário ampliado.
Errado: Rótulo fora de vista
Observação
Com zoom, o campo aparece sem o rótulo; é preciso rolar para o lado.
A pessoa não sabe o que preencher.
Certo: Rótulo junto
Observação
Com zoom, rótulo e campo aparecem juntos.
Preenchimento sem esforço extra.
Mantenha o rótulo em uma linha, se possível, e leve os detalhes para o texto de ajuda. Use o mesmo rótulo para o mesmo dado em todos os formulários.
Campo de renda
O campo pede a renda familiar.
Errado: Rótulo-parágrafo
Rótulo
“Informe aqui a renda bruta mensal somada de todas as pessoas que moram na sua casa, incluindo…”
O campo fica longe do começo do rótulo.
Certo: Rótulo e ajuda
Rótulo e ajuda
Rótulo: “Renda familiar mensal”. Ajuda: “Some a renda de todas as pessoas da casa.”
Rótulo curto; explicação ao lado.