← Todas as regras

ARIA

Alguns papéis exigem filhos específicos

• Regra: aria-required-children
• Gravidade: Crítico
• Nível WCAG A

Por que isso importa

Uma lista de abas contém abas; uma lista contém itens de lista. Quando os filhos exigidos faltam, o componente inteiro desaba na árvore de acessibilidade e nada mais é anunciado corretamente.

Como corrigir

1. Dê aos filhos diretos o papel que o pai espera (role="tab" dentro de role="tablist").
2. Se houver um contêiner no meio, dê a ele role="presentation" para não quebrar a relação.
3. Remova o papel do pai se a estrutura não for de fato esse componente.

Na marcação

<div role="tablist">
  <div>Overview</div>
</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-children (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.