07.02.2025

É Possível Atribuir Duas Etiquetas a Uma Entrada no HTML?

Resposta Rápida

Sim, um campo de entrada pode ter não apenas uma, mas múltiplas etiquetas. Para conseguir isso, é necessário fornecer descrições separadas para cada etiqueta e vinculá-las todas ao mesmo identificador (id) do campo de entrada. Essa abordagem melhora a compreensão visual e aumenta a acessibilidade ao interagir com formulários complexos.

<label for="email-usuario">E-mail de trabalho</label>
<label for="email-usuario">Método de contato preferido</label>
<input type="email" id="email-usuario" name="email">

A Essência do Uso de Múltiplas Etiquetas

Usar múltiplas etiquetas permite que os usuários tenham uma compreensão mais detalhada da funcionalidade dos campos de formulário ao inserir dados complexos. Por exemplo, as etiquetas para o campo de e-mail podem ser tanto "Nome de usuário" quanto "Endereço de Inscrição", indicando que esse campo pode ser usado em vários contextos.

Leitores de Tela e Interação com Etiquetas

Para usuários que interagem com a interface usando leitores de tela, ter múltiplas etiquetas pode ter tanto vantagens quanto desvantagens em termos de entendimento da interface. Leitores de tela podem ler apenas a primeira etiqueta, portanto, para evitar confusão, cada etiqueta deve ser autoexplicativa. Alternativamente, um contêiner fieldset pode ser usado para criar um contexto comum.

<fieldset>
  <legend>Endereço de E-mail</legend>
  <label for="email-usuario">Nome de usuário</label>
  <input type="email" id="email-usuario" name="email">
  <label for="email-usuario">Endereço de Inscrição</label>
</fieldset>

Visualização

Comparando múltiplas etiquetas HTML a papéis na aristocracia, você pode imaginar o seguinte:

Rei (🤴): [Uma Coroa (👑)]
Rainha (👸): [Uma Coroa (👑)]

Nesse contexto, o campo de entrada pode desempenhar vários papéis:

Duque de Entrada (💼): [Etiqueta de Comércio (💰), Etiqueta de Informações Pessoais (🖊️)]

Isso significa que uma etiqueta desempenha um papel específico, enquanto o campo de entrada pode corresponder a múltiplas etiquetas ao mesmo tempo.

📜 Um campo de entrada com DUAS etiquetas 🏰:
💰 "Preço"
🖊️ "Custo"
// Afinal, não estamos realmente vivendo em uma monarquia medieval do HTML, estamos?

Apesar da abordagem de visualização um tanto inusitada, é bastante aceitável em HTML.

Criando e Melhores Práticas para Design com Múltiplas Etiquetas

Aspectos de Navegação no Design de Formulários

Busque clareza ao usar múltiplas etiquetas para evitar enganar os usuários. A clareza na expressão, brevidade e instruções abrangentes garantirão que os usuários compreendam claramente quais etiquetas se relacionam com seu campo de entrada.

<label for="email-usuario">Nome de usuário:</label>
<br>
<span>Usado também como o endereço para se inscrever em nossas notícias.</span>
<br>
<label for="email-usuario">Endereço de Inscrição:</label>
<input type="email" id="email-usuario" name="email">

Desenvolvendo um Tratamento de Erros Acessível

As mensagens de erro são consideradas etiquetas adicionais: elas melhoram a legibilidade e acessibilidade. Se os usuários tiverem dificuldades ao interagir com a interface, as mensagens de erro devem ser claramente comunicadas e fáceis de entender. Notificações gerais de erro no topo do formulário podem ajudar os usuários a navegar pelos campos.

Associando Corretamente Etiquetas e Campos de Entrada

Cada etiqueta deve corresponder ao campo de entrada apropriado por meio do atributo for, que se refere ao identificador desse campo. Lembre-se de que, sem um link adequado entre a etiqueta e o campo de entrada, a capacidade de interagir com a interface se torna tão inatingível quanto um pirata que perdeu seu par favorito de botas.

<label for="nome-usuario">Nome</label>
<input type="text" id="nome-usuario" name="username">
<label for="nome-usuario">Nome Pessoal</label>

Pesando as Vantagens e Desvantagens

Ao considerar o uso de múltiplas etiquetas, pense em todas as vantagens e desvantagens de tal abordagem. Elas clarificam o design ou criam confusão? Seja cauteloso na implementação para evitar criar um caos informativo semelhante a pedir uma pizza com todos os possíveis ingredientes em um só prato.

Recursos Úteis

1. Elementos Descritivos | Acessibilidade na Web (WAI) | W3C — um guia valioso que ajuda a entender o papel das etiquetas na garantia da acessibilidade dos formulários em HTML.
2. Padrão HTML — um recurso essencial para estudar a especificação do elemento label em HTML.
3. <label>: Elemento de Etiqueta - HTML: Linguagem de Marcação HiperTexto | MDN — um guia detalhado da MDN sobre o uso de elementos label e melhores práticas em HTML.
4. Discussão sobre o Uso de Múltiplas Etiquetas para um Campo de Entrada — um tópico no Stack Overflow abordando a questão das múltiplas etiquetas para um campo de entrada, compartilhado por desenvolvedores com suas experiências.
5. WebAIM: Criando Formulários Acessíveis - Controles de Formulário — contém uma visão detalhada de como trabalhar com formulários a partir de uma perspectiva de acessibilidade.
6. Placeholders em Formulários: Qual é o Problema — um artigo abordando questões de design de formulário ao longo dos últimos 20 anos.
7. Visão Geral do WCAG 2 — uma coleção de princípios fundamentais e recomendações para as condições necessárias para garantir a acessibilidade de formulários web.

Video

Navigation