Um campo de entrada pode ter dois rótulos?

134

Maria tinha uma pequena forma e seus campos eram rotulados exatamente assim.
Sempre que um erro aparecia, a confusão semeava.

Eu tenho um rótulo para cada campo de entrada ... caso bastante padrão. Depois de validar o formulário, estou exibindo um pequeno parágrafo útil na parte superior do formulário, detalhando quais informações estão ausentes ou incorretas.

Posso ter dois rótulos para o mesmo campo de entrada? Um no formato adequado e outro no texto do lembrete de validação? Existe alguma razão para eu não fazer isso?

html forms labels

— aslum
fonte

Você já tentou o que acontece? Se funcionar, não acredito que causaria danos ao seu formulário nem à página. E você receberá uma vantagem porque o uso poderá clicar no erro de validação e focar no campo correto.

— Felipe Cypriano

Eu não tentei, mas acho que será possível. Mas eu não recomendo usá-lo, porque um rótulo define para que serve o campo, uma mensagem de erro não. Portanto, não devo usar um rótulo para avisos de validação.

— Guido Hendriks

Esta é uma questão geral de design / usabilidade da interface do usuário?

— jball

Sim. "Funciona" ... mas há alguma razão para isso ser um design ruim? Acho que pode ser por motivos de acessibilidade, mas para um usuário normal, acho que poder clicar na mensagem de erro e ser levado ao campo bagunçado facilitaria as coisas ... só não sei se isso acontecerá. bagunçar "leitores para deficientes visuais" ou algo parecido.

— aslum 13/05/10

Em alguns casos, é mais fácil colocar seu controle e texto dentro de um label. Você pode até omitir o fore idatributos. A especificação chama essa associação implícita.

— Roger111

Respostas:

158

Presumo que esta pergunta seja sobre formulários HTML. A partir da especificação :

O elemento LABEL pode ser usado para anexar informações aos controles. Cada elemento LABEL está associado a exatamente um controle de formulário.

Assim, cada controle de formulário pode ser referenciado por vários rótulos, mas cada rótulo pode fazer referência apenas a um controle. Portanto, se faz sentido ter um segundo rótulo para um controle (e na situação que você descreve), fique à vontade para adicionar um segundo rótulo.

— James Sumners
fonte

É realmente mais uma questão de usabilidade / acessibilidade do que o HTML. O html funciona.

— aslum 13/05/10

Todos nós devemos usar apenas código válido; caso contrário, as coisas poderão ocorrer no futuro ou para outra pessoa ou com alguma biblioteca JS ou o que for.

— SHernandez

A resposta correta é de Rob. Esta solução funciona para usuários com visão e falha em alguns leitores de tela. Aslum, supondo que você aceitou a resposta de jsummers acima antes de Rob enviar sua resposta.

— gaiola cascavel

@AvramLavinsky não, esta é a resposta correta para "um campo pode ter dois rótulos?" A especificação é bastante clara. Como os clientes escolhem interpretar isso depende deles. Seu link para "ária-descrita por", que vincula a "ária-marcada por", é a maneira de "consertar" os leitores de tela quebrada.

— James Sumners

O MDN engraçado diz que "uma entrada pode ser associada a vários rótulos". developer.mozilla.org/pt-BR/docs/Web/HTML/Element/label

— 2540625

O HTML é legal e funciona (clicar em qualquer um dos rótulos transferirá o foco para o campo em questão).

É um pouco mais complicado fazer o certo por razões de acessibilidade.

Não é uma abordagem "comum" e, por isso, pelo menos um leitor de tela comum (testei com o NVDA) só lê o primeiro rótulo quando você muda o foco para o campo - ele ignora quaisquer rótulos adicionais para o mesmo campo.

Portanto, se sua mensagem de erro estiver na parte superior da página, um usuário cego ou com visão subnormal percorrendo os campos ouvirá apenas a mensagem de erro ao aterrar no campo em questão, não o rótulo "real" ao lado.

Portanto - se você escrever a mensagem de erro corretamente, isso pode ser uma coisa boa (certamente melhor do que apenas destacar o campo não validado em vermelho!).

— Rob Whelan
fonte

Isso é correto, e a maneira correta de código isso é através do atributo aria-describedby

— gaiola cascavel

Sim, você pode ter vários rótulos apontados para o mesmo controle de formulário. Isso é perfeitamente legal :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

Este é apenas um exemplo ... normalmente você agruparia essas linhas com um rótulo, uma vez que estão próximas.

— Gert Grenander
fonte

+1 no link para o documento, onde afirma claramente que "Mais de um LABELpode estar associado ao mesmo controle, criando várias referências por meio do foratributo".

— Alexg1