Enlace saltar al contenido: para qué sirve, dónde ponerlo y cómo programarlo

¿Para qué sirve un enlace saltar al contenido (WCAG 2.4.1)?

El criterio 2.4.1 busca ofrecer a las personas que recorren el contenido de forma secuencial un acceso más directo al contenido principal de la página. Los sitios web suelen repetir los mismos bloques de una página a otra: el W3C menciona los enlaces de navegación, el contenido de la cabecera y los marcos publicitarios. En cambio, las pequeñas partes repetidas, como palabras sueltas, frases o enlaces individuales, no se consideran bloques a efectos del criterio.

Una persona vidente puede ignorar esos bloques mirando el centro de la pantalla, y quien usa ratón llega al enlace deseado con un solo clic. Quien navega de forma secuencial, en cambio, por lo general tiene que pasar por todos los enlaces y controles de formulario que preceden al elemento buscado, en cada página. El W3C pone el ejemplo de la página de inicio de un medio de noticias: si el usuario no utiliza el enlace situado arriba, un usuario de teclado necesita tabular por unos 40 enlaces para llegar a la noticia principal, y un usuario de lector de pantalla tiene que escuchar 200 palabras.

• Usuarios de lectores de pantalla: evitan oír toda la cabecera y decenas de enlaces de navegación en cada página antes del contenido principal.
• Personas que solo usan el teclado o una interfaz de teclado: llegan al contenido con menos pulsaciones. De lo contrario, pueden necesitar decenas de pulsaciones, lo que lleva mucho tiempo y puede causar un dolor físico intenso a algunas personas.
• Usuarios de magnificadores de pantalla: no tienen que buscar, en cada nueva página, dónde empieza el contenido principal.
• Personas con limitaciones cognitivas y usuarios de lectores de pantalla: pueden beneficiarse de que los enlaces se agrupen en listas.

¿Dónde colocar el enlace de salto?

Las técnicas suficientes publicadas por el W3C describen tres ubicaciones posibles para los enlaces de salto. La elección depende de la estructura de sus plantillas y de dónde se encuentran los bloques repetidos.

La técnica G1 consiste en añadir un enlace en la parte superior de cada página que lleve directamente al área de contenido principal; en la práctica, se coloca antes de la cabecera y del menú. El W3C también menciona el ejemplo de una tienda en línea que muestra una larga lista de filtros antes de los resultados de búsqueda: un enlace situado encima de la lista permite saltar los filtros y llegar rápidamente a los productos. Este caso sigue el espíritu de la técnica G123, que consiste en un enlace al principio de un bloque repetido que lleva al final de ese bloque.

La ubicación de los bloques repetidos también importa. El W3C aclara que el criterio no pretende exigir métodos redundantes con las funciones del navegador: la mayoría de los navegadores ofrecen atajos de teclado para llevar el foco a la parte superior de la página. Por eso, si un conjunto de enlaces de navegación está al pie de la página, un enlace «saltar» puede ser innecesario.

• G1: un enlace en la parte superior de cada página que lleva directamente al área de contenido principal.
• G123: un enlace al principio de un bloque de contenido repetido que lleva al final del bloque.
• G124: enlaces en la parte superior de la página hacia cada área del contenido.

Cómo programar un enlace «Saltar al contenido»

La técnica G1 consiste en añadir un enlace en la parte superior de cada página que lleve directamente al área de contenido principal. Una implementación habitual es un enlace de ancla hacia un id colocado en esa área, como en el ejemplo siguiente. El ejemplo añade también un elemento nav para la navegación (técnica orientativa H97, no obligatoria, que agrupa enlaces relacionados), un elemento main y un encabezado al inicio del contenido, que ilustra el principio de la técnica H69.

Una vez implementado, compruebe el comportamiento real solo con el teclado, sin ratón: tabulando desde la parte superior de la página, debe llegar al enlace antes de la cabecera y del menú, y al activarlo debe ir al inicio del contenido principal. Pruebe cada plantilla de su sitio, ya que el criterio trata de bloques repetidos en varias páginas.

<body>
  <a href="#contenido" class="enlace-salto">Saltar al contenido</a>

  <header>…</header>

  <nav aria-label="Navegación principal">
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/precios">Precios</a></li>
    </ul>
  </nav>

  <main id="contenido">
    <h1>Título de la página</h1>
    …
  </main>
</body>

Ocultar el enlace de salto sin volverlo inaccesible

Muchos equipos quieren ocultar visualmente el enlace de salto para no alterar el diseño. El texto del W3C no prescribe ninguna técnica de ocultación, pero establece una regla importante: según la definición de «mecanismo», este debe cumplir por sí mismo todos los criterios de conformidad del nivel declarado. Por tanto, ocultarlo no debe hacer que pierda su utilidad para las personas que navegan con teclado, a quienes está destinado.

Buena práctica: si decide ocultarlo, asegúrese de que siga siendo accesible con el teclado y de que se muestre cuando reciba el foco. El ejemplo CSS siguiente saca el enlace de la pantalla mientras no tiene el foco y luego lo muestra en la parte superior de la página. Valídelo siempre con el teclado, sin ratón, en cada una de sus plantillas.

.enlace-salto {
  position: absolute;
  left: -10000px;
  top: auto;
}

.enlace-salto:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: #000000;
  z-index: 1000;
}

Landmarks ARIA y encabezados: otros mecanismos para evitar bloques

El criterio 2.4.1 no se limita a los enlaces de salto. El W3C reconoce una segunda familia de técnicas suficientes: agrupar los bloques de contenido repetido de forma que puedan saltarse. Como recordatorio, el W3C describe las tecnologías de apoyo como herramientas que proporcionan, entre otras cosas, mecanismos adicionales de navegación u orientación.

Basta con una de estas técnicas, pero nada impide combinarlas con un enlace de salto. Una nota del criterio indica además que el W3C promueve firmemente el marcado estructural de cada página, conforme al criterio 1.3.1, aunque el 2.4.1 trate de bloques repetidos en varias páginas. Por último, incluso en una página que no forma parte de un conjunto, puede ser útil, aunque no obligatorio, ofrecer una forma de saltar bloques de texto repetidos dentro de la página.

• ARIA11: usar landmarks ARIA para identificar las regiones de la página.
• H69: colocar un elemento de encabezado al principio de cada sección de contenido.
• PDF9: marcar los encabezados con etiquetas de encabezado en documentos PDF.
• H64: usar el atributo title del elemento iframe.
• SCR28: usar un menú desplegable y plegable para saltar un bloque de contenido.
• Técnicas orientativas (no obligatorias): posicionar el contenido según el marcado estructural (C6) y agrupar enlaces relacionados con el elemento nav (H97).

Preguntas frecuentes

Más sobre el tema en Conformly

• Corregir el enlace de salto en HTML
• Añadir un mecanismo para evitar bloques
• Ficha del criterio RGAA 12.7

Fuentes

Este artículo se basa en las fuentes oficiales citadas al final de la página.

• W3C — Comprendre 2.4.1