Certas funções ARIA devem estar contidas por pais específicos

A especificação WAI-ARIA define uma hierarquia rigorosa para muitas funções. Algumas funções só são significativas quando aparecem como filhos de funções pai específicas. Por exemplo, um tab deve ser propriedade de um tablist, um listitem deve ser propriedade de um list ou group, e um menuitem deve ser propriedade de um menu ou menubar. Quando estas relações pai-filho estão em falta, a função torna-se semanticamente órfã — as tecnologias assistivas como leitores de ecrã não conseguem comunicar o contexto, posição ou propósito do elemento ao utilizador.

Por que isto importa

Esta regra relaciona-se com o Critério de Sucesso 1.3.1 das WCAG 2.0/2.1/2.2: Informação e Relações (Nível A), que exige que informação, estrutura e relações transmitidas visualmente estejam também disponíveis programaticamente. Quando uma função ARIA carece do seu pai obrigatório, a relação estrutural perde-se na árvore de acessibilidade.

Os utilizadores mais afetados incluem:

• Utilizadores cegos e surdocegos que dependem de leitores de ecrã. Sem a função pai correta, os leitores de ecrã não podem anunciar contexto como “item 3 de 5 numa lista” ou “separador 2 de 4.”
• Utilizadores com deficiências motoras que dependem de tecnologia assistiva para navegação. Funções pai em falta podem quebrar padrões esperados de interação com teclado para widgets compostos como menus, tablists e árvores.

O impacto no utilizador é crítico — uma função órfã pode tornar um widget inteiro inutilizável para utilizadores de tecnologia assistiva.

Funções pai obrigatórias comuns

Aqui estão algumas funções frequentemente utilizadas e os seus pais obrigatórios:

Como corrigir o problema

1. Envolva o elemento na sua função pai obrigatória. A correção mais simples é garantir que a estrutura DOM reflete a hierarquia obrigatória. Coloque o elemento dentro de um contentor que tem a função pai correta.

2. Use aria-owns quando a estrutura DOM não corresponde. Se o elemento filho não pode ser um descendente DOM do pai (por exemplo, devido a restrições de layout), pode usar aria-owns no elemento pai para estabelecer a relação programaticamente. O atributo aria-owns diz às tecnologias assistivas que o elemento referenciado deve ser tratado como filho, independentemente da posição DOM.

3. Verifique a especificação WAI-ARIA para a função específica que está a usar para confirmar que funções pai são obrigatórias.

Exemplos

Incorreto: listitem sem pai list

A função listitem requer um pai com role="list" ou role="group", mas aqui fica diretamente dentro de um div simples:

<div>
  <div role="listitem">Maçãs</div>
  <div role="listitem">Bananas</div>
  <div role="listitem">Cerejas</div>
</div>

Correto: listitem dentro de um pai list

<div role="list">
  <div role="listitem">Maçãs</div>
  <div role="listitem">Bananas</div>
  <div role="listitem">Cerejas</div>
</div>

Incorreto: tab sem pai tablist

<div>
  <button role="tab" aria-selected="true">Separador 1</button>
  <button role="tab" aria-selected="false">Separador 2</button>
</div>

Correto: tab dentro de um pai tablist

<div role="tablist">
  <button role="tab" aria-selected="true">Separador 1</button>
  <button role="tab" aria-selected="false">Separador 2</button>
</div>

Correto: usando aria-owns quando a estrutura DOM difere

Quando restrições de layout impedem o aninhamento do filho dentro do pai no DOM, use aria-owns para estabelecer a relação:

<div role="tablist" aria-owns="tab1 tab2">
<!-- Os separadores estão noutro lugar no DOM devido a necessidades de layout -->

</div>

<div id="tab1" role="tab" aria-selected="true">Separador 1</div>
<div id="tab2" role="tab" aria-selected="false">Separador 2</div>

Incorreto: menuitem fora de um menu

<div>
  <button role="menuitem">Cortar</button>
  <button role="menuitem">Copiar</button>
  <button role="menuitem">Colar</button>
</div>

Correto: menuitem dentro de um menu

<div role="menu">
  <button role="menuitem">Cortar</button>
  <button role="menuitem">Copiar</button>
  <button role="menuitem">Colar</button>
</div>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - Roles

→