Herramientas HTML

Gratis Generador de enlace de salto accesible

Genera un enlace de salto accesible con CSS para navegación por teclado.

Cargando herramienta...

Qué es Generador de enlace de salto accesible?

Un enlace de salto (skip link) es un enlace oculto en la parte superior de la página que se vuelve visible cuando se enfoca con la tecla Tab. Permite a los usuarios de teclado y lectores de pantalla saltar directamente al contenido principal, omitiendo la navegación. WCAG requiere una forma de evitar bloques de contenido repetidos.

Respuesta rápida

Genere un enlace de navegación de salto accesible que aparece al enfocar con Tab, permitiendo a los usuarios de teclado y lectores de pantalla saltar los bloques de navegación repetidos y llegar al área de contenido principal.

Last updated: 2026-06-11

Limitaciones

  • El enlace de salto requiere que el elemento destino con el id coincidente exista en el DOM. Si el id destino falta o está mal escrito, el enlace navega a un elemento inexistente.
  • Las pruebas solo visuales pueden pasar por alto problemas de orden de enfoque que afectan la navegación con lector de pantalla. Pruebe siempre con un lector de pantalla después de agregar el enlace de salto.
  • Los enlaces de salto que saltan a elementos no enfocables pueden no mover el enfoque del teclado correctamente. El elemento destino debe tener tabindex="-1" para recibir enfoque programático.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Ingrese el selector CSS del área de contenido principal, como #main-content o #content.
  2. Establezca el texto del enlace que aparecerá cuando el enlace de salto esté enfocado.
  3. Elija si el enlace está siempre visible o solo aparece al enfocarse con el teclado.
  4. Copie el HTML y CSS generados en su página y pruebe presionando Tab desde la parte superior de la página.

Para qué puedes usarla

  • Agregar navegación de salto a una plantilla HTML estática para mejor accesibilidad por teclado.
  • Cumplir con los requisitos de bloque de omisión WCAG 2.4.1 en páginas con navegación persistente.
  • Mejorar la navegación por teclado para un sitio de documentación multipágina con barra lateral.

Casos de uso

Ejemplos prácticos

Ejemplo

Blog con enlace de salto al enfocar

Una plantilla de blog agrega un enlace de salto que se vuelve visible al enfocar con Tab y salta a <main id="content">. Los usuarios de teclado pueden presionar Tab una vez al cargar la página para ver y activar el enlace.

Ejemplo

Salto de barra lateral en documentación

Un sitio de documentación usa un enlace de salto visible que los usuarios de teclado pueden activar para saltar la navegación de la barra lateral y llegar al contenido principal del artículo.

Errores comunes

  • Establecer el selector de destino a un elemento que no existe o no es enfocable, lo que hace que el enlace de salto no funcione.
  • Ocultar el enlace con display: none, lo que también lo oculta de los lectores de pantalla y anula el propósito.
  • Olvidar hacer que el elemento destino sea enfocable con tabindex="-1" para que pueda recibir el enfoque cuando se active el enlace de salto.

Verificación

  1. Cargue la página y presione Tab inmediatamente después de que la página se cargue. El enlace de salto debería aparecer y ser el primer elemento enfocable de la página.
  2. Active el enlace de salto y confirme que el enfoque del teclado se mueva al área de contenido principal. Continúe presionando Tab para verificar que el enfoque siga el orden de contenido esperado desde ese punto.

FAQ

Preguntas sobre Generador de enlace de salto accesible

¿Debería el enlace de salto estar siempre visible?

Puede ser visible al enfocar o siempre visible. Cualquier método es válido siempre que el enlace sea accesible para los usuarios de teclado cuando lo necesiten.

¿Qué selector debería usar como destino del enlace de salto?

El id del elemento de contenido principal, como #main-content o #content. El elemento destino también debe tener tabindex="-1" para que pueda recibir el enfoque cuando se active el enlace.

¿Necesita el elemento destino algún atributo especial?

Sí. Agregue tabindex="-1" al elemento destino para que pueda recibir enfoque de teclado programático cuando se active el enlace de salto. Agregar role="region" y una etiqueta al contenedor destino también ayuda a los usuarios de lectores de pantalla a identificar el área de contenido principal.

¿Puedo tener más de un enlace de salto en una página?

Sí, pero manténgalo limitado. Una página puede incluir un enlace de salto al contenido y un enlace de salto adicional como saltar a búsqueda o saltar al pie de página. Cada enlace de salto debe tener un texto visible único y descriptivo y un id de destino único. Demasiados enlaces de salto saturan el orden de tabulación y frustran a los usuarios de teclado. Uno o dos enlaces de salto cubren la mayoría de los diseños de página.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también