Enlace para saltar

Un enlace para saltar es un acceso directo por teclado situado al inicio de cada página que permite a los usuarios omitir la navegación repetida e ir directamente al contenido principal. Satisface el criterio WCAG 2.4.1 Bypass Blocks (Nivel A) y es una de las mejoras de accesibilidad más sencillas y económicas disponibles.

Por qué existe

Pensemos en un sitio de contenido típico. La cabecera contiene seis enlaces de navegación principales, un selector de idioma y un botón de tema. El pie de página tiene otros doce. Cada página repite esas estructuras. Un usuario que navega únicamente con teclado o con un lector de pantalla y llega a un artículo queriendo leerlo debe pulsar Tab a través de aproximadamente treinta elementos interactivos antes de alcanzar el cuerpo del artículo. Multiplicado por cada navegación entre páginas, esto resulta agotador.

Un enlace para saltar es un único elemento <a href="#main-content">Ir al contenido</a> colocado como primer elemento enfocable del documento. El usuario pulsa Tab una vez tras cargar la página, ve «Ir al contenido», pulsa Intro y el foco se mueve al cuerpo del artículo.

Implementación

El patrón es sencillo, pero presenta algunas trampas bien conocidas:

<a class="skip-link" href="#main-content">Ir al contenido</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Tres detalles que importan:

1. El enlace debe ser visible al recibir el foco. Un enlace para saltar con display: none permanente resulta invisible para los usuarios videntes que utilizan el teclado, quienes no podrán saber que existe. Ocúltelo fuera de pantalla mediante posicionamiento, no mediante display: none ni visibility: hidden.

2. El destino debe aceptar el foco. Un elemento <main> simple no recibe foco de teclado de manera predeterminada. Añadir tabindex="-1" lo hace enfocable mediante programación, de modo que el navegador mueva realmente el foco cuando se siga el enlace. Sin esto, el hash de la URL cambia pero el foco no se desplaza, y el siguiente Tab reinicia desde la parte superior de la página, anulando por completo el propósito del enlace para saltar.

3. Debe ser el primer elemento enfocable. No «entre los primeros 100 elementos», sino el primero. Si algo lo precede (un enlace de logotipo, un icono de búsqueda), el usuario debe tabular por esos elementos antes de llegar al enlace para saltar, lo que frustra su propósito.

Varios enlaces para saltar

Las páginas largas con varias regiones repetidas a veces se benefician de un pequeño menú de «salto» en lugar de un único enlace:

• Ir al contenido principal
• Ir a la navegación
• Ir al pie de página

Una breve lista visible al recibir el foco con tres o cuatro destinos es adecuada. Una larga tabla de contenidos generada automáticamente al inicio de cada página no lo es.

Lo que no reemplaza

Un enlace para saltar es la red de seguridad para Bypass Blocks. No reemplaza los puntos de referencia correctos (<nav>, <main>, <aside>, <footer>), la estructura jerárquica de encabezados (un <h1> por página, <h2> jerarquizados) ni aria-label de ARIA en puntos de referencia duplicados. Los usuarios de lectores de pantalla se desplazan entre regiones y encabezados mediante atajos de teclado que dependen de que esas estructuras estén en su lugar; el enlace para saltar está pensado para los usuarios videntes que utilizan únicamente el teclado.