Landmarks y skip link: navegación accesible

Q: ¿Pasa algo si uso div en lugar de etiquetas semánticas?

Visualmente, nada; pero para un lector de pantalla un no significa nada, y la página se convierte en una lista plana de textos y enlaces. Si tu tema no permite cambiar las etiquetas, puedes añadir roles: role="main", role="navigation", role="banner" o role="contentinfo". Aun así, las etiquetas HTML nativas son la opción preferible.

Por qué importa

Las personas que usan lector de pantalla no ven la página de un vistazo: la recorren elemento a elemento. Los landmarks y los encabezados funcionan como un índice que les deja saltar directamente al menú, al contenido o al pie. Sin ellos, tienen que escuchar toda la cabecera en cada página.

Quien navega solo con el teclado, por una lesión, una discapacidad motora o por costumbre, tiene el mismo problema: sin un enlace para saltar al contenido, debe pulsar el tabulador por cada enlace del menú antes de llegar a lo que busca. En una tienda con un menú grande, eso pueden ser decenas de pulsaciones en cada página.

Cómo lo comprueba Posiciona

Analizamos el HTML de la página y comprobamos seis elementos: <header>, <nav>, <main> y <footer> (o sus roles ARIA equivalentes), un enlace para saltar al contenido y que los encabezados no salten niveles hacia abajo, como de H1 a H3. La nota es el porcentaje de elementos presentes. Reconocemos el enlace si apunta a #content, #main, #main-content o #MainContent, o si tiene la clase skip-link, skip-to-content o skip-nav.

En la nota de Accesibilidad esta comprobación cuenta como “recomendable” (peso 2 de 5).

Cómo solucionarlo

Envuelve la cabecera del sitio en <header>, cada menú en <nav> y el pie en <footer>.
Pon el contenido principal de cada página dentro de un único <main> con un id, por ejemplo <main id="main-content">.
Añade como primer elemento del <body> un enlace “Saltar al contenido” que apunte a ese id. Puede estar oculto hasta que recibe el foco del teclado, pero tiene que aparecer al pulsar el tabulador.
Si tienes varios menús (principal, pie, categorías), distínguelos con aria-label, como en <nav aria-label="Principal">.
Ordena los encabezados sin saltar niveles: después de un H2 va un H3, no un H4. Si quieres un título más pequeño, cambia su tamaño con CSS, no su nivel.
Compruébalo pulsando el tabulador nada más cargar la página: lo primero que debería aparecer es el enlace para saltar al contenido.

Estructura básica con enlace para saltar al contenidoHTML

<body>
  <a class="skip-link" href="#main-content">Saltar al contenido</a>
  <header>
    <nav aria-label="Principal">…</nav>
  </header>
  <main id="main-content">
    <h1>Zapatillas de trail</h1>
    …
  </main>
  <footer>…</footer>
</body>

CSS: el enlace solo aparece al usar el tecladoTexto

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 1000;
  padding: 8px 16px;
  background: #ffffff;
}

En WordPress

En los temas de bloques, WordPress añade automáticamente el enlace para saltar al contenido si la plantilla tiene un elemento <main>. En el editor del sitio, selecciona el grupo que contiene el contenido y, en Avanzado, elige <main> como elemento HTML.
Si buscas tema, filtra por la etiqueta “accessibility-ready” en el directorio de WordPress: esos temas se revisan para que incluyan landmarks y enlace para saltar al contenido.

En Shopify

En Shopify, la mayoría de temas recientes ya incluyen <main id="MainContent"> y el enlace para saltar al contenido en theme.liquid. Si no aparecen, revisa en Tienda online → Temas → Editar código que no se hayan borrado al personalizar el tema.
Si tu cabecera es una sección personalizada, comprueba en header.liquid (o en el archivo de cabecera de tu tema) que el menú va dentro de <nav>.
Algunos temas usan H3 o H4 en secciones sin un H2 por encima: corrige la etiqueta en el código de la sección, no solo su tamaño.

Preguntas frecuentes

¿Qué es un skip link y por qué no lo veo en mi web?

Es un enlace “Saltar al contenido” que va al principio de la página y lleva directamente al contenido principal. Normalmente está oculto y solo aparece al pulsar la tecla Tab, porque está pensado para quien navega con teclado o con lector de pantalla. Para saber si tu web lo tiene, carga una página y pulsa Tab una vez.

¿Pasa algo si uso div en lugar de etiquetas semánticas?

Visualmente, nada; pero para un lector de pantalla un <div> no significa nada, y la página se convierte en una lista plana de textos y enlaces. Si tu tema no permite cambiar las etiquetas, puedes añadir roles: role="main", role="navigation", role="banner" o role="contentinfo". Aun así, las etiquetas HTML nativas son la opción preferible.