Sobre esta regra de acessibilidade
Cada elemento de formulário — como campos de texto, caixas de seleção, botões de opção e menus de seleção — deve ter um rótulo programaticamente associado para que as tecnologias de apoio possam identificar e anunciar o propósito de cada campo. Sem estes rótulos, os utilizadores de leitores de ecrã não conseguem determinar que informação é esperada, e os utilizadores com deficiências motoras perdem o benefício de uma área clicável maior que um <label> devidamente associado proporciona.
Por que isto é importante
Quando um elemento de formulário não tem um rótulo programático, os leitores de ecrã anunciam-no de forma genérica (por exemplo, “editar texto” ou “caixa de seleção”) ou omitem completamente o contexto significativo. Isto deixa os utilizadores cegos, com baixa visão e surdocegos incapazes de compreender que dados um campo espera ou que opção uma caixa de seleção representa. Devem adivinhar com base no conteúdo envolvente, o que é pouco fiável e propenso a erros.
Os rótulos também beneficiam utilizadores com deficiências motoras. Quando um elemento <label> está devidamente associado a 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.
Os utilizadores com visão frequentemente dependem da proximidade visual para inferir o propósito de um campo, mas as tecnologias de apoio precisam de uma relação programática explícita entre o texto do rótulo e o controlo do formulário para transmitir a mesma informação.
Normas relevantes
Esta regra mapeia para o Critério de Sucesso WCAG 4.1.2: Nome, Papel, Valor (Nível A), que requer que todos os componentes de interface do 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 às diretrizes Trusted Tester. O impacto no utilizador é considerado crítico.
Como resolver
Existem várias maneiras de associar um rótulo a um elemento de formulário. Use a abordagem que melhor se adequa à sua situação, listada aqui da mais recomendada para a menos recomendada.
1. <label> explícito com for e id (Recomendado)
O método mais comum e fiável é usar um elemento <label> cujo atributo for corresponda ao id do controlo do formulário. Isto cria uma associação programática inequívoca.
2. <label> implícito (Envolvente)
Envolva o controlo do formulário dentro de um elemento <label>. A associação é implícita pela relação pai-filho.
3. aria-label
Use aria-label quando o propósito do campo é transmitido 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 local da página, ou quando precisa de combinar múltiplos fragmentos 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 assim que o utilizador começa a escrever, 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 os botões (
<button>,<input type="submit">, etc.) são autorotulados através do seu conteúdo de texto ou atributovaluee não precisam de um<label>separado. -
Os 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 próximo do input, mas não há relação programática. Um leitor de ecrã anunciará apenas “editar 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 de 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 escrever, tornando difícil verificar o propósito 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: Caixa de seleção sem rótulo
<input type="checkbox" id="terms">
Concordo com os termos e condiçõesO texto está adjacente mas não associado à caixa de seleção.
Correto: Caixa de seleção 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.