ARIA
Interruptores, botões de opção e caixas de seleção precisam de nome
- Regra:
aria-toggle-field-name - Gravidade: Grave
- Nível WCAG A
Por que isso importa
Um interruptor sem nome é anunciado como “interruptor, desligado”: o estado está claro, o assunto não. Num painel de configurações, todas as linhas soam iguais.
Como corrigir
- Associe o rótulo visível com aria-labelledby, ou use um <label> nativo.
- Sem rótulo visível, acrescente aria-label nomeando a configuração.
- Não confie no texto ao lado: proximidade na tela não é relação no código.
Na marcação
<div role="switch" aria-checked="false" tabindex="0"></div><div role="switch" aria-checked="false" tabindex="0" aria-label="Dark mode"></div>A exigência por trás disso
Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:
- 4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A
Para aprofundar
Deque University sobre aria-toggle-field-name (abre em nova aba)
A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.
Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.