ARIA
Atributos ARIA precisam ser permitidos pelo papel
- Regra:
aria-allowed-attr - Gravidade: Crítico
- Nível WCAG A
Por que isso importa
Um atributo que o papel não suporta é ignorado por algumas tecnologias assistivas e mal interpretado pelas demais: o controle passa a anunciar um estado que não é o dele.
Como corrigir
- Verifique quais atributos aria-* o papel do elemento aceita e remova os outros.
- Se o estado necessário não é suportado, o papel provavelmente está errado — use o papel a que esse estado pertence.
- Prefira um elemento nativo (button, input, select): ele já traz os estados certos.
Na marcação
<div role="button" aria-checked="true">Bold</div><div role="button" aria-pressed="true">Bold</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-allowed-attr (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.