Imagina tener que escuchar el menú completo de un sitio, enlace por enlace, cada vez que cambias de página. Eso es lo que viven a diario muchas personas que navegan con teclado o con lector de pantalla, y los enlaces de salto (skip links) existen precisamente para evitarlo: un atajo, normalmente invisible hasta que lo necesitas, que lleva directo al contenido principal.
En este artículo verás qué son, por qué importan tanto para la accesibilidad y la experiencia de usuario, quién se beneficia de ellos y cómo implementarlos con un ejemplo de código. También repasaremos cómo probarlos, las buenas prácticas que marcan la diferencia y los errores que los dejan inservibles sin que nadie lo note.
¿Qué son los enlaces de salto?
Los enlaces de salto son enlaces internos colocados al principio de una página web que permiten saltar bloques repetitivos, como la cabecera o el menú de navegación, y llegar directamente al contenido principal. Suelen ser el primer elemento que recibe el foco al pulsar la tecla Tab y muchas veces solo se hacen visibles en ese momento.
Sus características básicas son:
- Apuntan a un ancla dentro de la misma página, casi siempre el inicio del contenido principal.
- Son el primer elemento enfocable del documento.
- Tienen un texto que describe con claridad su destino, como “Saltar al contenido principal”.
- Pueden estar siempre visibles o aparecer solo cuando reciben el foco del teclado, una solución habitual para no alterar el diseño visual.
El problema que resuelven es muy concreto. En la mayoría de sitios, la cabecera, el buscador y el menú se repiten en cada página, y una persona que navega con teclado tiene que recorrer todos esos elementos con Tab antes de llegar a lo que vino a buscar. En un sitio con un menú de treinta enlaces, eso son treinta pulsaciones por página, una y otra vez.
Con un enlace de salto, el recorrido se reduce a dos acciones: pulsar Tab para enfocarlo y Enter para activarlo. Es una de las formas más simples de acortar el camino del usuario en un sitio web.
Enlaces de salto, landmarks y encabezados: ¿en qué se diferencian?
Los enlaces de salto no son el único mecanismo para evitar contenido repetido. Las regiones semánticas (landmarks) y una buena estructura de encabezados cumplen una función parecida, aunque cada uno funciona de manera distinta y sirve a perfiles diferentes.
| Mecanismo | Cómo funciona | A quién ayuda más | Limitación |
|---|---|---|---|
| Enlace de salto | Enlace al inicio de la página que mueve el foco al contenido principal | Usuarios de teclado sin lector de pantalla | Si se implementa mal, el foco no se mueve y el enlace no sirve |
| Landmarks (header, nav, main) | Etiquetas semánticas que el lector de pantalla permite recorrer por regiones | Usuarios de lectores de pantalla | Los navegadores no ofrecen atajos nativos de teclado para saltar entre regiones |
| Encabezados (h1 a h6) | Jerarquía de títulos que el lector de pantalla permite saltar uno a uno | Usuarios de lectores de pantalla que exploran páginas largas | Depende de que la estructura de títulos sea correcta y coherente |
La tabla muestra por qué conviene combinarlos en lugar de elegir uno. Los lectores de pantalla ya ofrecen atajos para moverse por encabezados y regiones, de hecho la encuesta de WebAIM a usuarios de lectores de pantalla de 2024 encontró que el 71,6% navega por encabezados cuando quiere orientarse en una página larga.
Pero una persona que usa solo el teclado, sin lector de pantalla, no tiene esos atajos. Para ella, el enlace de salto sigue siendo la forma más directa de evitar el menú, y por eso los landmarks y los encabezados lo complementan sin reemplazarlo.
¿Por qué son importantes para la accesibilidad?
La primera razón es de escala. La accesibilidad no es una cuestión de nicho, sino de una parte enorme de la población que usa internet todos los días.
1.300 millones de personas
Alrededor del 16% de la población mundial, es decir, una de cada seis personas, vive con una discapacidad importante, y la cifra crece con el envejecimiento de la población.
Fuente: Organización Mundial de la Salud, Informe mundial sobre la equidad sanitaria para las personas con discapacidad, 2022
No todas esas personas navegan con teclado o con lector de pantalla, claro, pero muchas dependen de alguna tecnología de apoyo, y un sitio que las obliga a recorrer decenas de enlaces en cada página les está poniendo una barrera innecesaria. Para personas con discapacidad visual o con movilidad reducida, cada pulsación extra cuesta tiempo y esfuerzo.
La segunda razón es normativa. Las Pautas de Accesibilidad para el Contenido Web (WCAG) incluyen el criterio 2.4.1, conocido en español como “Evitar bloques”, que exige un mecanismo para saltar el contenido que se repite en varias páginas. Es de nivel A, el más básico, y el W3C reconoce los enlaces de salto como una de las técnicas válidas para cumplirlo.
Ese requisito tiene cada vez más peso legal. En la Unión Europea, la Ley Europea de Accesibilidad es exigible desde el 28 de junio de 2025 para productos y servicios digitales como el comercio electrónico o la banca, y en varios países de América Latina las normas de accesibilidad web para el sector público toman las WCAG como referencia.
“El poder de la web está en su universalidad. El acceso de todas las personas, independientemente de su discapacidad, es un aspecto esencial.”
Tim Berners-Lee, director del W3C e inventor de la World Wide Web, 1997
La frase de Berners-Lee resume la tercera razón, que es la más sencilla: un sitio que no se puede usar con teclado no está terminado. Los enlaces de salto son una de las mejoras de accesibilidad más baratas que existen, ya que bastan unas pocas líneas de HTML y CSS, y su impacto en la vida diaria de quien los usa es enorme.
Además, como ocurre con muchas mejoras de accesibilidad, refuerzan la relación entre SEO y experiencia de usuario: una página con una estructura clara es más fácil de recorrer para las personas y más fácil de interpretar para los buscadores.
¿Quién se beneficia de los skip links?
Aunque suelen asociarse solo con personas ciegas, el grupo de beneficiarios es bastante más amplio:
- Usuarios de teclado con discapacidad motora, que no pueden usar un ratón con precisión y dependen de Tab para todo.
- Personas que usan lectores de pantalla como NVDA, JAWS o VoiceOver.
- Usuarios de dispositivos de conmutación (switches) o de control por soplido. Para ellos cada “pulsación” puede requerir un esfuerzo físico considerable, así que ahorrar treinta pasos por página cambia por completo la experiencia de navegar.
- Personas con baja visión que usan magnificadores de pantalla y pierden el contexto al recorrer menús largos.
- Usuarios con una limitación temporal, como un brazo enyesado o una tendinitis.
- Usuarios avanzados que prefieren el teclado por rapidez.
La lista deja claro algo que el buen diseño UX repite a menudo: lo que se diseña para un grupo concreto suele terminar ayudando a muchos más. Un atajo pensado para la accesibilidad acaba mejorando la eficiencia, y con ella la satisfacción del usuario, de cualquiera que navegue con teclado.
¿Cómo implementar enlaces de salto paso a paso?
La implementación es sencilla, aunque tiene detalles que conviene cuidar para que funcione en todos los navegadores y tecnologías de apoyo. Antes de tocar el código, revisa cómo están construidas tus plantillas, porque el enlace debe aparecer en todas las páginas y apuntar siempre a un destino que exista.
Estos son los seis pasos que siguen la mayoría de equipos de desarrollo:
Implementación de enlaces de salto
Marcar el contenido principal
Un id en el elemento main que sirva de destino.
Añadir el enlace al inicio del body
Debe ser el primer elemento enfocable de la página.
Ocultarlo solo visualmente
Fuera de la vista, pero accesible para el teclado y el lector de pantalla.
Mostrarlo al recibir el foco
Visible, con buen contraste y tamaño legible.
Añadir enlaces extra si hace falta
Solo en páginas complejas, sin convertirlos en otro menú.
Probar en navegadores y dispositivos
Con teclado, con lectores de pantalla y en todas las plantillas.
Los dos primeros pasos se resuelven con muy poco HTML. El contenido principal recibe un identificador, y el enlace de salto, colocado justo después de la etiqueta body y antes de la cabecera, apunta a ese identificador:
<body>
<a class="enlace-salto" href="#contenido-principal">Saltar al contenido principal</a>
<header>...</header>
<nav>...</nav>
<main id="contenido-principal" tabindex="-1">
...
</main>
</body>El atributo tabindex=”-1″ en el elemento main no lo añade al orden de tabulación, pero permite que reciba el foco de forma programática. Así te aseguras de que, al activar el enlace, el foco del teclado se mueva realmente al contenido y no se quede atascado arriba, algo que ocurría en algunas versiones de navegadores.
El tercer y el cuarto paso son de CSS. El enlace se saca del área visible mientras no tiene el foco y vuelve a aparecer en cuanto alguien llega a él con Tab:
.enlace-salto {
position: absolute;
left: 1rem;
top: 1rem;
transform: translateY(-200%);
background: #1a2b5e;
color: #ffffff;
padding: 0.75rem 1rem;
z-index: 1000;
}
.enlace-salto:focus {
transform: translateY(0);
}Lo importante aquí es lo que no debes hacer. Ocultar el enlace con display:none o visibility:hidden lo elimina también para el teclado y para los lectores de pantalla, de modo que el enlace existe en el código pero nadie puede usarlo.
En cuanto al quinto paso, algunas páginas justifican más de un enlace de salto. Una aplicación web con una barra lateral extensa o una tienda con un bloque de filtros muy largo pueden ofrecer “Saltar a los filtros” o “Saltar a los resultados”, siempre con etiquetas claras. Más de dos o tres enlaces, sin embargo, empiezan a funcionar como un segundo menú y pierden su razón de ser.
El sexto paso, probar, merece su propia sección, porque es donde fallan la mayoría de implementaciones.
¿Cómo probar los enlaces de salto?
Un enlace de salto que no se prueba es una apuesta. Puede estar en el código y aun así no funcionar, porque otro script captura el foco, porque una plantilla no tiene el destino correcto o porque un banner de cookies aparece antes en el orden de tabulación.
Prueba con teclado
Carga la página, deja el ratón a un lado y pulsa Tab. El enlace de salto debe ser lo primero que recibe el foco y debe verse con claridad. Al pulsar Enter, el siguiente Tab tiene que llevarte al primer elemento interactivo del contenido principal, no al segundo enlace del menú.
Es una comprobación de dos minutos que encaja de forma natural en las pruebas de interfaz de usuario que ya haga tu equipo.
Prueba con lectores de pantalla
Repite la prueba con NVDA o JAWS en Windows y con VoiceOver en macOS e iOS. Comprueba que el enlace se anuncia con su texto completo y que, al activarlo, la lectura continúa desde el contenido principal.
Prueba en todas las plantillas
Una página de inicio puede funcionar perfectamente mientras la ficha de producto o el artículo de blog apuntan a un identificador que no existe. Revisa al menos una página de cada tipo de plantilla, e incluye estas comprobaciones en tu proceso de QA testing para que no se rompan con el siguiente rediseño.
Herramientas automáticas y pruebas con usuarios
Herramientas como WAVE, axe o Lighthouse detectan problemas frecuentes de accesibilidad y son un buen primer filtro. El problema es que solo encuentran lo que se puede medir de forma automática, y el panorama general sigue siendo preocupante.
95,9%
Proporción de las páginas de inicio del millón de sitios más visitados que presentan errores de WCAG detectables de forma automática, con una media de 56,1 errores por página. La cifra empeoró respecto al 94,8% de 2025.
Fuente: WebAIM, The WebAIM Million, 2026
Y esos son solo los errores que una herramienta puede detectar. Si un enlace de salto existe pero el foco no se mueve, la herramienta probablemente no lo marcará, porque comprobarlo exige recorrer la página como lo haría una persona.
Por eso las pruebas de usabilidad con usuarios reales son insustituibles. Si ya trabajas con una plataforma de investigación como QuestionPro UX, puedes incluir tareas de navegación con teclado en sesiones moderadas o no moderadas y observar en video dónde se atascan los participantes, algo que ningún escáner automático puede ver.
Buenas prácticas para crear skip links eficaces
Más allá de que funcionen, hay detalles que separan un enlace de salto correcto de uno realmente útil:
- Colócalo siempre como primer elemento enfocable, por delante de banners, avisos de cookies y logotipos enlazados.
- Usa un texto descriptivo y en el idioma de la página: “Saltar al contenido principal” es más claro que “Saltar” o “Ir abajo”.
- Haz que sea visible al recibir el foco, con un contraste suficiente y un tamaño que se lea sin esfuerzo. Un enlace que aparece en gris claro sobre blanco durante medio segundo cumple en el papel, pero no ayuda a nadie.
- Mantén la misma ubicación y el mismo texto en todo el sitio.
- Comprueba que el destino existe en cada plantilla.
- Combínalo con landmarks y una jerarquía de encabezados correcta, en lugar de usarlo como sustituto de una buena estructura.
- Valora dejarlo siempre visible en sitios con mucho tráfico de usuarios de teclado, como portales gubernamentales o educativos.
Si tuvieras que quedarte con una sola idea, que sea la del destino y el foco. La mayoría de enlaces de salto que fallan lo hacen porque apuntan a un ancla inexistente o porque el foco no se mueve, y ambas cosas se detectan en cinco minutos de prueba con teclado.
Errores comunes y cómo evitarlos
Estos son los fallos que aparecen una y otra vez en las auditorías de accesibilidad, y casi todos tienen una solución sencilla:
- Ocultar el enlace con display:none, lo que lo hace inaccesible para todos.
- Que el enlace nunca se vea, ni siquiera al recibir el foco. Una persona con visión que navega con teclado no sabe que existe ni a dónde la llevará.
- Un destino sin foco, que hace que la página se desplace visualmente pero el siguiente Tab regrese al menú.
- Banners de cookies o chats emergentes que se interponen antes del enlace en el orden de tabulación.
- Aplicaciones de una sola página (SPA) cuyo sistema de rutas interpreta el ancla como un cambio de página y rompe el salto. En estos casos conviene mover el foco con JavaScript en lugar de depender solo del enlace con almohadilla.
- Demasiados enlaces de salto, que alargan el recorrido en lugar de acortarlo.
Ninguno de estos errores es difícil de corregir. El problema es que son invisibles para quien navega con ratón, y por eso pueden pasar años en producción si nadie en el equipo prueba el sitio con teclado. Incluir la navegación con teclado cada vez que evalúes la usabilidad de un sitio web es la forma más sencilla de evitarlo.
Ejemplos de enlaces de salto por tipo de sitio
La técnica es la misma en todos los casos, pero cada tipo de sitio tiene necesidades particulares.
En los medios de comunicación, los menús suelen ser enormes, con decenas de secciones, temas del día y enlaces a redes. Un único enlace “Saltar a la noticia” ahorra un recorrido muy largo en cada artículo, que es justo donde el lector pasa más tiempo.
Las tiendas en línea añaden otro bloque repetitivo: los filtros. En las páginas de categoría tiene sentido ofrecer dos enlaces, uno para saltar a los filtros y otro directamente a los resultados, de manera que quien ya sabe lo que busca no tenga que atravesar veinte casillas de talla y color.
En los sitios gubernamentales, el enlace de salto suele formar parte de los requisitos de accesibilidad que exigen las normativas nacionales. Muchos lo dejan siempre visible en la parte superior.
Las aplicaciones web y herramientas SaaS, por último, combinan una barra lateral fija con una zona de trabajo central. Además del enlace al contenido principal, puede ser útil uno que lleve a la navegación lateral, y en las aplicaciones de una sola página, gestionar el foco cada vez que cambia la vista, ya que el usuario no recibe una página nueva.
Conclusión
Los enlaces de salto son una de esas mejoras pequeñas que dicen mucho de un sitio. Se implementan con unas pocas líneas de código, ayudan a cumplir un requisito básico de las WCAG y ahorran a miles de personas un esfuerzo repetitivo en cada página que visitan.
La clave está en no darlos por hechos: comprobar que son el primer elemento enfocable, que se ven al recibir el foco, que mueven el foco al destino correcto y que funcionan en todas las plantillas. Y, sobre todo, incluir la navegación con teclado en tu plan de pruebas de usabilidad, porque la accesibilidad se valida navegando, no solo leyendo el código.
QuestionPro UX te permite realizar entrevistas y pruebas moderadas o no moderadas en video, en más de 50 idiomas, y analizar los resultados con IA para detectar barreras que los informes automáticos no muestran.
Preguntas frecuentes sobre los enlaces de salto
No de forma literal. El criterio 2.4.1 de las WCAG, de nivel A, exige un mecanismo para evitar los bloques de contenido repetidos, y los enlaces de salto son una de las técnicas aceptadas junto con los landmarks y los encabezados. En la práctica son la opción más fiable para quienes navegan solo con teclado.
No necesariamente. Lo habitual es ocultarlos visualmente y mostrarlos en cuanto reciben el foco del teclado, lo que cumple las pautas sin alterar el diseño. Lo que nunca debe ocurrir es que permanezcan invisibles al enfocarlos, porque las personas que ven la pantalla y usan teclado no sabrían que existen.
No perjudican el posicionamiento, ya que son enlaces internos a la misma página y los buscadores los entienden como parte de una estructura accesible. Su efecto es indirecto: contribuyen a un sitio más usable y accesible, algo que encaja con la importancia que los buscadores dan a la experiencia de usuario.
Un texto breve que describa el destino, como “Saltar al contenido principal” o “Ir al contenido”. Debe estar en el mismo idioma que la página y ser idéntico en todo el sitio. Evita textos ambiguos como “Saltar” o “Clic aquí”, que no indican a dónde lleva el enlace.
Abre cualquier página, haz clic en la barra de direcciones y pulsa la tecla Tab. Si tu sitio tiene un enlace de salto, debería aparecer como primer elemento enfocado. Pulsa Enter y vuelve a pulsar Tab para confirmar que el foco salta al contenido principal y no regresa al menú.
