ARIA
Alguns papéis exigem um pai específico
- Regra:
aria-required-parent - Gravidade: Crítico
- Nível WCAG A
Por que isso importa
Um role="tab" fora de uma lista de abas, ou um listitem fora de uma lista, não tem contexto. A tecnologia assistiva não consegue dizer “aba 2 de 5” porque não sabe a que o elemento pertence.
Como corrigir
- Envolva os filhos em um elemento com o papel de pai que a especificação exige.
- Mantenha a relação direta — uma div intermediária precisa de role="presentation".
- Se esse pai não existe no design, o papel do filho é que está errado.
Na marcação
<div>
<button role="tab">Overview</button>
</div><div role="tablist">
<button role="tab" aria-selected="true">Overview</button>
</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:
- 1.3.1 Informação e relações (abre em nova aba) — Nível WCAG A
Para aprofundar
Deque University sobre aria-required-parent (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.