Presiona Tab en la mayoría de sitios de comercio electrónico y cuenta. Uno, dos, tres… sigues en el encabezado. Diez, quince, veinte… pasaste el menú de navegación. Veinticinco tabs después, finalmente llegas al contenido principal.
Para alguien que usa un ratón, ese encabezado es una sobrecarga invisible. Para los usuarios de teclado, es un muro que escalan cada vez que cargan una página, o vuelven a una página que ya visitaron. En una tienda con un mega menú de 30 elementos, ese muro puede tomar más de un minuto para cruzar.
Los enlaces para saltar navegación resuelven este problema en dos segundos. Presiona Tab una vez, presiona Intro, y estás en el contenido. Es la característica de accesibilidad más simple del desarrollo web, pero la mayoría de tiendas Shopify no tienen una, y muchas que sí la tienen la implementan incorrectamente.
- WCAG 2.4.1 (Nivel A) requiere un mecanismo para omitir bloques de contenido repetido—los enlaces de salto son la solución estándar
- El encabezado promedio de comercio electrónico obliga a los usuarios de teclado a pasar por 20-40 puntos de tabulación antes de llegar al contenido principal
- Los enlaces de salto reducen la sobrecarga de navegación de más de 30 segundos a menos de 2 segundos por página
- Solo el 32% de los mil millones de sitios web principales tienen un enlace de salto funcional (WebAIM 2024)
- GitHub, Amazon y Google usan enlaces de salto—es práctica estándar, no un caso especial
Por qué existen los enlaces de salto
Cada sitio web tiene bloques de contenido repetido: el logo, la navegación principal, la barra de búsqueda, banners promocionales, tal vez una barra de utilidades con enlaces de inicio de sesión/carrito. Los usuarios de ratón saltan estas secciones instantáneamente—sus ojos saltan al contenido y el cursor los sigue.
Los usuarios de teclado no tienen ese lujo. El orden de tabulación es lineal. Cada elemento interactivo en el encabezado se visita en secuencia: enlace del logo, cada elemento de navegación, botón de búsqueda, icono de carrito, enlace de cuenta. Si tu mega menú es expandible, cada elemento del submenú suma al conteo.
El criterio de éxito WCAG 2.4.1 (Bypass Blocks) existe específicamente para abordar esto. En el Nivel A—el nivel mínimo de cumplimiento—requiere “un mecanismo para omitir bloques de contenido que se repiten en múltiples páginas web.”
Los enlaces para saltar navegación son la solución universalmente aceptada. La Iniciativa de Accesibilidad Web W3C los enumera como la técnica preferida para satisfacer 2.4.1.
¿Cuán mala es la problemática sin enlaces de salto?
Para cuantificar el problema, considera un encabezado típico de tienda Shopify:
| Elemento | Puntos de tabulación |
|---|---|
| Logo (enlace) | 1 |
| Elementos de navegación principal (6 categorías) | 6 |
| Enlaces de mega menú por categoría (promedio 8) | 48 |
| Botón de búsqueda | 1 |
| Cuenta/inicio de sesión | 1 |
| Icono de carrito | 1 |
| Enlace de banner promocional | 1 |
| Selector de idioma/moneda | 2 |
| Total | 61 |
A aproximadamente 0,5 segundos por pulsación de Tab, eso son 30 segundos de sobrecarga antes de llegar al contenido principal. En cada página. Si un usuario visita 5 páginas en una sesión, eso son 2,5 minutos tabulando a través de la misma navegación.
Los usuarios de lectores de pantalla experimentan esto aún más agudamente. Cada punto de tabulación no es solo un salto visual—el lector de pantalla anuncia el elemento: “Enlace, Ropa para mujeres. Enlace, Ropa para hombres. Enlace, Niños. Enlace, Ofertas…” Cada anuncio toma 1-2 segundos de audio.
Un enlace de salto funcional elimina todo eso.
Cómo funcionan los enlaces de salto
Un enlace de salto es un enlace de anclaje que apunta al área de contenido principal. Es el primer elemento enfocable en la página—lo que significa que es lo primero que aparece cuando un usuario presiona Tab.
Implementación básica
El HTML es mínimo:
<!-- Primer elemento dentro de <body> -->
<a href="#main-content" class="skip-link">Saltar al contenido principal</a>
<!-- ...encabezado, navegación, etc... -->
<!-- Área de contenido principal -->
<main id="main-content" tabindex="-1">
<!-- Contenido de la página aquí -->
</main>
El tabindex="-1" en el elemento <main> es importante. Sin él, algunos navegadores no moverán el foco al destino cuando se active el enlace de salto. El elemento necesita ser enfocable mediante programación aunque no deba aparecer en el orden de tabulación normal.
CSS: Visible cuando está enfocado, oculto en caso contrario
Los enlaces de salto generalmente están ocultos hasta que el usuario presiona Tab. Esto los mantiene invisibles para los usuarios de ratón mientras los hace lo primero que encuentran los usuarios de teclado:
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 9999;
}
.skip-link:focus {
position: fixed;
top: 10px;
left: 10px;
width: auto;
height: auto;
padding: 12px 24px;
background: #000000;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 100000;
}
Cuando el enlace de salto recibe enfoque (el usuario presiona Tab), se desliza hacia la vista en la esquina superior izquierda. Es grande, de alto contraste e imposible de perder. Cuando el enfoque se mueve más allá, desaparece nuevamente.
Por qué display: none no funciona
Un error común es ocultar los enlaces de salto con display: none o visibility: hidden:
/* NO hagas esto */
.skip-link {
display: none;
}
.skip-link:focus {
display: block;
}
Los elementos con display: none se eliminan completamente del orden de tabulación. El enlace de salto se vuelve no enfocable—podría no existir.
La técnica correcta usa posicionamiento fuera de pantalla. El elemento todavía está en el DOM y en el orden de tabulación; simplemente está posicionado visualmente donde nadie puede verlo hasta que está enfocado.
Implementar enlaces de salto en Shopify
Agregar un enlace de salto a una tienda Shopify requiere editar el archivo de diseño del tema. Aquí está el proceso paso a paso.
Paso 1: Editar theme.liquid
Abre el editor de temas de Shopify y navega a Layout > theme.liquid. Encuentra la etiqueta de apertura <body> y agrega el enlace de salto inmediatamente después:
<body>
<a href="#MainContent" class="skip-link">Saltar al contenido</a>
<!-- resto de tu tema... -->
Paso 2: Agregar el ID de destino
Encuentra dónde comienza tu contenido principal. En la mayoría de temas Shopify, esta es una etiqueta <main> o un <div> con una clase específica. Agrega el ID de destino:
<main id="MainContent" role="main" tabindex="-1">
Muchos temas Shopify ya tienen un elemento con id="MainContent". Verifica tu tema antes de agregar uno duplicado.
Paso 3: Agregar el CSS
Agrega los estilos del enlace de salto al archivo CSS de tu tema. Usa los estilos de la sección anterior, ajustando los colores para que coincidan con tu marca.
Paso 4: Probar
Presiona Tab en la página de inicio de tu tienda. El enlace de salto debe aparecer en la esquina superior izquierda. Presiona Intro. El enfoque debe saltar al área de contenido principal, omitiendo todo el encabezado.
Prueba en múltiples páginas—páginas de productos, páginas de colecciones, carrito y checkout—para verificar que el enlace de salto funciona consistentemente.
Enlaces de salto múltiples
Algunos sitios se benefician de más de un enlace de salto. Si tu página tiene múltiples regiones de contenido (filtros de barra lateral, cuadrícula de productos, navegación de pie de página), puedes proporcionar atajos a cada una:
<div class="skip-links">
<a href="#MainContent" class="skip-link">Saltar al contenido</a>
<a href="#ProductGrid" class="skip-link">Saltar a productos</a>
<a href="#SearchBar" class="skip-link">Saltar a búsqueda</a>
</div>
Cada enlace de salto adicional aparece cuando el usuario presiona Tab más allá del anterior. El primer Tab muestra “Saltar al contenido”, el segundo muestra “Saltar a productos”, el tercero muestra “Saltar a búsqueda”.
Usa este patrón con moderación. Dos o tres enlaces de salto es útil. Diez enlaces de salto derrota el propósito—solo estás creando otro bloque a omitir.
Cómo los sitios principales manejan esto
- GitHub: Dos enlaces de salto—”Saltar al contenido” y “Saltar a navegación de pie de página”
- Amazon: Un enlace de salto—”Saltar al contenido principal”
- Google: Un enlace de salto—”Saltar al contenido principal” (aparece en resultados de búsqueda)
- BBC: Tres enlaces de salto—”Saltar al contenido”, “Ayuda de accesibilidad” y “Saltar a chat en vivo”
El consenso de la industria es que uno o dos enlaces de salto cubre el 95% de los casos de uso.
Errores de implementación comunes
A pesar de ser una de las características de accesibilidad más simples, los enlaces de salto fallan sorprendentemente a menudo. El informe de WebAIM sobre Million Home Pages 2024 encontró que solo el 32,4% de los mil millones de sitios web principales tenían un enlace de salto funcional.
Aquí están los fallos más comunes:
Error 1: El enlace de salto no va a ningún lado
El enlace de salto existe, pero el ID de destino no coincide:
<!-- El enlace apunta a #main -->
<a href="#main" class="skip-link">Saltar al contenido</a>
<!-- Pero el contenido tiene un ID diferente -->
<main id="MainContent">
Presionar Intro en el enlace de salto no hace nada. El usuario queda confundido.
Solución: Verifica que el valor href coincida con el id en el elemento de destino. Prueba haciendo clic en el enlace de salto y verificando si el enfoque se mueve.
Error 2: El destino no es enfocable
Sin tabindex="-1", algunos navegadores no moverán el enfoque al destino:
<!-- Falta tabindex -->
<main id="MainContent">
El hash de la URL cambia (ves #MainContent en la barra de direcciones), pero el enfoque se queda donde estaba. El usuario presiona Tab y obtiene el siguiente elemento de encabezado en lugar del primer elemento de contenido.
Solución: Agrega tabindex="-1" al elemento de destino.
Error 3: El enlace de salto nunca es visible
Algunas implementaciones mantienen el enlace de salto permanentemente oculto:
.skip-link {
display: none !important;
}
Esto viola WCAG. Los enlaces de salto deben ser visibles cuando están enfocados. Pueden estar fuera de pantalla por defecto, pero deben aparecer cuando están enfocados.
Solución: Usa la técnica de posicionamiento fuera de pantalla descrita arriba, no display: none.
Error 4: El enlace de salto aparece después de otros elementos
Si el enlace de salto no es el primer elemento enfocable, derrota su propósito. Los usuarios tabulan a través de otros elementos antes de llegar a él:
<body>
<div class="promo-bar">
<a href="/sale">Venta de verano - 20% de descuento</a>
</div>
<a href="#MainContent" class="skip-link">Saltar al contenido</a>
Aquí, el enlace del banner promocional obtiene enfoque primero. El enlace de salto es el segundo.
Solución: Coloca el enlace de salto como el primer hijo muy de <body>, antes de cualquier banner, encabezado u otro contenido.
Enlaces de salto y lectores de pantalla
Los enlaces de salto benefician a todos los usuarios de teclado, pero son especialmente importantes para los usuarios de lectores de pantalla.
Cuando un lector de pantalla encuentra una página, lee los elementos en orden DOM. Sin un enlace de salto, el usuario escucha el encabezado completo en cada página: “Banner, enlace, Navi Plus. Navegación, lista, 6 elementos. Enlace, Ropa para mujeres. Enlace, Ropa para hombres…” Esto toma 30-60 segundos por página.
Con un enlace de salto, el lector de pantalla anuncia: “Enlace, Saltar al contenido.” El usuario presiona Intro y escucha inmediatamente el encabezado de la página o el primer párrafo.
Los lectores de pantalla modernos también tienen navegación de punto de referencia integrada (presiona H para saltar a encabezados, presiona 1-6 para niveles de encabezado, presiona D para puntos de referencia). Pero los enlaces de salto son un fallback universal que funciona incluso cuando el HTML semántico no es perfecto.
Verificación de tema ShopifySi estás usando un tema basado en Shopify Dawn (2.0+), el enlace de salto ya está integrado. Busca "skip" en tu theme.liquid para verificar. Si estás en un tema más antiguo o un tema personalizado, probablemente necesitarás agregar uno manualmente.
El argumento de velocidad para los enlaces de salto
Los enlaces de salto no son solo sobre cumplimiento de accesibilidad. Son una característica de productividad.
Considera un comprador B2B realizando un pedido semanal. Visita tu tienda, va directamente a una página de colección mediante marcador e comienza a agregar productos. Si están usando navegación por teclado (muchos profesionales de entrada de datos lo hacen), cada recarga de página los obliga a pasar por el encabezado de nuevo.
Sin enlaces de salto: 30 segundos de tabulación de encabezado por página, 20 páginas por sesión = 10 minutos desperdiciados en navegación repetida.
Con enlaces de salto: 2 segundos por página, 20 páginas por sesión = 40 segundos totales.
Esa es una reducción del 93% en la sobrecarga de navegación. Para un comprador frecuente, esta es la diferencia entre “tolerable” y “eficiente.” Es el tipo de detalle que convierte a un cliente de una sola vez en un cliente habitual.
Herramientas como Navi+ Menu Builder pueden ayudar generando estructuras de navegación que funcionan bien con enlaces de salto y navegación por teclado desde el inicio—lo que significa que no tienes que adaptar estos patrones a un tema que no fue diseñado para ellos.
Lista de verificación de pruebas
Antes de considerar tu implementación de enlace de salto completa, verifica cada una de estas:
- Presiona Tab en una carga de página nueva. El enlace de salto aparece visualmente en la parte superior del área visible.
- Presiona Intro en el enlace de salto. El enfoque se mueve al contenido principal (verifica con Tab—el siguiente elemento enfocado debe estar dentro del contenido principal, no en el encabezado).
- El enlace de salto tiene suficiente contraste (4.5:1 para texto, ya que es texto de tamaño normal).
- El enlace de salto funciona en cada tipo de página: página de inicio, colección, producto, carrito, resultados de búsqueda, blog.
- En móvil (prueba en herramientas de desarrollo del navegador), el enlace de salto aún aparece y funciona correctamente.
- El enlace de salto es el primer elemento enfocable en la página—nada más obtiene enfoque antes que él.
- Después de usar el enlace de salto, presionar Shift+Tab mueve el enfoque hacia atrás en el encabezado (no al enlace de salto nuevamente).
Si los siete pasan, tu implementación del enlace de salto es sólida. Tomó 15 minutos para construir y ahorrará a los usuarios de teclado horas de frustración acumulativa.
Este artículo es parte de la guía más amplia sobre Navegación por teclado: por qué importa más allá de la accesibilidad.