Introducción

Skip Links Explained

5 min de lectura
Ver contenido

Skip Links: Proporcionando Atajos al Contenido Principal

Introducción

Los skip links son atajos de navegación ocultos que permiten a los usuarios de teclado saltar contenido repetitivo—como headers y menús de navegación—e ir directamente al contenido principal. WCAG 2.4.1 (Bypass Blocks) requiere que los sitios web proporcionen un mecanismo para saltar contenido que se repite en las páginas, haciendo de los skip links un requisito de accesibilidad de Nivel A.

Sin skip links, los usuarios de teclado deben navegar con Tab a través de docenas de enlaces de navegación en cada página antes de llegar al contenido real. Esto crea una experiencia frustrante y que consume tiempo, haciendo los sitios web esencialmente inutilizables para usuarios dependientes del teclado.

El Concepto Básico

Los skip links son enlaces ancla que:

  1. Aparecen como el primer elemento enfocable en la página
  2. Están visualmente ocultos hasta que reciben foco
  3. Enlazan al área de contenido principal
  4. Permiten a los usuarios saltar la navegación repetitiva
<!-- Primer elemento en el body -->
<a href="#main-content" class="skip-link">Saltar al contenido principal</a>

<!-- Navegación que se salta -->
<header>
  <nav>
    <!-- 20+ enlaces de navegación -->
  </nav>
</header>

<!-- Destino del skip link -->
<main id="main-content">
  <!-- Contenido de la página -->
</main>

Quién Se Beneficia

Tipo de Usuario Beneficio
Usuarios de teclado Saltar al contenido sin navegar por la navegación
Usuarios de lectores de pantalla Saltar elementos repetitivos
Usuarios de dispositivos de conmutación Reducir el número de acciones necesarias
Usuarios con discapacidades motoras Menos pulsaciones para llegar al contenido
Usuarios avanzados Atajo de navegación rápida

Requisitos WCAG

2.4.1 Bypass Blocks (Nivel A)

Debe estar disponible un mecanismo para saltar bloques de contenido que se repiten en múltiples páginas. Esto se puede lograr mediante:

  1. Skip links - Método más común
  2. Estructura de encabezados apropiada - Los lectores de pantalla pueden navegar por encabezados
  3. Landmarks ARIA - regions, navigation, main, etc.
  4. Navegación expandible - Menús colapsables reducen puntos de Tab

¿Por Qué Nivel A?

Los mecanismos de bypass son Nivel A (cumplimiento mínimo) porque sin ellos, los usuarios de teclado enfrentan una barrera significativa en cada página. Es uno de los requisitos de accesibilidad más fundamentales.

<!-- MAL: Sin skip link en absoluto -->
<body>
  <header>
    <nav><!-- 30 enlaces --></nav>
  </header>
  <main>Contenido</main>
</body>
<!-- Los usuarios de teclado deben navegar por los 30 enlaces -->

<!-- MAL: display:none oculta de todos -->
<a href="#main" style="display: none;">Saltar al contenido</a>

<!-- MAL: visibility:hidden también es inaccesible -->
<a href="#main" style="visibility: hidden;">Saltar al contenido</a>

<!-- MAL: El ID destino no existe -->
<a href="#main-content">Saltar al contenido</a>
<main id="content"><!-- ¡ID incorrecto! --></main>

<!-- MAL: El destino no es enfocable -->
<a href="#main">Saltar al contenido</a>
<main id="main"><!-- Sin tabindex, puede no recibir foco en algunos navegadores --></main>

<!-- MAL: Skip link después de la navegación -->
<nav><!-- Enlaces de navegación --></nav>
<a href="#main">Saltar al contenido</a>  <!-- ¡Demasiado tarde! -->

<!-- MAL: Texto vago -->
<a href="#main">Saltar</a>

<!-- MAL: Jerga técnica -->
<a href="#main">Bypass del bloque de navegación</a>

<!-- BIEN: Claro y descriptivo -->
<a href="#main">Saltar al contenido principal</a>

Estados de Visibilidad

Los skip links usan CSS para permanecer ocultos hasta recibir foco:

.skip-link {
  /* Estado oculto - posicionado fuera de pantalla */
  position: absolute;
  top: -40px;
  left: 0;

  /* Estilos */
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;

  /* Transición suave */
  transition: top 0.3s;
}

.skip-link:focus {
  /* Estado visible - movido a la pantalla */
  top: 0;
}

Comportamiento del Foco

Cuando se activan, los skip links:

  1. Mueven el foco del teclado al elemento destino
  2. Hacen scroll en la página para mostrar el destino
  3. El siguiente Tab se mueve al siguiente elemento enfocable después del destino
<!-- Enlace -->
<a href="#main" class="skip-link">Saltar al contenido principal</a>

<!-- Destino con tabindex para comportamiento de foco consistente -->
<main id="main" tabindex="-1">
  <h1>Título de la Página</h1>
  <!-- Contenido -->
</main>

Algunas páginas se benefician de múltiples opciones de salto:

<div class="skip-links">
  <a href="#main-content" class="skip-link">Saltar al contenido principal</a>
  <a href="#search" class="skip-link">Saltar a búsqueda</a>
  <a href="#footer-nav" class="skip-link">Saltar al pie de página</a>
</div>
Escenario Skip Links Necesarios
Sitio simple Saltar al contenido principal
E-commerce Saltar al contenido + Saltar a búsqueda
Sitio de noticias Saltar al contenido + Saltar a categorías
Web app Saltar al contenido + Saltar a acción principal

Prueba Manual Rápida

  1. Cargar la página
  2. Presionar Tab una vez
  3. ¿Aparece un skip link?
  4. Presionar Enter en el skip link
  5. ¿El foco se mueve al contenido principal?
  6. Presionar Tab de nuevo - ¿estás después de la navegación?

Qué Verificar

  • [ ] Skip link es el primer elemento enfocable
  • [ ] Skip link se vuelve visible al recibir foco
  • [ ] Skip link tiene texto claro y descriptivo
  • [ ] El elemento destino recibe el foco
  • [ ] El elemento destino se desplaza a la vista
  • [ ] El siguiente Tab va al primer enlace en el contenido principal

Herramientas para Pruebas

  • Solo teclado - Navegar con Tab por la página
  • axe DevTools - Verifica presencia de skip link
  • WAVE - Resalta problemas de skip link
  • Lector de pantalla - Verificar anuncio y navegación

Consideraciones de Diseño

Apariencia Visual

Los skip links deben:

  • Ser claramente visibles cuando tienen foco
  • Tener suficiente contraste de color
  • Usar tamaño de fuente legible
  • No obstruir otro contenido

Animación

/* Aparición suave */
.skip-link {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

Opciones de Posicionamiento

Posición Ventajas Desventajas
Superior izquierda Ubicación esperada Puede superponerse al logo
Superior centro Prominente Puede desplazar contenido
Posición fija Siempre accesible Cubre contenido

Resumen de Mejores Prácticas

Hacer No Hacer
Hacer skip link el primer elemento enfocable Ocultar con display:none o visibility:hidden
Usar texto claro y descriptivo Usar texto vago como “Saltar” o “Click aquí”
Agregar tabindex=“-1” al destino Olvidar hacer el destino enfocable
Probar con teclado Asumir que probar con ratón es suficiente
Considerar múltiples skip links para páginas complejas Abrumar usuarios con demasiadas opciones de salto

Artículos Relacionados

Referencias

  1. W3C - WCAG 2.2 SC 2.4.1 Bypass Blocks
  2. W3C - Technique G1: Skip Link
  3. WebAIM - Skip Navigation Links
  4. Deque University - Skip Links

Artículos relacionados

Versión relacionada

Guía detallada

Skip Links Implementation Guide

Los skip links son una de las características de accesibilidad más importantes para usuarios de teclado, sin embargo frecuentemente se implementan...

Hub de categoría

Hub

Wcag Compliance Hub

La accesibilidad web asegura que los sitios web y aplicaciones puedan ser utilizados por todos, incluyendo personas con discapacidades

En la misma categoría

Introducción

Keyboard Navigation Explained

La navegación por teclado es la capacidad de usar un sitio web solo con el teclado—sin ratón, touchpad o pantalla táctil requeridos