Aller à la navigation, au contenu principal, à la recherche ou en haut / bas de page sans souris.
Ce que c’est
Des raccourcis de type touche d’accès configurables déplacent le focus vers des cibles CSS que vous définissez. Indispensables pour la navigation clavier seule, utiles sur les longues pages.
Pourquoi les utiliser
- Utilisateurs clavier : plus rapide que de parcourir tout le chrome au Tab
- Lecteurs d’écran : saut direct au contenu principal ou à la recherche
- Utilisateurs avancés : efficace sur les grands écrans
- WCAG : soutient 2.4.1 (Contourner des blocs) et documente 2.1.4 (raccourcis caractères) via activation / désactivation
Notes WCAG
- 2.1.1 Clavier : implémenté au clavier
- 2.1.4 Raccourcis caractères : prévoir un moyen de désactiver les raccourcis
- 2.4.1 Contourner des blocs : le saut vers le contenu remplit l’attente lorsque les cibles sont correctes
- 2.4.7 Visibilité du focus : surbrillance optionnelle après le saut
Valeurs par défaut
Cinq préréglages :
- Alt + Maj + N : navigation
- Alt + Maj + H : contenu principal
- Alt + Maj + S : haut de page
- Alt + Maj + E : bas de page
- Alt + Maj + F : recherche
macOS : utilisez Control + Option à la place de Alt + Maj.
Réglages
L’écran de réglages vous guide désormais étape par étape. Chaque carte de cible affiche d’abord uniquement son état, sa combinaison de touches et une courte explication. Ouvrez Configurer pour modifier la touche, le sélecteur CSS et le libellé de la barre.
- État de la configuration : vue compacte des cinq raccourcis.
- Vérifier toutes les cibles : vérifie les sélecteurs CSS actifs sur la page d’accueil et signale les cibles absentes ou invalides.
- Aide contextuelle : explique les cibles près du champ concerné. L’aide complète s’ouvre dans un panneau latéral sur ordinateur et dans un panneau inférieur sur mobile.
- Réglages avancés : regroupe la mise en évidence, l’animation et le décalage afin de garder la configuration principale claire.
- Protection contre les conflits : les raccourcis actifs doivent utiliser des lettres différentes.
Bascules :
- Activer / désactiver chaque raccourci
- Interrupteur général
Personnalisation :
- Lettre : changer la touche d’accès (p. ex. N → M)
- Sélecteur cible : sélecteur CSS (p. ex. #main-menu, .search-form)
- Libellé Toolbar : texte affiché pour ce raccourci dans la vue Aide clavier de la Toolbar
L’aide clavier répertorie uniquement les raccourcis réellement activés. Elle ne crée aucun raccourci global par lettre supplémentaire.
Effets de surbrillance :
- Flash optionnel sur l’élément cible
- Couleur (RVBA)
- Style d’animation : aucun, fondu, zoom ou les deux
- Décalage de défilement : pixels depuis le haut (par défaut 50) pour en-têtes fixes
Exemples
Exemple 1 : valeurs par défaut
Activez les cinq avec les cibles par défaut, surbrillance en fondu discrète, décalage 50 px pour en-tête fixe.
Exemple 2 : sélecteur de navigation personnalisé
Si votre navigation est à #site-navigation, dirigez le raccourci N vers cet élément.
Exemple 3 : avancé
Étendez les associations avec prudence — certaines touches sont réservées par les navigateurs.
Conseils
- Choisissez des lettres mémorables (N / H / S / E / F)
- Testez sur plusieurs navigateurs — les combinaisons diffèrent légèrement
- Vérifiez les sélecteurs dans les outils de développement
- Décalage ≥ hauteur d’en-tête fixe
- Activez Aide clavier dans les réglages de la Toolbar afin que les visiteurs puissent y consulter les raccourcis disponibles
- Évitez les conflits (p. ex. certains navigateurs lient Alt+F)
Notes techniques
- Nécessite JavaScript
- La surbrillance disparaît après un court délai
- Les aides de défilement scrollToTop / scrollToBottom n’exigent pas de sélecteur
Disponible pour : tous les plans Free