Saltar al contenido

¿Qué es un enlace de salto?

Un enlace de salto (skip link) es un enlace que permite a los usuarios, especialmente aquellos que navegan con teclado o lectores de pantalla, saltar directamente a secciones específicas de la página, evitando tener que navegar por contenido repetitivo como menús de navegación o encabezados.

Relación con WCAG 2.1

El Criterio 2.4.1 (Omitir Bloques) de WCAG 2.1 Nivel A requiere que se proporcione un mecanismo para omitir bloques de contenido que se repiten en múltiples páginas web. Los enlaces de salto son la forma más común de cumplir este criterio.

Ejemplos prácticos

✅ Correcto: Enlace de salto al contenido principal

<!-- Enlace de salto invisible que aparece con foco -->
<a href="#main-content" class="skip-link">Saltar al contenido principal</a>

<nav>
  <!-- Menú de navegación -->
</nav>

<main id="main-content">
  <!-- Contenido principal -->
</main>

<style>
  .skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  
  .skip-link:focus {
    position: fixed;
    left: 6px;
    top: 6px;
    width: auto;
    height: auto;
    padding: 8px 16px;
    background: #000;
    color: #fff;
    z-index: 1000;
    text-decoration: none;
  }
</style>

✅ Correcto: Múltiples enlaces de salto

<!-- Varios enlaces de salto para diferentes secciones -->
<div class="skip-links">
  <a href="#main-content">Saltar al contenido principal</a>
  <a href="#main-navigation">Saltar a la navegación</a>
  <a href="#search">Saltar a la búsqueda</a>
</div>

❌ Incorrecto: Sin enlace de salto

<!-- Usuarios de teclado deben navegar por todo el menú -->
<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/about">Acerca de</a></li>
    <!-- ... muchos más enlaces ... -->
  </ul>
</nav>

<main>
  <!-- Contenido principal -->
</main>

❌ Incorrecto: Enlace de salto siempre visible

<!-- No debe estar siempre visible, solo con foco -->
<a href="#main-content" class="skip-link" style="display: block;">
  Saltar al contenido
</a>

Errores comunes

1. Enlace siempre visible: Debe estar oculto hasta recibir foco
2. Posición incorrecta: Debe estar al inicio del documento
3. Sin indicador visual claro: Debe ser claramente visible cuando tiene foco
4. Múltiples enlaces sin agrupar: Agrupar en un contenedor
5. No probar con teclado: Verificar que funciona navegando solo con Tab

Buenas prácticas

• Posición al inicio: Colocar al principio del body
• Oculto por defecto: Usar técnicas de ocultamiento accesible
• Visible con foco: Aparecer claramente cuando recibe foco
• Texto descriptivo: "Saltar al contenido principal" es claro
• Múltiples opciones: Proporcionar enlaces a diferentes secciones importantes
• Probar con teclado: Verificar navegando solo con Tab

Técnicas de implementación

CSS para ocultar/mostrar

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 6px;
  top: 6px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 1000;
  text-decoration: none;
  border: 2px solid #fff;
}

Términos relacionados

• [[Navegación por teclado]]
• [[Foco]]
• [[Landmarks]]
• [[WCAG 2.1]]
• [[Criterio 2.4.1]]