Enlaces visibles al enfocar que permiten a quien usa teclado saltar bloques repetidos (navegación, cabeceras) e ir al contenido principal, menú o búsqueda.
Qué son
Los skip links están ocultos visualmente hasta recibir foco (Tab). Van al inicio de la página y mueven el foco a los puntos de referencia que configures.
Para qué sirven
- Teclado: Evitan recorrer toda la cromática con muchas pulsaciones de Tab
- Lectores de pantalla: Llegan al contenido principal sin oír primero toda la navegación
- WCAG: Apoyo clave a 2.4.1 (Bypass Blocks)
- UX: Muy útil en sitios con cabeceras pesadas o mega menús
Notas WCAG
- 2.1.1 Teclado: Totalmente usable con teclado
- 2.4.1 Evitar bloques: Criterio principal de los skip links
- 2.4.7 Foco visible: El propio enlace «saltar» debe verse claramente al enfocarse
Enlaces integrados
Tres preajustes:
- Contenido principal: salto a la región de contenido principal
- Navegación: salto al menú principal
- Búsqueda: salto al campo de búsqueda
Cada uno puede activarse por separado.
Configuración guiada en el área de administración
La página de ajustes agrupa cada destino en su propia tarjeta. La primera tarjeta está abierta de forma predeterminada y los demás detalles permanecen compactos hasta que se necesitan. Para cada destino activo puedes comprobar el selector CSS en la página de inicio. El estado distingue una coincidencia única, un destino ausente y un selector que coincide con varios elementos. La apariencia y el comportamiento avanzado están en secciones desplegables. El editor visual apilado reúne colores, tipografía, espaciado, esquinas, borde y sombra alrededor de una sola vista previa del enlace con foco.
Ajustes
Activar/desactivar:
- Interruptor maestro global
- Interruptores por enlace
Por enlace:
- Selector objetivo: selector CSS (p. ej. #main-content, #menu-main-menu, #s)
- Texto del enlace: etiqueta visible (p. ej. «Saltar al contenido principal», «Saltar a la navegación»)
- Atributo title: pista adicional opcional (tooltip)
Estilo del skip link:
- Tamaño de fuente: p. ej. 16px, 1em
- Peso de fuente: p. ej. 600, bold
- Padding: p. ej. 15px 23px 14px
- Color de fondo / texto al enfocar
- Radio del borde
- Sombra de caja (p. ej. anillo)
- Decoración del texto: subrayado, sobre línea, tachado o ninguna
Estilo de foco:
- Fondo, texto y sombra separados para el enlace enfocado
Resaltado del objetivo:
- Destello opcional en el destino del salto
- Color RGBA
- Efecto: ninguno, fundido, zoom o ambos
- Desplazamiento: píxeles desde arriba (por defecto 50) para cabeceras fijas
Ejemplos
Ejemplo 1: Por defecto
Activa los tres con objetivos por defecto, fondo azul suave y texto blanco, desplazamiento de 50px bajo cabecera fija.
Ejemplo 2: Mínimo
Solo «contenido principal»; tipo más pequeño, colores discretos, sombra ligera: discreto pero conforme.
Ejemplo 3: Alta visibilidad
Texto mayor, par de alto contraste (p. ej. amarillo / negro), sombra fuerte para quien necesita una señal clara.
Consejos
- Mantén los skip links los primeros en el orden de tabulación (justo tras
<body>) - Usa textos claros que nombren el destino
- Verifica que los selectores existan en el DOM
- Desplazamiento ≥ altura de cabecera fija
- Prueba solo con Tab
- Oculto hasta enfocar es lo esperado; no los muestres siempre salvo que el diseño lo pida
- Cumple contraste en estado enfocado (WCAG 1.4.3)
Controles de apariencia estructurados
Los colores, la tipografía, el espaciado interior, el radio de las esquinas, el borde y la sombra comparten ahora un editor visual de Diseño de los enlaces de salto. Cambia entre estas propiedades equivalentes con las pestañas accesibles por teclado y usa valores rápidos cuando estén disponibles o valores exactos vinculados o individuales. Una única vista previa central representa siempre el Skip Link configurado y se actualiza al instante. En teléfonos, la fila de pestañas y los preajustes de sombra siguen siendo desplazables horizontalmente, y la opción activa se muestra por completo sin mover la página. Los valores CSS avanzados siguen disponibles.
El tamaño de fuente, el espaciado interior, el radio de las esquinas y el ancho del borde usan controles de valores estructurados. El espaciado, las esquinas y los bordes pueden vincularse para usar un valor común o editarse por lado o esquina. Las unidades disponibles se limitan a las adecuadas para cada propiedad.
Para unidades mixtas, calc(), clamp() y otras funciones CSS sigue disponible un valor CSS avanzado. Las sombras ofrecen los preajustes Ninguna, Sutil, Media y Fuerte. El editor personalizado controla el desplazamiento horizontal y vertical, el desenfoque, la expansión, el color con transparencia y el modo interior. Las sombras múltiples se introducen en el campo CSS avanzado. La vista previa se actualiza al instante.
Notas técnicas
- Se insertan justo tras
<body> - CSS los oculta hasta el foco: el salto no requiere JS
- El resaltado opcional del destino puede usar JS
Disponible para: Todos los planes Free