Crear un enlace para saltar que funcione de verdad
Conecte el ancla con un destino que pueda recibir el foco.
Crear un enlace para saltar que funcione de verdad es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Las dos partes de un enlace de salto
Un enlace de salto funcional tiene dos partes: un ancla que enlaza a algún lugar y un destino en el que realmente puede situarse. Ambas deben existir.
La parte del ancla
El ancla es un enlace normal cuyo href es un fragmento, como una almohadilla seguida de un id. Al hacer clic, indica al navegador adónde ir.
<a href="#main">Skip to main content</a>La parte del destino
El destino es el elemento al que desea llegar. Asígnele un id coincidente para que el fragmento del href tenga un lugar al que apuntar.
<main id="main"> ... </main>main es el destino natural
Apunte el enlace de salto al landmark main. Es la única región que contiene el contenido propio de la página, justo donde los usuarios quieren situarse.
Hacer clic no basta
Un problema habitual: el enlace desplaza la página, pero el foco permanece en el enlace. La siguiente pulsación de Tab devuelve al usuario directamente a la navegación.
Haga que el destino sea enfocable
La solución es permitir que el foco se desplace allí. Añada tabindex igual a menos uno para que el destino pueda recibir el foco desde el enlace de salto.
<main id="main" tabindex="-1"> ... </main>Por qué menos uno y no cero
Menos uno significa que se puede enfocar mediante scripts y usar como destino de un enlace, pero no forma parte del orden de Tab. El elemento no se convertirá en una parada de tabulación adicional para el resto de usuarios.
Los navegadores modernos ayudan
Hoy en día, la mayoría de los navegadores desplaza el foco automáticamente al destino del fragmento. Pero añadir tabindex menos uno garantiza que funcione en todas partes, así que consérvelo.
Pruebe con el oído y la vista
Recargue la página, pulse Tab una vez y después Enter. El indicador de foco debería saltar al contenido, y la siguiente pulsación de Tab debería continuar dentro de él. ✅
Use un texto claro
Etiquételo claramente. Skip to main content indica exactamente qué ocurrirá, mucho mejor que un Skip ambiguo o un icono.
Orden en la página
Coloque el ancla como el primer hijo de body, antes del encabezado, para que Tab lo alcance antes que cualquier otra cosa de la página.
Comprobación rápida
¿Qué permite que el foco llegue realmente a la región main?
Resumen
Conecte un ancla con un id coincidente en main, añada tabindex menos uno y haga una prueba navegando con Tab. Así tendrá un enlace de salto que funciona de verdad. 🎯
Preguntas frecuentes
¿La lección «Crear un enlace para saltar que funcione de verdad» es gratis?
Sí — el texto completo de «Crear un enlace para saltar que funcione de verdad» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Crear un enlace para saltar que funcione de verdad»?
Conecte el ancla con un destino que pueda recibir el foco. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Crear un enlace para saltar que funcione de verdad»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué existe «Saltar al contenido principal»
- Crear un enlace para saltar que funcione de verdad
- Oculto visualmente hasta recibir el foco
- Varios enlaces de omisión para páginas grandes