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

Acerca de este problema HTML

La especificación HTML define roles semánticos incorporados para muchos elementos, y el elemento <header> es uno de ellos. Cuando un <header> es hijo directo de <body> (o al menos no está anidado dentro de un elemento de sección), los navegadores y las tecnologías de asistencia ya lo interpretan como un landmark banner: la región de la página que típicamente contiene el logo del sitio, navegación y otro contenido introductorio. Añadir explícitamente role="banner" duplica lo que el navegador ya sabe, lo que agrega ruido innecesario a tu código.

Este principio es parte de la orientación de la especificación WAI-ARIA sobre el uso de roles ARIA: la primera regla de ARIA es “Si puedes usar un elemento HTML nativo o un atributo con la semántica y el comportamiento que requieres ya incorporados, en lugar de reutilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo”. Los roles redundantes normalmente no rompen nada, pero ensucian el código, pueden confundir a los desarrolladores que mantienen el proyecto, y señalan una falta de comprensión de la semántica HTML.

Vale la pena señalar un matiz importante: el elemento <header> solo se mapea al rol banner cuando no es descendiente de <article>, <aside>, <main>, <nav> o <section>. Cuando está anidado dentro de uno de estos elementos de sección, <header> no tiene un rol de landmark correspondiente: simplemente sirve como el encabezado para esa sección particular. En ese contexto, añadir role="banner" no sería redundante; en realidad cambiaría la semántica, lo que casi seguramente no es lo que quieres.

Para solucionar la advertencia, elimina el atributo role="banner" de tu elemento <header>. La semántica nativa es suficiente.

Ejemplos

Incorrecto: `role="banner"` redundante en `<header>`

Esto provoca la advertencia del validador porque <header> ya implica el rol banner en el nivel superior:

<header role="banner">
  <img src="logo.svg" alt="My Company">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

Correcto: deja que `<header>` use su rol implícito

Simplemente elimina el atributo role="banner":

<header>
  <img src="logo.svg" alt="My Company">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

Correcto: usar `role="banner"` en un elemento que no sea `<header>`

Si por alguna razón no puedes usar un elemento <header> (por ejemplo, trabajando con un CMS heredado), aplicar role="banner" a un <div> es la forma apropiada de transmitir la misma semántica de landmark:

<div role="banner">
  <img src="logo.svg" alt="My Company">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</div>

Un `<header>` dentro de un elemento de sección no tiene rol `banner`

Cuando <header> está anidado dentro de un <article> u otro elemento de sección, no tiene el rol banner. Esto es esperado y correcto: el <header> aquí simplemente introduce el contenido del artículo:

<article>
  <header>
    <h2>Article Title</h2>
    <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
  </header>
  <p>Article content goes here.</p>
</article>