Certos roles ARIA devem conter filhos específicos

A especificação WAI-ARIA define uma hierarquia rigorosa para muitos roles, onde as relações pai-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 roles de item de menu relacionados). Quando estes roles filhos 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ã que navega numa vista em árvore, por exemplo, precisa de compreender o contentor principal, itens individuais e relações entre irmãos — nada disto é comunicado corretamente se os roles filhos esperados estiverem em falta.

Este problema afeta criticamente utilizadores que são cegos, surdocegos, ou têm deficiências motoras e dependem de tecnologias assistivas para navegar e interagir com widgets complexos. Sem a hierarquia correta de roles, estes utilizadores podem não compreender 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 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 através da apresentação possam ser determinadas programaticamente. Quando os roles 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 os roles obrigatórios 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 do DOM.

Como corrigir

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

Requisitos comuns de roles pai-filho

Exemplos

Incorreto: roles filhos obrigatórios em falta

Este tablist tem filhos que carecem do role 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 role listitem:

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

Este menu tem filhos com roles incorretos:

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

Correto: roles filhos 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 vez disso

Os elementos HTML nativos fornecem automaticamente as relações de role 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 roles 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 roles.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - The Roles Model

→