Determinados papéis ARIA devem conter filhos específicos

A especificação WAI-ARIA define uma hierarquia rigorosa para muitos papéis, onde as relações pai e filho devem ser mantidas para que a semântica de acessibilidade funcione conforme pretendido. Por exemplo, um elemento com role="list" deve conter elementos com role="listitem", tal como um role="menu" deve conter role="menuitem" (ou papéis de item de menu relacionados). Quando estes papéis filho obrigatórios estão ausentes, as tecnologias assistivas como leitores de ecrã não conseguem transmitir adequadamente a estrutura do componente. Um utilizador de leitor de ecrã a navegar numa vista em árvore, por exemplo, precisa de compreender o contentor pai, itens individuais, e relações entre irmãos — nada disto é comunicado corretamente se os papéis filho esperados estiverem em falta.

Esta questão afeta criticamente utilizadores que são cegos, surdocegos, ou têm deficiências de mobilidade e dependem de tecnologias assistivas para navegar e interagir com widgets complexos. Sem a hierarquia de papéis correta, estes utilizadores podem não compreender com que tipo de conteúdo estão a interagir, quantos itens existem, ou como navegar entre eles.

Esta regra relaciona-se com o Critério de Sucesso 1.3.1 do WCAG 2.0/2.1/2.2: Informações e Relações (Nível A), que exige que informações, estrutura e relações transmitidas através da apresentação possam ser determinadas programaticamente. Quando os papéis ARIA carecem dos seus filhos obrigatórios, as relações estruturais são quebradas e não podem ser determinadas programaticamente pelas tecnologias assistivas.

Há duas formas de estabelecer a relação pai-filho obrigatória:

• Estrutura DOM: Os elementos filho com os papéis obrigatórios são descendentes diretos (ou descendentes apropriados) do elemento pai no DOM.
• aria-owns: Quando a hierarquia DOM não corresponde à estrutura da árvore de acessibilidade pretendida, o atributo aria-owns pode ser usado no pai para associar explicitamente elementos filho que existem noutro local do DOM.

Como corrigir

1. Identifique o papel ARIA no elemento pai.
2. Consulte a especificação WAI-ARIA para determinar que papéis filho são obrigatórios para esse papel pai.
3. Assegure-se de que todos os filhos diretos (ou filhos possuídos via aria-owns) têm os papéis obrigatórios corretos.
4. Se não conseguir adicionar os papéis filho obrigatórios, considere se o papel pai é apropriado para o seu caso de uso, ou use elementos HTML nativos que fornecem estas semânticas automaticamente.

Requisitos comuns de papéis pai-filho

Exemplos

Incorreto: papéis filho obrigatórios em falta

Este tablist tem filhos que carecem do papel tab obrigatório:

<div role="tablist">
  <div>Tab 1</div>
  <div>Tab 2</div>
  <div>Tab 3</div>
</div>

Esta list contém elementos <div> sem o papel listitem:

<div role="list">
  <div>Apple</div>
  <div>Banana</div>
  <div>Cherry</div>
</div>

Este menu tem filhos com papéis incorretos:

<div role="menu">
  <div role="option">Cut</div>
  <div role="option">Copy</div>
  <div role="option">Paste</div>
</div>

Correto: papéis filho obrigatórios presentes

O tablist agora contém filhos com role="tab":

<div role="tablist">
  <div role="tab" aria-selected="true">Tab 1</div>
  <div role="tab">Tab 2</div>
  <div role="tab">Tab 3</div>
</div>

A list contém filhos com role="listitem":

<div role="list">
  <div role="listitem">Apple</div>
  <div role="listitem">Banana</div>
  <div role="listitem">Cherry</div>
</div>

O menu contém filhos com role="menuitem":

<div role="menu">
  <div role="menuitem">Cut</div>
  <div role="menuitem">Copy</div>
  <div role="menuitem">Paste</div>
</div>

Correto: usando aria-owns para filhos fora da hierarquia DOM

Quando os filhos obrigatórios não são descendentes diretos no DOM, use aria-owns para estabelecer a relação:

<div role="tablist" aria-owns="tab1 tab2 tab3">
<!-- Os separadores podem ser renderizados noutro local do DOM -->

</div>

<div role="tab" id="tab1" aria-selected="true">Tab 1</div>
<div role="tab" id="tab2">Tab 2</div>
<div role="tab" id="tab3">Tab 3</div>

Correto: usando elementos HTML nativos em alternativa

Os elementos HTML nativos fornecem automaticamente as relações de papéis corretas sem quaisquer atributos ARIA:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Sempre que possível, prefira elementos HTML nativos em vez de papéis ARIA. Os elementos nativos vêm com semânticas integradas, comportamento de teclado, e suporte de acessibilidade que não requerem gestão manual de papéis.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - The Roles Model

→