Rótulo de campo associado
O que a norma pede
Cada rótulo está ligado ao seu campo no código, de modo que a tecnologia assistiva anuncie o rótulo ao chegar no campo.
- 1.3.1 (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:
Indique na especificação qual rótulo pertence a cada campo e a cada grupo de opções, e mantenha rótulo e campo visualmente juntos. Na tela eles parecem ligados, mas o código pode tratá-los como coisas separadas.
Campo de data em três partes
Dia, mês e ano em campos separados sob o rótulo “Data de nascimento”.
Errado: Rótulo só do grupo
Na especificação
“Data de nascimento” sobre três campos sem nome.
Cada campo é anunciado sem nome.
Certo: Grupo e partes nomeados
Na especificação
Grupo “Data de nascimento”; campos “Dia”, “Mês”, “Ano”.
Cada parte tem nome.
Associe rótulo e campo com for e id, ou colocando o campo dentro do label, e garanta ids únicos na página. Nos componentes, gere o id automaticamente e faça a ligação sozinha.
Campo de CPF
Associação do rótulo.
Errado: Rótulo solto
<p>CPF</p> <input type="text">O leitor não associa “CPF” ao campo.
Certo: Associado
<label for="cpf">CPF</label> <input id="cpf" inputmode="numeric">O leitor anuncia “CPF, campo de edição”.
Inclua a verificação automática de rótulos no processo de entrega e revise os formulários feitos fora do sistema de design. A associação é invisível para quem enxerga e decisiva para quem usa leitor de tela.
Formulário feito à mão
Um formulário urgente foi feito sem o componente padrão.
Errado: Sem verificação
Entrega
Publicado sem teste automático.
Nenhum campo tem rótulo associado.
Certo: Com verificação
Entrega
Teste automático bloqueia publicação com campos sem rótulo.
O problema é pego antes.
Clique no texto de cada rótulo: o campo deve receber foco. Com o leitor de tela, o rótulo precisa ser anunciado ao chegar no campo.
Campo de CPF
Teste de associação.
Errado: Não associado
Clique em “CPF” → nada acontece
Tab → “Campo de edição”
Rótulo e campo estão separados no código.
Certo: Associado
Clique em “CPF” → foco no campo
Anúncio: “CPF, campo de edição”
A associação funciona.
Escreva rótulos que façam sentido sozinhos, porque serão lidos a cada vez que a pessoa chegar ao campo. Em campos parecidos, diferencie, como “Telefone para recado”.
Dois telefones
O formulário pede dois telefones.
Errado: Rótulos iguais
Rótulos
“Telefone” e “Telefone”
O leitor anuncia dois campos iguais.
Certo: Rótulos distintos
Rótulos
“Telefone principal” e “Telefone para recado”
Cada campo é único.