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 definições, ou fazer escolhas. Quando estes controlos são construídos usando roles ARIA em vez de elementos HTML nativos, o browser não deriva automaticamente um nome de um elemento <label> ou conteúdo interno 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, não selecionada” sem indicação alguma 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 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 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 das WCAG 2.0, 2.1, e 2.2: Name, Role, Value (Nível A). Este critério requer que para todos os componentes da interface de utilizador, o nome e 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

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 browser 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 é 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, nem aria-label válido, nem aria-labelledby funcional, 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">
  Subscrever newsletter
</div>

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

<ul role="menu">
  <li role="menuitemcheckbox"
      aria-checked="true"
      aria-label="Quebra de linha">
  </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="Tipo de massa">
  <div role="radio"
       aria-checked="false"
       tabindex="0"
       title="Massa Regular">
  </div>
</div>

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

<div role="switch"
     aria-checked="true"
     aria-label="Modo escuro"
     tabindex="0">
  <span>desligado</span>
  <span>ligado</span>
</div>

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

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"> Subscrever newsletter
</label>

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

<fieldset>
  <legend>Tipo de massa</legend>
  <label><input type="radio" name="crust" value="regular"> Massa Regular</label>
  <label><input type="radio" name="crust" value="thin"> Massa Fina</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

→