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

Campos de alternância são controlos interativos que permitem aos utilizadores selecionar opções, alternar configurações ou fazer escolhas. Quando estes controlos são construídos usando roles ARIA em vez de elementos HTML nativos, o navegador não deriva automaticamente um nome de um elemento <label> ou do conteúdo interno da mesma forma que faria para um <input type="checkbox"> nativo. Você 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, desmarcado” 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. Utilizadores com deficiências de mobilidade que usam ferramentas de reconhecimento de fala também dependem de nomes acessíveis para direcionar e ativar controlos por voz.

Esta regra aplica-se a elementos com os seguintes roles ARIA:

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

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o Critério de Sucesso 4.1.2 do WCAG 2.0, 2.1 e 2.2: Nome, Role, Valor (Nível A). Este critério requer que para todos os componentes de interface do utilizador, o nome e o role possam ser determinados programaticamente. 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

Você 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 contém 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 visuais e não é consistentemente exposto 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 inexistente 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, nenhum aria-label válido, nenhum aria-labelledby funcionando e nenhum 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 de aria-label -->

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

<!-- menuitemradio: nome de 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 de title -->

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

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

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

Preferido: Use elementos HTML nativos quando possível

Elementos HTML nativos vêm com mecanismos de nome acessível e comportamento de teclado integrados. 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 roles, estados e interações de teclado.

Learn more:

Deque Reference

Deque University - How To Fix

→