5.1.1.11 - Requisitos para rótulos de campos de formulário
Descrição
Os rótulos de campos de formulário devem estar posicionados na ordem usual. Os rótulos de formulários devem ser posicionados adjacentemente ao seu respectivo campo. Em campos de formulário gerais, como os de entrada de textos e/ou números, o rótulo deve ser posicionado antes do campo, ou seja, à esquerda ou acima. Em formulários de botão de rádio (radio button) e caixas de marcação (checkboxes), os rótulos devem estar após as respectivas opções, à direita. A ordem destes itens no código deve coincidir com a ordem visual, para manter a experiência independentemente da forma de navegação do usuário. Esse tipo de posicionamento melhora a previsibilidade da leitura do formulário, usando visão e tecnologias assistivas, além de evitar desalinhamentos acidentais.
Exemplo
O rótulo “nome” vem antes do campo de formulário que requer esse dado do usuário.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Organize os rótulos dos formulários de forma previsível e intuitiva, colocando-os à esquerda ou acima dos campos de texto e à direita dos botões de rádio e checkboxes, garantindo uma experiência visual clara e fácil de seguir.
Posicione os rótulos na ordem usual
Campos de texto: rótulo acima ou à esquerda. Rádio e caixa de seleção: rótulo à direita.
Certo: Rótulos no lugar esperado
anotação de especificação
"E-mail" acima do campo; "Aceito os termos" à direita da caixa de seleção.
Errado: Rótulos invertidos
anotação de especificação
"E-mail" abaixo do campo; "Aceito os termos" à esquerda da caixa de seleção.
No código, certifique-se de que a ordem dos rótulos e dos campos de formulário siga a ordem visual, posicionando os rótulos próximos aos campos correspondentes, garantindo que a navegação com tecnologias assistivas ocorra de forma coerente.
Ordem do código igual à ordem visual
O leitor de tela segue o código: o rótulo deve vir na mesma posição em que aparece.
Certo: Campo de texto
<label for="email">E-mail</label> <input id="email" type="email">Leitor de tela anuncia: "E-mail, campo de edição"
Certo: Caixa de seleção
<input id="termos" type="checkbox"> <label for="termos">Aceito os termos</label>Leitor de tela anuncia: "Aceito os termos, caixa de seleção"
Errado: Ordem trocada via CSS
<input id="email"> <label for="email" style="order:-1">E-mail</label>Leitor de tela anuncia: A tela mostra o rótulo antes; o código o lê depois
Errado: Rótulo longe do campo
<label for="email">E-mail</label> <p>Texto de ajuda longo…</p> <input id="email">Leitor de tela anuncia: Rótulo e campo visualmente separados
Aprenda a fazer com conteúdos selecionados para você
Garanta que haja uma revisão sistemática dos formulários para assegurar que o posicionamento dos rótulos e campos siga padrões consistentes, tanto no design quanto na implementação, favorecendo a acessibilidade e usabilidade da interface.
Padronize o layout dos formulários
Defina o padrão de posição de rótulos e revise cada formulário novo.
Checklist do requisito 5.1.1.11: formulário "Cadastro"
- padrão seguido
Campos de texto
rótulo acima
- padrão seguido
Caixas de seleção
rótulo à direita
- pendente
Botões de rádio
rótulo à direita
2 de 3 grupos em conformidade, 1 pendente de revisão.
Manutenção dos padrões de marcado nos campos de formulário
Os rótulos estão posicionados de forma intuitiva, ou seja, à esquerda ou acima dos campos de entrada, e à direita em checkboxes e botões de rádio, de acordo com as diretrizes de usabilidade. Isso facilita a identificação dos campos para todos os usuários.
Correspondência entre ordem visual e ordem no código
O fluxo de leitura sequencial, tanto visual quanto no código HTML, deve ser testado para assegurar que tecnologias assistivas leiam os campos na mesma ordem em que aparecem visualmente, prevenindo desorientação durante o preenchimento.
Compare a ordem de leitura com a tela
Navegue com Tab e com o leitor de tela e confira se a ordem bate com o que se vê.
Certo: Ordem coerente
"Nome, campo de edição"
"E-mail, campo de edição"
"Aceito os termos, caixa de seleção"
A leitura segue a ordem visual.
Errado: Ordem embaralhada
"E-mail, campo de edição"
"Nome, campo de edição"
"Aceito os termos"
O foco pula para um campo que aparece depois.
Insira textos de rótulo de maneira clara e informativa, conforme padrões já estabelecidos no mercado. Cuide para que estejam sempre posicionados sempre antes do campo de formulário a que se refere, facilitando a compreensão dos usuários, pois isso torna mais fácil a navegação por tecnologias assistivas.
Rótulos curtos, antes do campo
O rótulo nomeia o dado. Explicações ficam num texto de ajuda logo abaixo.
Certo: Rótulo objetivo
rótulo do campo
"Data de nascimento"
Curto e na posição esperada.
Errado: Rótulo virou instrução
rótulo do campo
"Por favor, informe abaixo a sua data de nascimento completa"
Longo demais para um rótulo.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.