Ciertos roles ARIA deben contener hijos particulares

La especificación WAI-ARIA define una jerarquía estricta para muchos roles, donde las relaciones padre-hijo deben mantenerse para que la semántica de accesibilidad funcione según lo previsto. Por ejemplo, un elemento con role="list" debe contener elementos con role="listitem", así como un role="menu" debe contener role="menuitem" (o roles de elemento de menú relacionados). Cuando estos roles hijos requeridos están ausentes, las tecnologías de asistencia como los lectores de pantalla no pueden transmitir adecuadamente la estructura del componente. Un usuario de lector de pantalla navegando por una vista de árbol, por ejemplo, necesita entender el contenedor padre, los elementos individuales y las relaciones entre hermanos — ninguna de las cuales se comunica correctamente si faltan los roles hijos esperados.

Este problema afecta críticamente a los usuarios que son ciegos, sordociegos o tienen discapacidades de movilidad y dependen de tecnologías de asistencia para navegar e interactuar con widgets complejos. Sin la jerarquía de roles correcta, estos usuarios pueden no entender con qué tipo de contenido están interactuando, cuántos elementos existen, o cómo navegar entre ellos.

Esta regla se relaciona con el Criterio de Conformidad 1.3.1 de WCAG 2.0/2.1/2.2: Información y relaciones (Nivel A), que requiere que la información, estructura y relaciones transmitidas a través de la presentación puedan determinarse programáticamente. Cuando los roles ARIA carecen de sus hijos requeridos, las relaciones estructurales se rompen y no pueden ser determinadas programáticamente por las tecnologías de asistencia.

Hay dos formas de establecer la relación padre-hijo requerida:

• Estructura DOM: Los elementos hijos con los roles requeridos son descendientes directos (o descendientes apropiados) del elemento padre en el DOM.
• aria-owns: Cuando la jerarquía DOM no coincide con la estructura del árbol de accesibilidad prevista, el atributo aria-owns se puede usar en el padre para asociar explícitamente elementos hijos que existen en otra parte del DOM.

Cómo solucionarlo

1. Identifica el rol ARIA en el elemento padre.
2. Consulta la especificación WAI-ARIA para determinar qué roles hijos son requeridos para ese rol padre.
3. Asegúrate de que todos los hijos directos (o hijos poseídos vía aria-owns) tengan los roles requeridos correctos.
4. Si no puedes añadir los roles hijos requeridos, considera si el rol padre es apropiado para tu caso de uso, o usa elementos HTML nativos que proporcionen estas semánticas automáticamente.

Requisitos comunes de roles padre-hijo

Ejemplos

Incorrecto: faltan roles hijos requeridos

Este tablist tiene hijos que carecen del rol tab requerido:

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

Este list contiene elementos <div> sin el rol listitem:

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

Este menu tiene hijos con roles incorrectos:

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

Correcto: roles hijos requeridos presentes

El tablist ahora contiene hijos con 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>

El list contiene hijos con role="listitem":

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

El menu contiene hijos con role="menuitem":

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

Correcto: usar aria-owns para hijos fuera de la jerarquía DOM

Cuando los hijos requeridos no son descendientes directos en el DOM, usa aria-owns para establecer la relación:

<div role="tablist" aria-owns="tab1 tab2 tab3">
<!-- Las pestañas pueden renderizarse en otra parte del 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>

Correcto: usar elementos HTML nativos en su lugar

Los elementos HTML nativos proporcionan automáticamente las relaciones de rol correctas sin ningún atributo ARIA:

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

Siempre que sea posible, prefiere elementos HTML nativos sobre roles ARIA. Los elementos nativos vienen con semántica incorporada, comportamiento de teclado y soporte de accesibilidad que no requieren gestión manual de roles.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - The Roles Model

→