Validación HTML: Valor incorrecto "alert" para el atributo "role" en el elemento "ul".

Acerca de este problema HTML

El rol ARIA alert se usa para comunicar mensajes importantes al usuario, típicamente urgentes. Cuando un elemento tiene role="alert", las tecnologías de asistencia como los lectores de pantalla anunciarán inmediatamente su contenido al usuario, interrumpiendo lo que estén haciendo en ese momento. Esto lo hace ideal para mensajes de error, advertencias o actualizaciones de estado que requieren atención inmediata.

Sin embargo, no todos los elementos HTML pueden aceptar todos los roles ARIA. La especificación HTML de WHATWG y WAI-ARIA en HTML definen reglas sobre qué roles están permitidos en qué elementos. El elemento <ul> tiene un rol implícito de list, y el rol alert no está entre los roles permitidos en <ul>. Esta restricción existe porque sobrescribir el significado semántico de un elemento de lista con un rol de alerta crea un conflicto — las tecnologías de asistencia ya no transmitirían la estructura de lista a los usuarios, y los elementos hijos (<li>) perderían su contexto significativo como elementos de lista.

Esto importa para la accesibilidad y el cumplimiento de estándares. Si un lector de pantalla encuentra un <ul> con role="alert", el comportamiento se vuelve impredecible. Algunos lectores de pantalla podrían anunciarlo como una alerta pero fallar en transmitir la estructura de lista, mientras que otros podrían ignorar el rol completamente. Los usuarios que dependen de tecnología de asistencia podrían perderse tanto la alerta como la semántica de lista, ambas podrían ser importantes.

La solución depende de tu intención. Si necesitas alertar al usuario sobre contenido que incluye una lista, envuelve el <ul> en un elemento contenedor (como un <div>) y aplica role="alert" a ese contenedor. Si el contenido no necesita ser una lista, reemplaza el <ul> con un elemento más apropiado como <div> o <p>.

Ejemplos

❌ Inválido: `role="alert"` directamente en un `<ul>`

<ul role="alert">
  <li>Your password must be at least 8 characters.</li>
  <li>Your password must contain a number.</li>
</ul>

Esto desencadena el error de validación porque alert no es un rol válido para el elemento <ul>.

✅ Corregido: Envolviendo la lista en un `<div>` con `role="alert"`

<div role="alert">
  <ul>
    <li>Your password must be at least 8 characters.</li>
    <li>Your password must contain a number.</li>
  </ul>
</div>

Aquí, el <div> lleva el role="alert", por lo que las tecnologías de asistencia anunciarán el contenido inmediatamente. El <ul> mantiene su semántica nativa de list, y los elementos <li> se transmiten correctamente como elementos de lista.

✅ Corregido: Usando un elemento que no sea lista cuando la estructura de lista no es necesaria

<div role="alert">
  <p>Your session will expire in 2 minutes.</p>
</div>

Si tu contenido de alerta es un mensaje simple en lugar de una lista de elementos, usa un elemento más apropiado como <p> o <div>.

✅ Corregido: Usando `aria-live` como alternativa para actualizaciones dinámicas

<div aria-live="assertive" role="alert">
  <ul>
    <li>Error: Email address is required.</li>
    <li>Error: Name field cannot be empty.</li>
  </ul>
</div>

El atributo aria-live="assertive" en el contenedor asegura que cuando el contenido se actualice dinámicamente, las tecnologías de asistencia anuncien los cambios inmediatamente. Combinado con role="alert" en el contenedor (no en la lista), esto proporciona notificaciones accesibles robustas mientras preserva la semántica de lista.

Puntos clave a recordar

El atributo role="alert" no puede colocarse en elementos <ul>, <ol> o <li>.
Siempre aplica role="alert" a un elemento contenedor genérico como <div> o <span>.
Si tu contenido de alerta incluye una lista, anida la lista dentro del contenedor de alerta en lugar de hacer que la lista sea la alerta.
El rol alert establece implícitamente aria-live="assertive" y aria-atomic="true", por lo que no necesitas añadir esos por separado cuando uses role="alert".