Evite rótulos em controles que não aceitam rótulos

A Silktide verifica os rótulos de formulários que apontam para outro elemento por ID e relata os rótulos direcionados a elementos que não deveriam ter um rótulo — botões, inputs semelhantes a botões e elementos que não podem receber um rótulo. Esses elementos são nomeados pelo próprio texto ou valor, e um rótulo separado cria nomes conflitantes.

Em HTML, um <label> nomeia um campo de formulário por meio do atributo for. Mas alguns controles já têm seu próprio nome: o nome de um botão é seu texto, e o nome de um input de envio é seu value. Outros elementos, como um <div> simples ou um input oculto, não podem receber um rótulo dessa forma.

<!-- Problema: o botão já diz "Salvar"; o rótulo entra em conflito com ele -->
<label for="save">Salvar</label>
<button id="save">Salvar</button>

Por que isso é importante

Quando um controle tem duas fontes para seu nome — seu próprio texto e um rótulo que aponta para ele — diferentes navegadores e leitores de tela resolvem o conflito de formas diferentes. O controle pode ser anunciado duas vezes, ser anunciado com o texto errado ou comportar-se de maneira inesperada quando o rótulo é clicado. Remover o rótulo redundante faz com que todos os visitantes ouçam exatamente o que o controle diz.

Como corrigir

1. Para botões e inputs semelhantes a botões, remova o <label> e use o próprio texto ou value do controle:

<!-- Corrigido: o botão se nomeia sozinho -->
<button id="save">Salvar</button>
<input type="submit" value="Enviar">

2. Para um rótulo que aponta para um input oculto, remova o rótulo — campos ocultos nunca são exibidos nem anunciados, portanto não precisam de um nome.
3. Se você estava rotulando um elemento que não é um formulário, como um <div> que atua como um controle personalizado, use ARIA: adicione ao elemento aria-labelledby apontando para o texto que o nomeia.

Como a Silktide testa isso

1. Encontra todos os elementos <label> com um atributo for em cada página.
2. Procura o elemento cujo id corresponde. Rótulos que apontam para IDs inexistentes são ignorados aqui — eles são relatados por IDs de rótulo válidos.
3. Relata o rótulo quando seu destino é um dos seguintes:
   • um elemento <button>;
   • um <input> com o tipo button, submit, reset, image ou hidden;
   • qualquer elemento que não possa receber um rótulo, como um <div> ou um título.
4. Rótulos que apontam para campos comuns — inputs de texto, <select>, <textarea> e semelhantes — são aprovados.

Saiba mais

• Entenda o Critério de Sucesso 1.3.1: Informações e relações (WCAG 2.2)
• Técnica H44: Uso de elementos label (WCAG)
• O elemento label (MDN)
• Rótulos de campos