Se abre en una pestaña nueva

Diseño web

Saltar al contenido principal: cómo añadir un enlace de salto

Qué es un enlace de salto, qué piden las WCAG, cómo ocultarlo hasta que recibe el foco y cómo comprobar que de verdad mueve el foco.

Revisada4 de noviembre de 2026
Lectura
Forma parte deDiseño web
Escucha esta guía
0:00 /7:37

Respuesta corta: un enlace de salto es lo primero a lo que llega la tecla Tab en una página, normalmente un enlace que dice «Saltar al contenido principal». Lleva a quien usa el teclado o un lector de pantalla directamente al contenido, sin pasar por la cabecera ni el menú. Puede estar oculto hasta que alguien pulsa Tab, pero entonces tiene que aparecer y mover el foco.

Qué resuelve un enlace de salto

Casi todas las páginas repiten los mismos bloques antes del contenido: el logo, el menú y a veces un buscador o un banner. Con el ratón se saltan con un clic. Con el teclado hay que pasar con Tab por cada enlace, en cada página.

El W3C explica que eso puede suponer decenas de pulsaciones antes del primer enlace del contenido principal. Puede llevar mucho tiempo y causar un dolor físico intenso a algunas personas. Quien usa un lector de pantalla oiría la cabecera y los enlaces del menú otra vez en cada página.

El criterio de éxito 2.4.1 de las WCAG, «Bypass Blocks» (evitar bloques), de nivel A, pide un mecanismo para saltar los bloques de contenido que se repiten en varias páginas. El enlace de salto es el más común, y el W3C da otros.

Forma de saltar los bloques repetidos Qué añade Técnica del W3C
Enlace de salto Un enlace al principio de cada página que lleva directo al contenido principal G1
Enlace para pasar un bloque Un enlace al principio de un bloque repetido que lleva a su final G123
Enlaces a cada zona Enlaces al principio de la página a cada zona del contenido G124
Puntos de referencia Puntos de referencia de ARIA que marcan las regiones de la página ARIA11
Encabezados Un encabezado al principio de cada sección H69

De la explicación del criterio 2.4.1 del W3C, en inglés, consultada el 4 de noviembre de 2026.

Cómo se hace un enlace de salto

WebAIM lo describe como un enlace al principio de la página que lleva al inicio del área de contenido principal. El destino habitual es el elemento <main>. MDN recuerda que algunos lectores de pantalla ya ofrecen un atajo para saltar directamente a ese elemento.

Dale un id a <main> y apunta el enlace a ese id. Deja un solo elemento main por página: MDN indica que no debe haber más de un elemento <main> en un documento. Nuestra guía de enlaces ancla explica cómo enlazar a cualquier sección de una página.

Para el texto, WebAIM prefiere «Skip to main content», porque dice a dónde lleva el enlace y no lo que se salta. En español, «Saltar al contenido principal» cumple lo mismo. Normalmente basta con un enlace, aunque una página muy compleja, con varios bloques repetidos, puede necesitar más.

Oculto hasta que recibe el foco

El W3C considera preferible que los enlaces de salto estén siempre visibles. Muchas personas que usan el teclado ven la pantalla, como quien usa un pulsador, un magnificador de pantalla o el reconocimiento de voz. Aun así, el criterio no exige que el enlace se vea mientras no tiene el foco.

Si lo ocultas, WebAIM da las condiciones. Está oculto por defecto, la navegación con teclado llega a él, se ve con claridad cuando recibe el foco y, al activarlo, pone el foco en el contenido principal.

Ocúltalo fuera de la pantalla con CSS. Nuestra guía de texto oculto visualmente muestra las clases que lo hacen. Si lo ocultas con display:none o con el atributo hidden, sale de la navegación con teclado y nadie puede usarlo. Nuestra guía de navegación con teclado explica la prueba completa con teclado, y nuestra guía de navegación web explica el menú que el enlace se salta.

Cómo añadir un enlace de salto, paso a paso

  1. Pon el contenido principal de cada plantilla dentro de un solo elemento <main> con un id.
  2. Coloca un enlace a ese id al principio de la página, antes del logo y del menú.
  3. Llámalo «Saltar al contenido principal» en español y tradúcelo en cada idioma.
  4. Ocúltalo fuera de la pantalla con CSS, nunca con display:none ni con el atributo hidden.
  5. Haz que aparezca al recibir el foco del teclado, con buen contraste.
  6. Comprueba que Intro mueve el foco del teclado al contenido principal, no solo la página.
  7. Pruébalo como primera visita: pulsa Tab, después Intro y después Tab otra vez.

Cómo salieron nuestros enlaces de salto en la prueba del W3C

La técnica G1 del W3C termina con una prueba de cinco comprobaciones. El 4 de noviembre de 2026 la pasamos como primera visita en seis de nuestras páginas, en una pantalla de escritorio y en un teléfono: la página de inicio, una guía, precios y contacto en inglés, y la página de inicio y la misma guía en español.

En las 12 pasadas, la primera pulsación de Tab llegó al enlace de salto: «Saltar al contenido principal» en las páginas en español y «Skip to main content» en las de inglés. Estaba oculto hasta entonces y apareció arriba a la izquierda al recibir el foco. Al pulsar Intro y luego Tab, el foco cayó siempre en el primer enlace del contenido principal. Un segundo enlace, «Saltar al pie de página», llevó el foco al pie.

También contamos los elementos <main> de las 488 páginas de nuestro mapa del sitio a las 6:03 PM. De ellas, 486 tenían uno, pero nuestras dos páginas de inicio tenían un segundo dentro del primero. Cambiamos ese bloque interior por un contenedor normal a las 6:08 PM, y a las 6:15 PM las 488 tenían uno solo.

Comprueba tu enlace de salto

  • La primera pulsación de Tab en la página llega al enlace de salto.
  • Su texto dice a dónde lleva.
  • Se ve en pantalla cuando tiene el foco.
  • Está oculto con CSS, no con display:none ni con el atributo hidden.
  • Después de Intro, el siguiente Tab cae dentro del contenido principal.
  • Cada página tiene un solo elemento <main>.

RecuerdaUn enlace de salto solo funciona si mueve el foco. No basta con desplazar la página: pruébalo con el teclado, como lo usan las personas que lo necesitan.

Las páginas que funcionan con teclado son parte de nuestro servicio de diseño web.

Respuestas rápidas sobre el enlace de salto

¿Qué significa «Saltar al contenido principal»?

Es un enlace al principio de la página que lleva directamente al contenido a quien usa el teclado o un lector de pantalla. Así no tiene que pasar por la cabecera ni el menú. Muchas webs lo ocultan hasta que alguien pulsa la tecla Tab, y entonces aparece arriba.

¿Las WCAG exigen un enlace de salto?

El criterio de éxito 2.4.1 de las WCAG, de nivel A, exige una forma de saltar los bloques de contenido que se repiten en varias páginas. Un enlace al contenido principal es una de las técnicas suficientes que da el W3C. Los puntos de referencia de ARIA y los encabezados al inicio de cada sección son otras.

¿El enlace de salto tiene que verse siempre?

No. El W3C considera preferible que esté siempre visible, porque muchas personas que usan el teclado ven la pantalla. Su criterio también acepta enlaces que solo aparecen al recibir el foco. Si ocultas el tuyo, haz que destaque cuando aparezca.

¿A dónde debe llevar el enlace de salto?

Al principio del contenido principal. Lo habitual es darle un id al elemento main y usar ese id como destino del enlace. MDN recuerda que no debe haber más de un elemento main en un documento.

¿Necesito más de un enlace de salto?

Normalmente no. WebAIM dice que en la mayoría de los casos basta con uno, y que una página con muy pocos enlaces antes del contenido principal quizá no lo necesite. Una página muy compleja, con varios bloques repetidos, puede necesitar más.

Fuentes

Consultadas el 4 de noviembre de 2026. MDN Web Docs: <main>. En inglés, W3C: Understanding SC 2.4.1 y Technique G1; WebAIM: Skip Navigation Links. Nuestro caso: nuestras propias páginas probadas con el teclado, consultadas el 4 de noviembre de 2026.

Pedro Galindez

Pedro Galindez

Fundador de Feedback Studios, estudio de crecimiento bilingüe en Miami.

Escuchar0:00 /7:37

Más guías

Revisada 4 de noviembre de 2026

aria-hidden: cuándo ocultar contenido al lector de pantalla

Qué hace aria-hidden, cuándo usarlo con iconos, texto repetido y menús cerrados, y la regla que evita que rompa una página.

Revisada 4 de noviembre de 2026

WCAG 2.2: qué cambia y cómo revisar tu web

Los criterios que añaden las WCAG 2.2, qué versión seguir, dónde suelen fallar las webs y cómo revisar la tuya.

Revisada 4 de noviembre de 2026

aria-label: cuándo usarlo y cuándo es mejor aria-labelledby o un texto visible

Qué hace aria-label, cuándo es mejor aria-labelledby o un texto visible, por qué el texto visible va en el nombre y cómo revisar los tuyos.

Revisada 4 de noviembre de 2026

Biografía de autor: qué escribir y cómo mostrarla en tu web

Qué es una biografía de autor, por qué importa para la confianza, cómo escribirla y cómo marcar al autor en los datos estructurados de Article.

Revisada 4 de noviembre de 2026

Caducidad del certificado SSL: cómo revisarla y renovarlo a tiempo

Qué pasa cuando caduca un certificado SSL, por qué los certificados duran cada vez menos, cómo revisar la fecha y cómo renovarlo a tiempo.

Siguiente paso

Cuéntanos qué necesitas

Escríbenos por WhatsApp o envíanos un mensaje. Respondemos en español o en inglés.