Rampsight

Todas as regras

ARIA

Alguns papéis exigem um pai específico

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

  1. Envolva os filhos em um elemento com o papel de pai que a especificação exige.
  2. Mantenha a relação direta — uma div intermediária precisa de role="presentation".
  3. Se esse pai não existe no design, o papel do filho é que está errado.

Na marcação

Falha
<div>
  <button role="tab">Overview</button>
</div>
Passa
<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:

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.