Acerca de este problema HTML
En HTML, cada elemento tiene un conjunto de roles ARIA que se le permite llevar. El elemento ul tiene implícitamente el rol list, y la especificación ARIA solo permite ciertos roles para anularlo — específicamente directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, y tree. El rol navigation no está entre ellos.
El rol navigation es un rol de referencia, lo que significa que identifica una sección principal de la página dedicada a enlaces de navegación. HTML5 introdujo el elemento nav específicamente para este propósito, y lleva el rol navigation implícitamente — no se necesita atributo role. Cuando colocas role="navigation" en un ul, estás entrando en conflicto con la semántica del elemento. Un ul representa una lista de elementos, no una referencia de navegación. Las tecnologías de asistencia como los lectores de pantalla dependen de asignaciones de rol correctas para ayudar a los usuarios a entender la estructura de la página y navegar de manera eficiente. Un rol incorrecto puede confundir a los usuarios al tergiversar lo que realmente es el elemento.
Más allá de las preocupaciones de accesibilidad, este es un problema de cumplimiento de estándares. El validador del W3C hace cumplir las reglas definidas en la especificación ARIA en HTML, que mapea cada elemento HTML a sus roles permitidos. Violar estas reglas significa que tu marcado es inválido y puede comportarse de manera impredecible en diferentes navegadores y tecnologías de asistencia.
La solución es sencilla: usa un elemento nav como envoltura para tu lista de navegación. Esto te da la semántica de referencia navigation automáticamente, mientras que el ul mantiene su rol list apropiado. Ambos elementos trabajan juntos — el nav le dice a las tecnologías de asistencia “esta es una sección de navegación”, y el ul les dice “aquí hay una lista de enlaces”.
Ejemplos
❌ Incorrecto: rol navigation en un ul
Esto desencadena el error de validación porque navigation no es un rol permitido para ul.
<ul role="navigation">
<li><a href="/">Inicio</a></li>
<li><a href="/about">Acerca de</a></li>
<li><a href="/contact">Contacto</a></li>
</ul>
✅ Correcto: envolviendo el ul en un elemento nav
El elemento nav proporciona la referencia navigation implícitamente. No se necesita atributo role.
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/about">Acerca de</a></li>
<li><a href="/contact">Contacto</a></li>
</ul>
</nav>✅ Correcto: etiquetando múltiples referencias de navegación
Cuando una página tiene más de un elemento nav, usa aria-label para distinguirlos para los usuarios de lectores de pantalla.
<nav aria-label="Principal">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/about">Acerca de</a></li>
<li><a href="/contact">Contacto</a></li>
</ul>
</nav>
<nav aria-label="Pie de página">
<ul>
<li><a href="/privacy">Política de Privacidad</a></li>
<li><a href="/terms">Términos de Servicio</a></li>
</ul>
</nav>
✅ Correcto: usando un rol permitido en ul
Si necesitas que el ul se comporte como algo diferente a una lista simple — por ejemplo, un menú en una aplicación web — usa uno de sus roles permitidos.
<ul role="menubar">
<li role="menuitem"><a href="/">Inicio</a></li>
<li role="menuitem"><a href="/about">Acerca de</a></li>
<li role="menuitem"><a href="/contact">Contacto</a></li>
</ul>
Ten en cuenta que los roles menu y menubar están destinados a menús de estilo aplicación con interacción de teclado, no para navegación simple de sitio web. Para navegación estándar de sitio web, el enfoque de envoltura con nav es casi siempre la elección correcta.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.