Validación HTML: El rol "main" es innecesario para el elemento "main".

Acerca de este problema HTML

La especificación ARIA define un conjunto de roles que comunican el propósito de un elemento a las tecnologías asistivas como los lectores de pantalla. Muchos elementos HTML tienen roles ARIA implícitos — semántica integrada que se mapea directamente a los roles ARIA sin necesidad de marcado adicional. El elemento <main> es uno de estos: automáticamente comunica el rol de landmark main a las tecnologías asistivas.

Cuando escribes <main role="main">, estás declarando explícitamente algo que el navegador y las tecnologías asistivas ya conocen. El validador del W3C advierte sobre esta redundancia porque puede indicar una incomprensión de cómo funcionan las semánticas nativas de HTML. Aunque no rompe nada, los atributos innecesarios añaden ruido a tu marcado y pueden hacer que el código sea más difícil de mantener.

Este principio se aplica ampliamente en HTML. Por ejemplo, <nav> implícitamente tiene role="navigation", <header> implícitamente tiene role="banner" (cuando no está anidado dentro de un elemento de sección), y <button> implícitamente tiene role="button". Reiterar explícitamente estos roles está desaconsejado tanto por el W3C como por la especificación ARIA in HTML, que establece: “Establecer un rol ARIA y/o atributo `aria-` que coincida con la semántica ARIA implícita es innecesario y NO SE RECOMIENDA.”*

Por qué esto importa

Claridad del código: Los atributos redundantes hacen que tu HTML sea más difícil de leer y pueden confundir a otros desarrolladores haciéndoles pensar que el atributo es necesario.
Cumplimiento de estándares: El validador del W3C genera una advertencia, que puede ocultar problemas más importantes en tus reportes de validación.
Mejores prácticas: Seguir el principio de usar semánticas nativas de HTML sin ARIA redundante mantiene tu código limpio y se alinea con la primera regla de ARIA: “Si puedes usar un elemento HTML nativo con la semántica y el comportamiento que requieres ya integrados, hazlo, en lugar de reutilizar un elemento y añadir un rol ARIA.”

Cómo solucionarlo

Elimina el atributo role="main" de cualquier elemento <main>. El significado semántico ya está proporcionado por el elemento mismo.

Si estás trabajando con un <div> u otro elemento genérico que necesita el rol de landmark main (por ejemplo, en un código base heredado que no puede usar <main>), entonces role="main" es apropiado y necesario en ese elemento.

Ejemplos

❌ Rol redundante en `<main>`

<main role="main">
  <h1>Welcome to my site</h1>
  <p>This is the primary content of the page.</p>
</main>

El atributo role="main" es innecesario aquí porque <main> ya lo implica.

✅ Usando `<main>` sin un rol redundante

<main>
  <h1>Welcome to my site</h1>
  <p>This is the primary content of the page.</p>
</main>

✅ Usando `role="main"` en un elemento no semántico (cuando sea necesario)

<div role="main">
  <h1>Welcome to my site</h1>
  <p>This is the primary content of the page.</p>
</div>

Este enfoque es válido cuando no puedes usar el elemento <main> — por ejemplo, debido a restricciones del framework o requisitos de compatibilidad con navegadores heredados. En la mayoría de proyectos modernos, prefiere el elemento <main> en su lugar.