Os campos de alternância ARIA devem ter um nome acessível

Os campos de alternância são controlos interativos que permitem aos utilizadores selecionar opções, alternar definições ou fazer escolhas. Quando estes controlos são construídos usando papéis ARIA em vez de elementos HTML nativos, o navegador não deriva automaticamente um nome de um elemento <label> ou conteúdo interno da forma como faria para um <input type="checkbox"> nativo. Deve fornecer explicitamente um nome acessível para que as tecnologias assistivas possam anunciar o propósito do controlo.

Sem um nome acessível, um leitor de ecrã pode anunciar algo como “checkbox, desmarcada” sem qualquer indicação do que a checkbox representa. Isto torna a interface inutilizável para pessoas cegas, surdocegas ou que dependem de software de controlo por voz. Os utilizadores com deficiências motoras que usam ferramentas de reconhecimento de voz também dependem de nomes acessíveis para direcionar e ativar controlos por voz.

Esta regra aplica-se a elementos com os seguintes papéis ARIA:

• checkbox
• menuitemcheckbox
• menuitemradio
• radio
• radiogroup
• switch

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o WCAG 2.0, 2.1 e 2.2 Critério de Sucesso 4.1.2: Nome, Papel, Valor (Nível A). Este critério exige que para todos os componentes da interface do utilizador, o nome e o papel possam ser determinados programaticamente. Os campos de alternância que carecem de um nome acessível violam este requisito porque as tecnologias assistivas não conseguem transmitir o propósito do controlo ao utilizador.

Como corrigir

Pode fornecer um nome acessível para campos de alternância ARIA usando qualquer uma destas técnicas:

1. Conteúdo de texto interno — Coloque texto descritivo dentro do elemento. O navegador usa este texto como o nome acessível.
2. aria-label — Adicione um atributo aria-label com uma string descritiva diretamente no elemento.
3. aria-labelledby — Referencie o id de outro elemento que contenha o texto da etiqueta. Certifique-se de que o elemento referenciado existe realmente no DOM.
4. title — Use o atributo title como último recurso. Embora forneça um nome acessível, é menos descobrível para utilizadores videntes e não é exposto de forma consistente por todas as tecnologias assistivas.

Importante: Se usar aria-labelledby, certifique-se de que o id referenciado corresponde a um elemento que existe e contém texto significativo. Apontar para um id não existente resulta em nenhum nome acessível.

Exemplos

Incorreto: campos de alternância sem nomes acessíveis

<!-- checkbox com uma referência aria-labelledby quebrada -->

<div role="checkbox" aria-checked="false" aria-labelledby="nonexistent-id"></div>

<!-- menuitemcheckbox sem nome -->

<ul role="menu">
  <li role="menuitemcheckbox" aria-checked="true"></li>
</ul>

<!-- menuitemradio sem nome -->

<ul role="menu">
  <li role="menuitemradio" aria-checked="false"></li>
</ul>

<!-- radio sem nome -->

<div role="radiogroup">
  <div role="radio" aria-checked="false" tabindex="0"></div>
</div>

<!-- switch sem nome e spans filhos vazios -->

<div role="switch" aria-checked="true">
  <span></span>
  <span></span>
</div>

Cada um destes elementos não tem conteúdo de texto, nem aria-label válido, nem aria-labelledby funcionante, nem title. Um leitor de ecrã não consegue anunciar o que representam.

Correto: campos de alternância com nomes acessíveis

<!-- checkbox: nome do conteúdo de texto interno -->

<div role="checkbox" aria-checked="false" tabindex="0">
  Subscribe to newsletter
</div>

<!-- menuitemcheckbox: nome do aria-label -->

<ul role="menu">
  <li role="menuitemcheckbox"
      aria-checked="true"
      aria-label="Word wrap">
  </li>
</ul>

<!-- menuitemradio: nome do aria-labelledby -->

<p id="font-label">Sans-serif</p>
<ul role="menu">
  <li role="menuitemradio"
      aria-checked="true"
      aria-labelledby="font-label">
  </li>
</ul>

<!-- radio: nome do title -->

<div role="radiogroup" aria-label="Crust type">
  <div role="radio"
       aria-checked="false"
       tabindex="0"
       title="Regular Crust">
  </div>
</div>

<!-- switch: nome do aria-label -->

<div role="switch"
     aria-checked="true"
     aria-label="Dark mode"
     tabindex="0">
  <span>off</span>
  <span>on</span>
</div>

Preferível: use elementos HTML nativos quando possível

Os elementos HTML nativos vêm com mecanismos de nome acessível incorporados e comportamento de teclado. Sempre que possível, prefira-os em vez de campos de alternância ARIA personalizados:

<!-- Checkbox nativa com uma etiqueta -->

<label>
  <input type="checkbox"> Subscribe to newsletter
</label>

<!-- Botões radio nativos com um fieldset -->

<fieldset>
  <legend>Crust type</legend>
  <label><input type="radio" name="crust" value="regular"> Regular Crust</label>
  <label><input type="radio" name="crust" value="thin"> Thin Crust</label>
</fieldset>

Usar elementos nativos reduz o risco de problemas de acessibilidade e elimina a necessidade de gerir manualmente papéis, estados e interações de teclado.

Learn more:

Deque Reference

Deque University - How To Fix

→