Validación HTML: Al elemento X le falta uno o más de los siguientes atributos: "role".

Acerca de este problema HTML

ARIA (Aplicaciones de Internet Enriquecidas y Accesibles) funciona como un sistema donde los roles definen lo que un elemento es, y los estados y propiedades describen la condición actual o características del elemento. Ciertos atributos ARIA solo son válidos cuando se usan en elementos que tienen un role específico — ya sea declarado explícitamente mediante el atributo role o proporcionado implícitamente por el elemento HTML en sí. Cuando añades un estado o propiedad ARIA a un elemento genérico como un <div> o <span> sin especificar un role, las tecnologías de asistencia no tienen contexto para interpretar ese atributo. Por ejemplo, aria-expanded="true" en un <div> simple le dice a un lector de pantalla que algo está expandido, pero no comunica qué está expandido — ¿es un botón, un menú de navegación, un elemento de árbol? El role proporciona ese contexto crucial.

Esto es importante por varias razones:

Accesibilidad: Los lectores de pantalla y otras tecnologías de asistencia dependen de la combinación de roles y sus estados/propiedades asociados para transmitir información significativa a los usuarios. Una propiedad ARIA sin un role es ambigua y puede llevar a una experiencia confusa.
Cumplimiento de estándares: La especificación WAI-ARIA define qué estados y propiedades están permitidos en qué roles. Usar un atributo ARIA fuera de un contexto de role válido viola la especificación.
Comportamiento predecible: Los navegadores y tecnologías de asistencia pueden manejar atributos ARIA huérfanos de manera inconsistente, llevando a resultados impredecibles entre diferentes plataformas.

Para solucionar este problema, tienes dos enfoques:

Añadir un atributo role explícito al elemento, eligiendo un role que soporte los atributos ARIA que estás usando.
Usar un elemento HTML semántico que ya tenga un role ARIA implícito. Por ejemplo, <nav> tiene un role implícito de navigation, <button> tiene un role implícito de button, y <header> tiene un role implícito de banner. Este es generalmente el enfoque preferido, ya que proporciona interacción de teclado integrada y semántica sin esfuerzo adicional.

Al elegir un role, asegúrate de que los estados y propiedades ARIA que estás usando realmente estén soportados por ese role. Por ejemplo, aria-expanded está soportado por roles como button, combobox, link, treeitem, y otros — pero no por todos los roles. Consulta la documentación de roles WAI-ARIA para verificar la compatibilidad.

Ejemplos

Inválido: propiedad ARIA sin un role

Este <div> usa aria-expanded pero no tiene role, así que el validador no sabe qué tipo de elemento se supone que debe ser.

<div aria-expanded="true">
  Contenidos del menú
</div>

Solucionado: añadiendo un role explícito

Añadir role="button" les dice a las tecnologías de asistencia que esto es un botón que puede expandirse o contraerse.

<div role="button" aria-expanded="true" tabindex="0">
  Contenidos del menú
</div>

Solucionado: usando un elemento HTML semántico en su lugar

Un elemento <button> ya tiene un role button implícito, así que no se necesita un atributo role explícito. Este es el enfoque preferido.

<button aria-expanded="true">
  Alternar menú
</button>

Inválido: `aria-label` en un elemento genérico

Un <span> no tiene role implícito, así que aria-label no tiene contexto significativo aquí.

<span aria-label="Cerrar diálogo">X</span>

Solucionado: usando un elemento semántico o añadiendo un role

<button aria-label="Cerrar diálogo">X</button>

O, si necesitas usar un <span>:

<span role="button" tabindex="0" aria-label="Cerrar diálogo">X</span>

Usando elementos con roles implícitos

Muchos elementos HTML ya tienen roles ARIA implícitos, así que añadir estados y propiedades ARIA a ellos es válido sin un atributo role explícito:

<!-- <nav> tiene role="navigation" implícito -->

<nav aria-label="Navegación principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/about">Acerca de</a></li>
  </ul>
</nav>

<!-- <details> soporta aria-expanded implícitamente -->

<details aria-describedby="help-text">
  <summary>Más información</summary>
  <p id="help-text">Detalles adicionales sobre este tema.</p>
</details>

Como regla general, siempre prefiere elementos HTML semánticos nativos sobre elementos genéricos con roles ARIA. Los elementos nativos vienen con soporte de teclado integrado, gestión del foco y semántica de accesibilidad — reduciendo la cantidad de código personalizado que necesitas escribir y mantener.