Os elementos de formulário devem ter um rótulo visível

Os atributos title e aria-describedby desempenham um papel suplementar na acessibilidade — transmitem dicas, tooltips ou descrições adicionais. No entanto, não são tratados como rótulos primários pelas APIs de acessibilidade. Quando um leitor de ecrã encontra um campo de formulário que tem apenas um atributo title ou aria-describedby e nenhum rótulo adequado, pode apresentar o texto como informação consultiva em vez do nome do campo. Isto torna difícil ou impossível para os utilizadores compreender que entrada é esperada.

Este problema afeta principalmente utilizadores que são cegos, surdocegos, ou que dependem de tecnologias assistivas como leitores de ecrã. Também pode impactar utilizadores com deficiências motoras que usam software de controlo por voz, uma vez que o controlo por voz frequentemente depende de rótulos visíveis para direcionar elementos de formulário. Um rótulo visível em falta também prejudica utilizadores com visão que podem não ver um tooltip até passarem o cursor sobre o elemento.

Esta regra é classificada como uma Melhor Prática Deque e alinha-se com a intenção mais ampla do Critério de Sucesso 1.3.1 do WCAG (Informações e Relações), que requer que as informações e relações transmitidas visualmente também estejam disponíveis programaticamente, e CS 2.4.6 (Rótulos ou Instruções), que requer que os rótulos descrevam o propósito dos controlos de formulário. Embora title e aria-describedby exponham algum texto, não cumprem o requisito para um rótulo confiável e programaticamente determinável.

Como corrigir

Cada controlo de formulário precisa de um nome acessível adequado. Pode fornecer um utilizando qualquer um destes métodos:

1. Elemento <label> explícito — Associe um <label> com o controlo de formulário utilizando atributos for e id correspondentes. Esta é a abordagem mais confiável e amplamente suportada.
2. Elemento <label> implícito — Envolva o controlo de formulário dentro de um elemento <label>. Isto funciona na maioria das tecnologias assistivas mas tem suporte inconsistente em algumas combinações (por exemplo, JAWS com menus <select>).
3. aria-labelledby — Referencie texto visível noutro lugar da página pelo seu id. Útil para cenários de rotulagem complexos.
4. aria-label — Aplique um rótulo invisível diretamente ao elemento. Use isto apenas quando um rótulo visível não é verdadeiramente viável.

Na maioria dos casos, um <label> explícito é a melhor escolha. Cria uma associação clara, fornece um alvo maior para clicar/tocar, e é universalmente suportado.

Exemplos

Incorreto: usar apenas title

O atributo title fornece um tooltip ao passar o cursor mas não cria um rótulo acessível adequado.

<input type="text" title="Enter your email address">

Incorreto: usar apenas aria-describedby

O atributo aria-describedby fornece uma descrição, não um rótulo. Os leitores de ecrã podem anunciar este texto de forma diferente ou ignorá-lo em certos contextos.

<p id="email-hint">Enter your email address</p>
<input type="text" aria-describedby="email-hint">

Correto: elemento <label> explícito

Esta é a abordagem recomendada. O atributo for no <label> corresponde ao id na entrada, criando uma associação inequívoca.

<label for="email">Email Address</label>
<input type="text" id="email" name="email">

Ainda pode usar title ou aria-describedby para dicas suplementares juntamente com um rótulo adequado:

<label for="email">Email Address</label>
<input type="text" id="email" name="email" title="e.g., user@example.com">

Correto: elemento <label> implícito

Envolver a entrada dentro do <label> cria uma associação implícita. Isto funciona para a maioria das tecnologias assistivas mas é menos confiável do que rótulos explícitos.

<label>
  Email Address
  <input type="text" name="email">
</label>

Correto: usar aria-labelledby

Referencie texto visível na página pelo seu id. Isto é útil quando a estrutura de rotulagem é complexa, como tabelas de dados com controlos de formulário, ou quando múltiplos elementos partilham um rótulo.

<p id="email-label">Email Address</p>
<input type="text" aria-labelledby="email-label">

Correto: usar aria-label

Isto fornece um rótulo que é invisível no ecrã. Use-o apenas quando um rótulo visível não pode ser fornecido, como um campo de pesquisa com um ícone de pesquisa claramente identificável e botão.

<input type="text" aria-label="Search">
<button type="submit">Search</button>

Nota: Como aria-label não é visível, os utilizadores com visão não recebem texto de rótulo. Prefira um <label> visível sempre que possível.

Learn more:

Deque Reference

Deque University - How To Fix

→