El documento debe tener un landmark principal

Los landmarks son regiones estructurales de una página — como encabezado, navegación, contenido principal y pie de página — que las tecnologías de asistencia utilizan para construir un esquema de la página. Cuando un usuario de lector de pantalla abre una página, puede mostrar una lista de landmarks y saltar directamente a la sección que necesita. Sin un landmark main, no hay forma de que estos usuarios puedan omitir encabezados repetidos y navegación para llegar al contenido que buscaban. Esto hace que la página sea significativamente más difícil de usar.

Esta regla es una mejor práctica de Deque alineada con la técnica WAI-ARIA ARIA11: Using ARIA landmarks to identify regions of a page. Los usuarios ciegos, sordociegos o que tienen discapacidades de movilidad y dependen de lectores de pantalla o métodos de navegación alternativos son los más directamente afectados. Sin landmarks, estos usuarios deben navegar con tabulación o flechas a través de cada elemento de la página para encontrar el contenido que necesitan.

Cómo funcionan los landmarks

HTML5 introdujo elementos semánticos que automáticamente crean regiones de landmark:

Los navegadores modernos y lectores de pantalla entienden estos elementos HTML5 de forma nativa. Para máxima compatibilidad, también puedes añadir el rol ARIA explícito junto al elemento HTML5 (p. ej., <main role="main">). Esta redundancia es inofensiva y puede ayudar con tecnologías de asistencia más antiguas.

Cómo solucionar el problema

1. Envuelve tu contenido principal en un elemento <main>. Cada página debe tener exactamente un landmark <main>.
2. Coloca todo el demás contenido visible dentro de landmarks apropiados. Usa <header>, <nav>, <footer> y <aside> según sea necesario para que ningún contenido quede huérfano fuera de una región de landmark.
3. Verifica los elementos iframe. Si un iframe contiene contenido con landmarks, no debe tener más de un landmark <main>.
4. No anides elementos <main>. Solo debe haber un <main> por página (o por iframe).

Ten en cuenta que los landmarks benefician principalmente a los usuarios de lectores de pantalla. Los usuarios videntes y los usuarios de ampliadores de pantalla no perciben los landmarks, por lo que aún necesitan enlaces de salto de navegación visibles para omitir contenido repetido.

Ejemplos

Incorrecto: sin landmark main

Esta página no tiene elemento <main>, por lo que los usuarios de lectores de pantalla no tienen forma de saltar directamente al contenido principal.

<header>
  <p>Company Logo</p>
</header>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<div class="content">
  <p>This is the primary content of the page.</p>
</div>
<footer>
  <p>&copy; 2024 Company Name</p>
</footer>

Correcto: página con un landmark main

Reemplazar el <div> genérico con un elemento <main> da a los usuarios de lectores de pantalla un punto de navegación directo al contenido principal.

<header>
  <p>Company Logo</p>
</header>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<main>
  <p>This is the primary content of the page.</p>
</main>
<footer>
  <p>&copy; 2024 Company Name</p>
</footer>

Correcto: usando tanto elementos HTML5 como roles ARIA para máxima compatibilidad

<header role="banner">
  <p>Company Logo</p>
</header>
<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<main role="main">
  <p>This is the primary content of the page.</p>
</main>
<footer role="contentinfo">
  <p>&copy; 2024 Company Name</p>
</footer>

Incorrecto: múltiples landmarks main

Tener más de un elemento <main> confunde a las tecnologías de asistencia sobre cuál sección es el verdadero contenido principal.

<main>
  <p>Article content here.</p>
</main>
<main>
  <p>Sidebar content here.</p>
</main>

Correcto: un solo main con un aside para contenido secundario

<main>
  <p>Article content here.</p>
</main>
<aside>
  <p>Sidebar content here.</p>
</aside>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Using ARIA landmarks to identify regions of a page

→