← Todas as regras

ARIA

Os valores dos atributos ARIA precisam ser válidos

• Regra: aria-valid-attr-value
• Gravidade: Crítico
• Nível WCAG A

Por que isso importa

Um aria-labelledby apontando para um id inexistente deixa o elemento sem nome algum, e um valor de estado inválido é tratado como ausente. A marcação parece certa e não faz nada.

Como corrigir

1. Confira se todo id referenciado por aria-labelledby, aria-describedby ou aria-controls existe na página.
2. Use exatamente os valores permitidos: true, false, mixed, undefined.
3. Atenção aos ids gerados por componente — id duplicado ou recriado na renderização é a causa habitual.

Na marcação

<input aria-labelledby="email-label">
<!-- no element with id="email-label" -->

<span id="email-label">Email</span>
<input aria-labelledby="email-label">

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-valid-attr-value (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.