Roles ARIA con hijos obligatorios

¿Qué son los hijos obligatorios de un rol ARIA?

Cuando añades un rol ARIA a un elemento, la especificación WAI-ARIA define qué roles deben tener sus hijos directos. Si no los tienes, el lector de pantalla no puede transmitir correctamente el contexto al usuario.

El criterio WCAG 1.3.1 exige que la información, la estructura y las relaciones transmitidas visualmente también estén disponibles para la tecnología de asistencia. Un rol ARIA sin los hijos esperados rompe esa relación.

¿Por qué es importante?

Imagina que el lector de pantalla anuncia «lista» pero después no puede identificar ningún elemento de la lista. El usuario sabe que hay una lista pero no cuántos elementos tiene ni dónde se encuentra dentro de ella.

Los roles ARIA establecen una jerarquía semántica. Un elemento con role="list" necesita hijos con role="listitem". Un role="tablist" necesita hijos con role="tab". Sin estos hijos esperados, la relación semántica queda rota y la tecnología de asistencia no puede hacer su trabajo.

Cómo corregirlo

La solución más sencilla es usar HTML semántico nativo siempre que sea posible. Los elementos HTML nativos ya incorporan los roles implícitos correctos sin ningún atributo ARIA adicional:

<!-- ✅ HTML semántico nativo — no hace falta ningún rol ARIA -->
<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
</ul>

Si tienes que usar ARIA personalizado, asegúrate de que todos los hijos directos tengan el rol obligatorio correspondiente:

<!-- ✅ Hijos con el rol requerido -->
<div role="list">
  <div role="listitem">Primer elemento</div>
  <div role="listitem">Segundo elemento</div>
</div>

Los roles padre y sus hijos obligatorios más habituales:

Errores habituales

El error más frecuente en webs WordPress con Elementor: el Loop Container añade automáticamente role="list" al contenedor, pero los elementos hijos generados no tienen role="listitem":

<!-- ❌ Generado por Elementor Loop Container -->
<div class="elementor-loop-container elementor-grid" role="list">
  <div class="elementor-post">...</div>
</div>

Para corregirlo, añade role="listitem" a los elementos hijos mediante JavaScript o, si el constructor lo permite, desde la configuración del elemento. Si el role="list" no aporta valor semántico real, puedes eliminarlo completamente.

Otro error habitual: eliminar el rol padre sin revisar si es necesario para la accesibilidad. Si tienes un componente de pestañas (role="tablist"), no puedes simplemente quitar el rol: tienes que asegurarte de que los hijos también están correctamente etiquetados.