Validación HTML: El rol "heading" es innecesario para elementos "h1" a "h6".

Acerca de este problema HTML

Los elementos de encabezado HTML (<h1> hasta <h6>) tienen un significado semántico integrado que los navegadores y las tecnologías de asistencia ya entienden. Según la especificación WAI-ARIA, cada uno de estos elementos lleva un rol heading implícito con un aria-level correspondiente — <h1> tiene aria-level="1", <h2> tiene aria-level="2", y así sucesivamente. Cuando añades explícitamente role="heading" a uno de estos elementos, le estás diciendo al navegador algo que ya sabe, lo que satura tu marcado sin proporcionar ningún beneficio.

Este patrón es parte de un principio más amplio en la creación de ARIA conocido como la primera regla de ARIA: no uses ARIA cuando un elemento HTML nativo ya proporciona la semántica que necesitas. Los roles ARIA redundantes pueden causar confusión para los desarrolladores que mantienen el código, ya que sugiere que el rol podría ser necesario o que el elemento podría no ser reconocido de otra manera como un encabezado. En algunos casos extremos, añadir un aria-level explícito que no coincida con el nivel del encabezado (por ejemplo, aria-level="3" en un <h1>) puede crear información conflictiva para los lectores de pantalla, llevando a una experiencia inconsistente para usuarios de tecnologías de asistencia.

El atributo role="heading" está diseñado para situaciones donde necesitas dar semántica de encabezado a un elemento que no es de encabezado, como un <div> o <span>. En esos casos, también debes incluir el atributo aria-level para especificar el nivel del encabezado. Sin embargo, siempre que sea posible, usar elementos de encabezado nativos es siempre preferible sobre este enfoque basado en ARIA.

Cómo solucionarlo

Elimina role="heading" de cualquier elemento <h1> hasta <h6>.
Elimina aria-level si se añadió junto con el rol redundante y coincide con el nivel nativo del encabezado.
Si genuinamente necesitas que un elemento no estándar actúe como un encabezado, usa role="heading" con aria-level en ese elemento en su lugar — pero prefiere elementos de encabezado nativos siempre que sea posible.

Ejemplos

❌ Rol redundante en un encabezado nativo

<h1 role="heading" aria-level="1">Bienvenido a Mi Sitio</h1>
<h2 role="heading">Sobre Nosotros</h2>
<h3 role="heading" aria-level="3">Nuestra Misión</h3>

Los tres encabezados activarán la advertencia del validador. Los atributos role="heading" y aria-level son completamente innecesarios aquí porque los elementos ya transmiten esta información de forma nativa.

✅ Encabezados nativos sin roles redundantes

<h1>Bienvenido a Mi Sitio</h1>
<h2>Sobre Nosotros</h2>
<h3>Nuestra Misión</h3>

Simplemente eliminar los atributos redundantes resuelve el problema mientras preserva la accesibilidad completa.

✅ Uso correcto del rol heading en un elemento que no es de encabezado

En casos raros donde no puedes usar un elemento de encabezado nativo, el rol heading es apropiado en un elemento genérico:

<div role="heading" aria-level="2">Título de Sección</div>

Esto le dice a las tecnologías de asistencia que traten el <div> como un encabezado de nivel 2. Ten en cuenta que aria-level es requerido aquí ya que un <div> no tiene un nivel de encabezado implícito. Dicho esto, usar un <h2> nativo siempre es la mejor opción:

<h2>Título de Sección</h2>

❌ aria-level conflictivo en un encabezado nativo

Ten especial cuidado con este anti-patrón, donde el nivel explícito contradice al elemento:

<h1 role="heading" aria-level="3">Título de Página</h1>

Esto envía señales mixtas — el elemento es un <h1> pero afirma ser de nivel 3. Los lectores de pantalla pueden comportarse de manera impredecible. Si necesitas un encabezado de nivel 3, usa <h3>: