Sobre esta regra de acessibilidade
Todos os elementos de formulário — como campos de texto, checkboxes, botões de opção e menus de seleção — devem ter um rótulo associado programaticamente para que as tecnologias assistivas possam identificar e anunciar a finalidade de cada campo. Sem estes rótulos, utilizadores de leitores de ecrã não conseguem determinar que informação é esperada, e utilizadores com deficiências motoras perdem o benefício de uma área clicável maior que um <label> corretamente associado proporciona.
Por que isto é importante
Quando um elemento de formulário não tem um rótulo programático, os leitores de ecrã ou o anunciam genericamente (por exemplo, “campo de texto” ou “checkbox”) ou omitem completamente o contexto significativo. Isto deixa utilizadores cegos, com baixa visão e surdocegos incapazes de compreender que dados um campo espera ou que opção uma checkbox representa. Eles têm de adivinhar com base no conteúdo circundante, o que é pouco confiável e propenso a erros.
Os rótulos também beneficiam utilizadores com deficiências motoras. Quando um elemento <label> está adequadamente associado com um input, clicar no texto do rótulo ativa ou foca o controlo associado. Isto cria uma área de clique maior, o que é especialmente útil para pessoas com destreza limitada.
Utilizadores com visão muitas vezes dependem da proximidade visual para inferir a finalidade de um campo, mas as tecnologias assistivas precisam de uma relação programática explícita entre o texto do rótulo e o controlo de formulário para transmitir a mesma informação.
Normas relevantes
Esta regra mapeia para WCAG Critério de Sucesso 4.1.2: Nome, Função, Valor (Nível A), que exige que todos os componentes da interface de utilizador tenham um nome acessível que possa ser determinado programaticamente. Aplica-se ao WCAG 2.0, 2.1 e 2.2, bem como à Secção 508 (§1194.22(n)), EN 301 549 (9.4.1.2) e diretrizes Trusted Tester. O impacto no utilizador é considerado crítico.
Como corrigir
Existem várias maneiras de associar um rótulo com um elemento de formulário. Use a abordagem que melhor se adapte à sua situação, listadas aqui da mais recomendada para a menos recomendada.
1. <label> explícito com for e id (Recomendado)
O método mais comum e confiável é usar um elemento <label> cujo atributo for corresponda ao id do controlo de formulário. Isto cria uma associação programática inequívoca.
2. <label> implícito (Envolvimento)
Envolver o controlo de formulário dentro de um elemento <label>. A associação é implícita pela relação pai-filho.
3. aria-label
Use aria-label quando a finalidade do campo é transmitida visualmente através de um ícone ou layout em vez de texto visível. Isto cria um rótulo invisível que apenas os leitores de ecrã anunciam.
4. aria-labelledby
Use aria-labelledby quando o texto do rótulo já existe noutro lugar na página, ou quando precisa de combinar múltiplas partes de texto num único rótulo. Referencie um ou mais valores de id de elementos.
5. placeholder (Não Recomendado)
Um atributo placeholder pode tecnicamente fornecer um nome acessível, mas desaparece quando o utilizador começa a digitar, removendo o rótulo visível. Isto cria problemas de usabilidade para todos e não é uma abordagem recomendada.
Dicas gerais
-
Certifique-se de que todos os valores de
idsão únicos na página. - Torne o texto do rótulo descritivo e significativo quando lido em voz alta isoladamente.
-
Lembre-se de que botões (
<button>,<input type="submit">, etc.) são auto-rotulados através do seu conteúdo de texto ou atributovaluee não precisam de um<label>separado. -
Inputs ocultos (
<input type="hidden">) não precisam de rótulos uma vez que não são apresentados aos utilizadores.
Exemplos
Incorreto: Input sem rótulo
<div>Primeiro nome:</div>
<input type="text" id="firstname">
O texto do <div> está visualmente perto do input, mas não há relação programática. Um leitor de ecrã anunciará apenas “campo de texto” sem contexto.
Correto: Rótulo explícito com for e id
<label for="firstname">Primeiro nome:</label>
<input type="text" id="firstname">Correto: Rótulo implícito por envolvimento
<label>
Primeiro nome:
<input type="text">
</label>
Correto: aria-label para campos visualmente implícitos
<input type="text" aria-label="Pesquisar">
<button type="submit">🔍</button>
Correto: aria-labelledby referenciando texto existente
<div id="temp-label">Temperatura</div>
<div id="high-label">Máxima:</div>
<div id="low-label">Mínima:</div>
<input type="text" aria-labelledby="temp-label high-label">
<input type="text" aria-labelledby="temp-label low-label">O primeiro input é anunciado como “Temperatura Máxima:” e o segundo como “Temperatura Mínima:”, combinando o texto referenciado por ordem.
Incorreto: Depender apenas do placeholder
<input type="text" placeholder="Introduza o seu email">Embora isto tecnicamente forneça um nome acessível, a dica visível desaparece quando o utilizador começa a digitar, tornando difícil verificar a finalidade do campo. Prefira sempre um rótulo visível persistente.
Correto: Rótulo visível com placeholder suplementar
<label for="email">Endereço de email</label>
<input type="text" id="email" placeholder="nome@exemplo.com">Incorreto: Checkbox sem rótulo
<input type="checkbox" id="terms">
Concordo com os termos e condiçõesO texto está adjacente mas não associado à checkbox.
Correto: Checkbox com rótulo
<input type="checkbox" id="terms">
<label for="terms">Concordo com os termos e condições</label>Learn more:
Ajude-nos a melhorar os nossos guias
Detecte problemas de acessibilidade automaticamente
O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.