`. Sa particularité tient à son affichage : invisible en temps normal, il ne doit apparaître visuellement qu'au moment où il reçoit le focus clavier, pour ne pas perturber l'apparence du site pour les autres visiteurs. ``` ...

...

``` Le thème Twenty Twenty-Two, comme la plupart des thèmes par défaut de WordPress depuis plusieurs années, inclut déjà cette classe `skip-link` avec le style adapté. Un thème sur mesure doit reproduire ce comportement, souvent oublié lors d'une intégration réalisée sans référence à un thème par défaut. ## Le CSS qui fait toute la différence > L'essentiel à retenir : Il évite de retraverser tout le menu à chaque page ; Il doit devenir visible au focus, jamais rester caché ; Un simple ancrage HTML suffit techniquement La technique la plus fiable consiste à positionner le lien hors de l'écran par défaut, puis à le ramener dans le flux visuel dès qu'il reçoit le focus. Utiliser `display: none` est à proscrire absolument : un élément avec cette propriété devient totalement inaccessible, y compris au clavier, ce qui annule tout l'intérêt du dispositif. ``` .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #1a1a1a; color: #fff; padding: 0.75em 1.25em; } .skip-link:focus { left: 1em; top: 1em; } ``` Ce déplacement hors écran via `left: -9999px` conserve l'élément dans l'arbre d'accessibilité et dans l'ordre de tabulation, contrairement à `display: none` ou `visibility: hidden`, qui l'en retirent complètement. ## Un seul skip link ne suffit pas toujours Sur un site simple, un unique lien vers le contenu principal couvre l'essentiel du besoin. Sur un site plus complexe, avec une recherche interne, une barre latérale de filtres ou un fil d'Ariane volumineux, plusieurs liens d'évitement peuvent se justifier : un vers le contenu principal, un vers la recherche, un vers le pied de page contenant les coordonnées. Le RGAA recommande de rester raisonnable sur ce nombre : au-delà de trois ou quatre liens, le mécanisme devient lui-même une source de complexité. - Un lien d'évitement vers le contenu principal, quasiment systématique - Un lien vers la recherche interne sur un site à catalogue important - Un lien vers le menu principal, utile sur une page dont le contenu précède le menu dans le DOM - Éviter les listes de liens d'évitement trop longues, contre-productives ## Comment vérifier qu'il fonctionne réellement Le test tient en quelques secondes : charger n'importe quelle page du site, appuyer une seule fois sur la touche Tab, et vérifier que le lien devient visible à l'écran, à un endroit cohérent, avec un contraste suffisant. Appuyer ensuite sur Entrée doit déplacer le focus directement au début du contenu principal, sans simplement faire défiler visuellement la page : c'est là que la majorité des implémentations bâclées échouent, en oubliant de gérer le focus programmatique sur la cible via `tabindex="-1"` lorsque l'ancre visée n'est pas nativement focusable. > Un lien d'évitement qui ne fait que faire défiler la page sans déplacer le focus n'apporte quasiment rien à un utilisateur clavier. Le défilement visuel et le déplacement du focus sont deux choses différentes, et seule la seconde compte réellement ici. ## En résumé Le lien d'évitement figure parmi les correctifs les moins coûteux et les plus impactants d'un audit d'accessibilité : quelques lignes de HTML, un peu de CSS, et un test de trente secondes suffisent à le valider. Son absence, en revanche, condamne chaque utilisateur clavier à retraverser l'intégralité du menu à chaque nouvelle page, une pénibilité largement invisible tant qu'on ne l'a pas testée soi-même.