Certas funções ARIA devem conter filhos específicos

A especificação WAI-ARIA define uma hierarquia rigorosa para muitas funções, onde as relações pai e filho devem ser mantidas para que a semântica de acessibilidade funcione como pretendido. Por exemplo, um elemento com role="list" deve conter elementos com role="listitem", tal como um role="menu" deve conter role="menuitem" (ou funções de item de menu relacionadas). Quando estas funções filhas obrigatórias 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ã que navega numa vista em árvore, por exemplo, precisa de compreender o contentor pai, os itens individuais e as relações entre irmãos — nada do qual é comunicado corretamente se as funções filhas esperadas estiverem em falta.

Este problema 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 correta de funções, estes utilizadores podem não compreender que tipo de conteúdo estão a utilizar, quantos itens existem ou como navegar entre eles.

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

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

• Estrutura DOM: Os elementos filhos com as funções obrigatórias são descendentes diretos (ou descendentes apropriados) do elemento pai no DOM.
• aria-owns: Quando a hierarquia DOM não corresponde à estrutura pretendida da árvore de acessibilidade, o atributo aria-owns pode ser usado no pai para associar explicitamente elementos filhos que existem noutro local no DOM.

Como corrigir

1. Identifique a função ARIA no elemento pai.
2. Consulte a especificação WAI-ARIA para determinar que funções filhas são obrigatórias para essa função pai.
3. Certifique-se de que todos os filhos diretos (ou filhos possuídos via aria-owns) têm as funções obrigatórias corretas.
4. Se não conseguir adicionar as funções filhas obrigatórias, considere se a função pai é apropriada para o seu caso de uso, ou use elementos HTML nativos que fornecem estas semânticas automaticamente.

Requisitos comuns de funções pai-filho

Exemplos

Incorreto: Funções filhas obrigatórias em falta

Esta tablist tem filhos que carecem da função tab obrigatória:

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

Esta list contém elementos <div> sem a função listitem:

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

Este menu tem filhos com funções incorretas:

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

Correto: Funções filhas obrigatórias presentes

A 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: Usar 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 no 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: Usar elementos HTML nativos em vez disso

Os elementos HTML nativos fornecem automaticamente as relações de função 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 funções ARIA. Os elementos nativos vêm com semânticas incorporadas, comportamento de teclado e suporte de acessibilidade que não requerem gestão manual de funções.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - The Roles Model

→