Liens en premier focus permettant aux utilisateurs clavier d’éviter les blocs répétés (navigation, en-têtes) et d’aller directement au contenu principal, au menu ou à la recherche.
Ce que c’est
Les skip links sont masqués visuellement jusqu’au focus (Tab). Ils se placent en haut de page et déplacent le focus vers les repères que vous configurez.
Pourquoi les utiliser
- Utilisateurs clavier : éviter un long chrome sans dizaines de Tab
- Lecteurs d’écran : atteindre le contenu principal sans entendre toute la navigation d’abord
- WCAG : soutien central pour 2.4.1 (Contourner des blocs)
- UX : gain net sur les sites à en-têtes lourds ou méga-menus
Notes WCAG
- 2.1.1 Clavier : entièrement utilisable au clavier
- 2.4.1 Contourner des blocs : critère principal pour les skip links
- 2.4.7 Visibilité du focus : le skip link lui-même doit être clairement visible au focus
Liens intégrés
Trois préréglages :
- Contenu principal : saut vers la région de contenu principale
- Navigation : saut vers le menu principal
- Recherche : saut vers le champ de recherche
Chacun peut être activé individuellement.
Configuration guidée dans l’administration
La page de réglages regroupe chaque destination dans sa propre carte. La première carte est ouverte par défaut et les autres détails restent compacts jusqu’à ce qu’ils soient nécessaires. Pour chaque destination active, vous pouvez vérifier le sélecteur CSS sur la page d’accueil. L’état distingue une correspondance unique, une cible absente et un sélecteur correspondant à plusieurs éléments. L’apparence et le comportement avancé restent dans des sections repliables. L’éditeur visuel empilé regroupe couleurs, typographie, espacements, angles, bordure et ombre autour d’un seul aperçu du lien au focus.
Réglages
Activer / désactiver :
- Interrupteur général
- Bascules par lien
Par lien :
- Sélecteur cible : sélecteur CSS (p. ex. #main-content, #menu-main-menu, #s)
- Texte du lien : libellé visible (p. ex. « Aller au contenu principal », « Aller à la navigation »)
- Attribut title : indice supplémentaire optionnel (infobulle)
Style des skip links :
- Taille de police : p. ex. 16px, 1em
- Graisse : p. ex. 600, bold
- Remplissage : p. ex. 15px 23px 14px
- Couleur de fond / texte au focus
- Rayon de bordure
- Ombre portée (p. ex. anneau)
- Décoration du texte : soulignement, ligne au-dessus, barré ou aucune
Style du focus :
- Fond, texte et ombre distincts pour le lien focalisé
Surbrillance de la cible :
- Flash optionnel sur la cible du saut
- Couleur RVBA
- Effet : 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 trois avec les cibles par défaut, fond bleu discret et texte blanc, décalage 50 px sous un en-tête fixe.
Exemple 2 : minimal
Seulement « contenu principal » ; police plus petite, couleurs atténuées, ombre légère — discret mais conforme.
Exemple 3 : forte visibilité
Texte plus grand, paire à fort contraste (p. ex. jaune / noir), ombre marquée pour les utilisateurs qui ont besoin d’un signal net.
Conseils
- Gardez les skip links en premier dans l’ordre de tabulation (juste après
<body>) - Utilisez un texte de lien clair qui nomme la destination
- Vérifiez que les sélecteurs existent dans le DOM
- Décalage ≥ hauteur d’en-tête fixe
- Testez au clavier uniquement (Tab)
- Masqué jusqu’au focus est attendu — ne les affichez pas en permanence sauf choix de design
- Respectez le contraste à l’état focus (WCAG 1.4.3)
Contrôles d’apparence structurés
Les couleurs, la typographie, l’espacement intérieur, le rayon des angles, la bordure et l’ombre partagent désormais un éditeur visuel Style des liens d’évitement. Utilisez les onglets accessibles au clavier pour passer entre ces propriétés équivalentes, puis choisissez une valeur rapide lorsqu’elle existe ou des valeurs exactes liées ou individuelles. Un seul aperçu central représente toujours le Skip Link configuré et se met à jour immédiatement. Sur téléphone, la rangée d’onglets et les préréglages d’ombre restent défilables horizontalement, et l’option active est entièrement révélée sans déplacer la page. Les valeurs CSS avancées restent disponibles.
La taille de police, l’espacement intérieur, le rayon des angles et la largeur de bordure utilisent des contrôles de valeurs structurés. L’espacement, les angles et les bordures peuvent être liés pour partager une valeur ou être modifiés côté par côté ou angle par angle. Les unités proposées sont limitées à celles qui conviennent à la propriété.
Une valeur CSS avancée reste disponible pour les unités mixtes, calc(), clamp() et les autres fonctions CSS. Les ombres proposent les préréglages Aucune, Subtile, Moyenne et Forte. L’éditeur personnalisé contrôle les décalages horizontal et vertical, le flou, l’étalement, la couleur avec transparence et le mode interne. Les ombres multiples restent disponibles dans le champ CSS avancé. L’aperçu est mis à jour immédiatement.
Notes techniques
- Injection juste après
<body> - Le CSS masque jusqu’au focus — pas de JS requis pour le saut
- La surbrillance de cible optionnelle peut utiliser du JS
Disponible pour : tous les plans Free