Rol Punto de referencia

`banner`

El punto de referencia del encabezado de todo el sitio — habitualmente contiene el logotipo, la navegación principal y el buscador. El elemento <header> de nivel superior adopta este rol de forma automática. Solo puede existir un banner por página.

Cuándo utilizarlo

Use <header> como hijo directo de <body> (o de <html> en un fragmento de nivel superior). Cuando <header> está en el nivel superior, el navegador lo expone automáticamente como punto de referencia banner. Cuando <header> está anidado dentro de <article>, <section>, <main> o <aside>, se comporta como un grupo genérico, no como un punto de referencia.

role="banner" en un <div> es apropiado únicamente cuando no se puede usar <header> — por ejemplo, dentro de un CMS que elimina las etiquetas de referencia.

No debe haber más de un banner por página. Si existe un segundo encabezado que no es el banner del sitio (un encabezado de sección, un encabezado de hilo de comentarios), utilice un <header> simple anidado dentro de su sección, no en el nivel superior.

Cuándo añadir una etiqueta

Si la página contiene varios puntos de referencia del mismo tipo (poco frecuente para banner, habitual para navigation), añada aria-label para distinguirlos. Un único banner no necesita etiqueta — los lectores de pantalla lo anuncian como «banner».

Errores habituales

Múltiples elementos <header> en la parte superior de la página, cada uno promovido a punto de referencia banner. Los usuarios de lectores de pantalla ven dos entradas «banner» en el menú de puntos de referencia y no pueden identificar cuál es el encabezado real.
role="banner" en un <header> anidado dentro de <main> o <article>. El rol anula el comportamiento predeterminado (sin punto de referencia) y contamina la navegación por puntos de referencia.
El logotipo del sitio colocado fuera del <header>, de modo que queda fuera del punto de referencia banner.
Navegación fija representada como un <div role="banner"> separado junto al <header> original — dos banners.
Banner con contenido vacío (solo bordes decorativos) — el punto de referencia sigue apareciendo en la navegación del lector de pantalla pero no contiene nada.

Ejemplo

<body>
  <header>
    <a href="/" aria-label="Disability World home">
      <img src="/logo.svg" alt="">
    </a>
    <nav aria-label="Primary">
      <a href="/toolkit/">Toolkit</a>
      <a href="/library/">Library</a>
    </nav>
  </header>
  <main>…</main>
</body>