Como usar a tag HTML label para melhorar seu site

Com a tag label em HTML, você melhora a usa­bi­li­dade do seu site e oferece mais aces­si­bi­li­dade. A tag label pode ser usada, entre outras coisas, para campos de entrada, caixas de seleção e botões de opção, e funciona com atributos globais, atributos de evento, bem como for e form.

Para que serve a tag label em HTML

Para melhorar a clareza e a aces­si­bi­li­dade do site, a tag HTML label de­sem­pe­nha um papel fun­da­men­tal. Ela é usada em for­mu­lá­rios para fornecer des­cri­ções claras para elementos como campos de entrada, botões de opção e caixas de seleção.

Isso é es­pe­ci­al­mente im­por­tante para dois casos de uso:

• Ela facilita a navegação no site para vi­si­tan­tes que têm di­fi­cul­dade em interagir com pequenas áreas clicáveis. Como a área clicável é maior, os elementos do for­mu­lá­rio ficam mais fáceis de se­le­ci­o­nar e usar.
• Para usuários que dependem de um leitor de tela, a tag HTML label garante que os rótulos de for­mu­lá­rios sejam lidos em voz alta cor­re­ta­mente. Isso melhora a usa­bi­li­dade para todos os vi­si­tan­tes do seu site.

Re­le­vân­cia da tag label nas WCAG

Os for­mu­lá­rios em HTML não devem ser apenas vi­su­al­mente fáceis de entender, mas também cumprir os padrões atuais de aces­si­bi­li­dade digital. As WCAG (Web Content Ac­ces­si­bi­lity Gui­de­li­nes) 2.2 exigem, por exemplo, que todos os campos de entrada sejam rotulados ou for­ne­ci­dos com ins­tru­ções claras (Critério de Sucesso 3.3.2 “Rótulos ou Ins­tru­ções”). Isso garante que pessoas com de­fi­ci­ên­cias cog­ni­ti­vas ou visuais entendam qual entrada é esperada.

Além disso, o Critério de Sucesso 2.5.3 das WCAG, “Rótulo no Nome” (“Label in Name”), garante que o rótulo visível também seja incluído no código do programa como um nome acessível. Isso é im­por­tante para usuários que dependem de tec­no­lo­gias as­sis­ti­vas ou de controle por voz.

Como a tag HTML label é usada?

A tag label em HTML pode ser usada de duas formas di­fe­ren­tes. Ambos os métodos garantem que tec­no­lo­gias as­sis­ti­vas, como leitores de tela, associem cor­re­ta­mente o rótulo ao res­pec­tivo controle do for­mu­lá­rio e permitem que os usuários cliquem no rótulo para focar o campo de entrada cor­res­pon­dente.

As­so­ci­a­ção explícita (com for e id)

No método explícito, você separa o rótulo e o campo do for­mu­lá­rio no HTML, mas os vincula usando o atributo for com o valor de id do campo de entrada. Essa opção oferece o melhor suporte de na­ve­ga­do­res e tec­no­lo­gias as­sis­ti­vas. Por esse motivo, ela ge­ral­mente é re­co­men­dada como uma boa prática.

<p>
    <input type="checkbox" name="read" id="read" value="yes" />
    <label for="read">Eu li os termos e condições</label>
</p>

É im­por­tante que o valor do atributo for cor­res­ponda exa­ta­mente ao atributo id do campo de entrada.

As­so­ci­a­ção implícita (input dentro da label)

Como al­ter­na­tiva, você pode colocar o campo de entrada dentro do elemento <label>. Nesse caso, a as­so­ci­a­ção é criada au­to­ma­ti­ca­mente, sem a ne­ces­si­dade de definir for e id. Essa opção também é um HTML válido, mas não é com­pa­tí­vel com todos os dis­po­si­ti­vos.

<p>
    <label>
        <input type="checkbox" name="read" value="yes" />
         Eu li os termos e condições
    </label>
</p>

Quais elementos são as­so­ci­a­dos à tag HTML label?

Para permitir acesso acessível à sua página para usuários com leitores de tela, por exemplo, você deve rotular os seguintes elementos em HTML, em especial, com um HTML label (a tag label em HTML):

• Campos de entrada: <input type=”text” />, <input type=”password” />, <textarea>
• Caixas de seleção: <input type=”checkbox” />
• Botões de opção: <input type=”radio” />
• Listas suspensas: <select>
• Campos de upload: <input type=”file” />

Quais atributos a tag label em HTML suporta?

A tag label oferece suporte a todos os atributos HTML globais, bem como a todos os atributos de eventos. Além disso, os seguintes atributos podem ser as­so­ci­a­dos ao HTML label:

• for: o atributo for es­pe­ci­fica o ID do elemento de entrada ao qual o label deve ser associado. O valor de for deve cor­res­pon­der exa­ta­mente ao valor do atributo id de outro controle de for­mu­lá­rio no mesmo documento.
• form: o atributo form pode ser útil em layouts complexos nos quais um label e o controle de for­mu­lá­rio associado não estão lo­ca­li­za­dos dentro do mesmo elemento de for­mu­lá­rio. Na maioria dos for­mu­lá­rios aces­sí­veis, porém, ele não é ne­ces­sá­rio. A as­so­ci­a­ção re­co­men­dada é feita usando for / id ou aninhando o input dentro do label. O atributo form não faz parte dos atributos padrão nor­mal­mente usados com a tag label na es­pe­ci­fi­ca­ção HTML.

<form id="participant">
    <label for="first-name">Nome</label>
    <input name="first-name" id="first-name" maxlength="25">
    <label for="last-name">Sobrenome</label>
    <input name="last-name" id="last-name" maxlength="30">
    <button>Confirmar dados</button>
</form>