Elemento select deve ter um nome acessível

Quando um elemento <select> não tem um nome acessível, os leitores de ecrã anunciam-no como algo genérico como “combobox” ou “listbox” sem contexto sobre o que representa. Um utilizador vidente pode ver texto próximo como “País” e compreender o propósito, mas essa proximidade visual não significa nada para a tecnologia de apoio a não ser que exista uma relação programática entre o texto e o controlo de formulário.

Este problema afeta criticamente utilizadores que são cegos, têm baixa visão, ou têm deficiências motoras e dependem de tecnologias de apoio para interagir com formulários. Sem um rótulo adequado, estes utilizadores não conseguem determinar que dados um dropdown espera, tornando o preenchimento de formulários propenso a erros ou impossível.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o Critério de Sucesso 4.1.2 das WCAG 2.0, 2.1 e 2.2: Nome, Função, Valor (Nível A), que requer que todos os componentes da interface de utilizador tenham um nome que possa ser determinado programaticamente. Também se enquadra na Secção 508 §1194.22(n), que determina que os formulários online permitam a pessoas que usam tecnologia de apoio aceder a todos os elementos de campo, direções e dicas necessárias para preenchimento.

Como corrigir

Existem várias maneiras de dar a um elemento <select> um nome acessível, listadas aqui da mais preferida para a menos preferida:

1. <label> explícito com for/id — A abordagem mais comum e recomendada. Use o atributo for no <label> para corresponder ao id do <select>. Isto também dá aos utilizadores videntes uma área de clique maior.

2. <label> implícito envolvente — Envolva o <select> dentro de um elemento <label>. Não é necessário emparelhamento for/id.

3. aria-labelledby — Aponte para o id de um elemento de texto visível existente que serve como rótulo. Útil quando um <label> tradicional quebraria o layout ou quando múltiplos elementos se combinam para formar o rótulo.

4. aria-label — Forneça um rótulo de texto invisível diretamente no <select>. Use isto apenas quando não existe texto de rótulo visível ou apropriado.

Independentemente do método que escolha, certifique-se de que:

• O texto do rótulo descreve claramente o que o utilizador deve selecionar.
• Cada atributo id é único na página.
• Cada <select> tem apenas um método de rotulagem para evitar conflitos ou confusão.

Exemplos

Incorreto: nenhuma associação de rótulo

Isto coloca texto perto do <select> mas não cria ligação programática entre eles. Os leitores de ecrã não anunciarão “Estado” quando o utilizador focar o dropdown.

Estado:
<select>
  <option value="ny">New York</option>
  <option value="ca">California</option>
</select>

Correto: <label> explícito com for e id

O atributo for no <label> corresponde ao id no <select>, criando uma associação programática clara.

<label for="state">Estado:</label>
<select id="state">
  <option value="ny">New York</option>
  <option value="ca">California</option>
</select>

Correto: <label> implícito envolvente

Envolver o <select> dentro do elemento <label> associa-os implicitamente.

<label>
  Estado:
  <select>
    <option value="ny">New York</option>
    <option value="ca">California</option>
  </select>
</label>

Correto: usando aria-labelledby

Quando já existe texto visível noutro local (por exemplo, num cabeçalho ou célula de tabela), use aria-labelledby para referenciá-lo por id.

<span id="state-label">Estado:</span>
<select aria-labelledby="state-label">
  <option value="ny">New York</option>
  <option value="ca">California</option>
</select>

Correto: usando aria-label

Quando não está presente ou apropriado nenhum rótulo visível, aria-label fornece um nome acessível diretamente. Note que este rótulo é invisível para utilizadores videntes, por isso use-o apenas quando o contexto já é visualmente claro.

<select aria-label="Estado">
  <option value="ny">New York</option>
  <option value="ca">California</option>
</select>

Learn more:

Deque Reference

Deque University - How To Fix

→