Saltos a navegación, contenido principal, búsqueda o inicio/fin de página sin usar el ratón.
Qué son
Atajos configurables al estilo «tecla de acceso» que mueven el foco a objetivos CSS que definas. Esenciales para quien solo usa teclado y útiles en páginas largas.
Para qué sirven
- Teclado: Más rápido que tabular por toda la cromática
- Lectores de pantalla: Salto directo al contenido principal o a la búsqueda
- Usuarios avanzados: Eficiencia en pantallas largas
- WCAG: Apoya 2.4.1 (Bypass Blocks) y documenta 2.1.4 (atajos de carácter) mediante activación/desactivación
Notas WCAG
- 2.1.1 Teclado: Implementado por teclado
- 2.1.4 Atajos de carácter: Ofrece forma de desactivar los atajos
- 2.4.1 Evitar bloques: El salto al contenido cumple la expectativa si los objetivos son correctos
- 2.4.7 Foco visible: Resaltado opcional tras el salto
Valores por defecto
Cinco combinaciones predefinidas:
- Alt + Shift + N: Navegación
- Alt + Shift + H: Contenido principal
- Alt + Shift + S: Inicio de página
- Alt + Shift + E: Final de página
- Alt + Shift + F: Búsqueda
macOS: usa Control + Option en lugar de Alt + Shift.
Ajustes
La pantalla de ajustes te guía ahora paso a paso. Cada tarjeta de destino muestra primero solo su estado, la combinación de teclas y una explicación breve. Abre Configurar para editar la tecla, el selector CSS y la etiqueta de la barra.
- Estado de configuración: ofrece una vista compacta de los cinco atajos.
- Comprobar todos los destinos: comprueba los selectores CSS activos en la página de inicio y señala destinos ausentes o no válidos.
- Ayuda contextual: explica los destinos junto al campo correspondiente. La ayuda completa se abre como panel lateral en escritorio y como panel inferior en móvil.
- Ajustes avanzados: agrupa resaltado, animación y desplazamiento para mantener clara la configuración principal.
- Protección contra conflictos: los atajos activos deben usar letras diferentes.
Interruptores:
- Activar/desactivar cada atajo
- Interruptor maestro global
Personalización:
- Letra: cambia la tecla de acceso (p. ej. N → M)
- Selector objetivo: selector CSS (p. ej. #main-menu, .search-form)
- Etiqueta en la barra: texto mostrado para este atajo en la vista Ayuda de teclado de la Toolbar
La ayuda de teclado solo enumera los atajos realmente activados. No crea atajos globales de letras adicionales.
Efectos de resaltado:
- Destello opcional en el elemento objetivo
- Color (RGBA)
- Estilo de animación: ninguno, fundido, zoom o ambos
- Desplazamiento: píxeles desde arriba (por defecto 50) para cabeceras fijas
Ejemplos
Ejemplo 1: Por defecto
Activa los cinco con objetivos por defecto, resaltado suave y desplazamiento de 50px para cabecera fija.
Ejemplo 2: Selector de nave personalizado
Si tu nave está en #site-navigation, dirige el atajo N allí.
Ejemplo 3: Avanzado
Amplía los mapeos con cuidado: algunas teclas están reservadas por el navegador.
Consejos
- Elige letras memorables (N/H/S/E/F)
- Prueba en varios navegadores: las combinaciones varían ligeramente
- Verifica selectores en las herramientas de desarrollo
- El desplazamiento debe ser ≥ altura de cabecera fija
- Activa Ayuda de teclado en los ajustes de la Toolbar para que los visitantes consulten allí los atajos disponibles
- Evita conflictos (p. ej. algunos navegadores usan Alt+F)
Notas técnicas
- Requiere JavaScript
- El resaltado desaparece tras un breve retraso
- Los auxiliares de desplazamiento scrollToTop / scrollToBottom no necesitan selector
Disponible para: Todos los planes Free