← Todas as regras

ARIA

Alguns atributos ARIA contradizem o elemento nativo

• Regra: aria-conditional-attr
• Gravidade: Grave
• Nível WCAG A

Por que isso importa

Uma caixa de seleção já informa se está marcada. Acrescentar aria-checked permite que os dois discordem, e a tecnologia assistiva acredita no atributo: o estado anunciado pode ser o oposto do que aparece na tela.

Como corrigir

1. Remova o atributo ARIA e deixe o elemento nativo informar o próprio estado.
2. Controle o estado pela propriedade do DOM (checked, selected, disabled).
3. Reserve estados ARIA para controles personalizados feitos de elementos genéricos, onde nada mais os informa.

Na marcação

<input type="checkbox" aria-checked="true">

<input type="checkbox" checked>

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-conditional-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.