Ciertos roles ARIA deben contener hijos específicos

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 elementos de menú relacionados). Cuando estos roles hijo requeridos están ausentes, las tecnologías de asistencia como los lectores de pantalla no pueden transmitir correctamente la estructura del componente. Un usuario de lector de pantalla navegando por una vista de árbol, por ejemplo, necesita entender el contenedor padre, elementos individuales y relaciones entre hermanos — ninguna de las cuales se comunica correctamente si los roles hijo esperados faltan.

Este problema afecta críticamente a usuarios que son ciegos, sordociegos, o tienen discapacidades motoras 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 Éxito 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 en que la relación padre-hijo requerida puede establecerse:

• Estructura DOM: Los elementos hijo 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 puede usarse en el padre para asociar explícitamente elementos hijo que existen en otro lugar 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 hijo 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 hijo 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 hijo 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>

Esta 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 hijo 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>

La 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: usando 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 otro lugar 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: usando elementos HTML nativos en su lugar

Los elementos HTML nativos proporcionan automáticamente las relaciones de roles 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

→