¿Y ` ` — cuenta como landmark?

Sólo cuando tiene un nombre accesible (aria-label o aria-labelledby). Un sin más es una región genérica. Si la sección no necesita estar en el menú de landmarks, usa en su lugar.

Regiones landmark ARIA - Docs de MetricSpot

Q: ¿Necesito `role="banner"` y `role="contentinfo"` en ` ` y ` `?

No. Cuando y son hijos directos de , los navegadores los exponen como banner y contentinfo automáticamente. Añadir el rol es redundante y puede confundir a algunos lectores de pantalla más antiguos.

Qué comprueba esta verificación

Analiza el HTML renderizado en busca de regiones landmark: los elementos de seccionado <main>, <nav>, <header>, <footer>, <aside>, <form>, <section> (con nombre accesible) y sus equivalentes ARIA (role="main", role="navigation", etc.). La verificación falla si no hay <main> (o role="main") en la página.

Por qué importa

Los lectores de pantalla exponen un menú de landmarks — JAWS usa R, NVDA usa D, VoiceOver usa el rotor. El usuario llega a tu página y pulsa una tecla para saltar al contenido principal, saltándose la cabecera y la navegación global.

Sin landmarks, ese atajo no existe. El usuario tiene que recorrer con las flechas cada enlace de tu cabecera, cada banner promocional, cada desplegable de login, cada selector de idioma antes de llegar al artículo por el que vino. En un sitio de marketing típico son entre 30 y 60 elementos de audio antes de la primera frase útil.

Los landmarks son también la forma de satisfacer el criterio 1.3.1 de WCAG 2.1 (Información y relaciones) en cuanto a estructura de página, y la forma en que las auditorías de la Ley de Accesibilidad de la UE esperan que las regiones navegables se expongan programáticamente.

Cómo arreglarlo

Lo mínimo: envuelve tu contenido principal en <main>. Añade <nav> alrededor de la navegación principal, <header> para la cabecera del sitio y <footer> para el pie.

HTML:

<body>
  <header>
    <nav aria-label="Primary">...</nav>
  </header>
  <main>
    <h1>Page title</h1>
    <article>...</article>
    <aside aria-label="Related articles">...</aside>
  </main>
  <footer>...</footer>
</body>

Reglas que suelen liarte:

Sólo un <main> por página. Varios <main> rompen el mapa de landmarks.
Varias regiones <nav> necesitan nombres accesibles para que un lector de pantalla pueda distinguirlas. Usa aria-label="Primary", aria-label="Breadcrumb", aria-label="Footer" — no las dejes sin nombre.
<header> y <footer> sólo cuentan como landmarks banner/contentinfo cuando son hijos directos de <body>. Dentro de un <article> son contenido de seccionado, no landmarks.
No añadas role="main" de forma redundante a <main>. El elemento nativo ya expone el rol.

Next.js (App Router):

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header><SiteNav /></header>
        <main>{children}</main>
        <footer><SiteFooter /></footer>
      </body>
    </html>
  );
}

Astro:

---
// src/layouts/Base.astro
---
<html lang="en">
  <body>
    <header><Nav /></header>
    <main><slot /></main>
    <footer><Footer /></footer>
  </body>
</html>

WordPress: los temas modernos basados en bloques envuelven el contenido del post en <main> automáticamente; los temas clásicos necesitan <?php wp_body_open(); ?> seguido de tu envoltorio <main> en header.php y </main> antes de get_footer().

Si no puedes cambiar el marcado (CMS cerrado, widget incrustado), añade role="main" al div envoltorio existente — mismo efecto para la tecnología de apoyo, menos ideal para los parsers.

Combínalo con Declarar idioma de la página y Etiquetas de formulario — los tres juntos cubren la mayor parte de los logros fáciles de accesibilidad.

Preguntas frecuentes

¿Necesito `role="banner"` y `role="contentinfo"` en `<header>` y `<footer>`?

No. Cuando <header> y <footer> son hijos directos de <body>, los navegadores los exponen como banner y contentinfo automáticamente. Añadir el rol es redundante y puede confundir a algunos lectores de pantalla más antiguos.

¿Y `<section>` — cuenta como landmark?

Sólo cuando tiene un nombre accesible (aria-label o aria-labelledby). Un <section> sin más es una región genérica. Si la sección no necesita estar en el menú de landmarks, usa <div> en su lugar.

¿Añadir landmarks afecta al SEO?

Indirectamente. Google no posiciona por landmarks, pero sí usa el outline de HTML5 (especialmente <main> y <article>) para identificar el contenido principal frente al chrome. Una estructura de landmarks limpia correlaciona con una extracción más limpia en AI Overviews y featured snippets.