Lien d’évitement

Le lien d’évitement est le premier élément pouvant recevoir le focus sur chaque page. Il reste hors écran jusqu’à ce qu’une personne au clavier appuie sur Tab, puis glisse à l’écran et offre un saut direct vers le contenu principal, au-delà de l’en-tête et de sa navigation.

Appuyez sur Tab sur n’importe quelle page de l’un ou l’autre des deux sites — y compris celle-ci — et le lien apparaît en haut de la fenêtre.

Quand l’utiliser#

• Chaque page, automatiquement : le gabarit de base l’affiche comme premier élément dans <body>, et les pages n’ajoutent jamais le leur
• Pour les personnes qui naviguent au clavier ou au commutateur et qui devraient autrement traverser tout l’en-tête sur chaque page avant d’atteindre le contenu
• Un lien, une cible — il saute vers le point de repère du contenu principal, pas vers des sections arbitraires

Implémentation#

<a class="skip-link" href="#content">{{ i18n "skipToContent" }}</a>

<a class="skip-link" href="#content">Aller au contenu</a>

Le lien se trouve dans layouts/_default/baseof.html comme premier élément dans <body>, avant le partial d’en-tête, et cible le point de repère <main id="content">. Le libellé vient de la clé i18n skipToContent. Il n’y a ni JavaScript ni fichier CSS distinct; le style vient des règles .skip-link dans assets/css/site.css — le lien est en position fixed, translaté hors écran, et focus-visible le ramène à l’écran. Il n’accepte aucune option.

Accessibilité#

• Le lien est le premier élément pouvant recevoir le focus sur la page : un seul appui sur Tab l’atteint avant tout le reste
• C’est un simple <a> avec un href; les lecteurs d’écran l’annoncent comme un lien ordinaire, sans ARIA
• Il n’apparaît que sur focus-visible : la souris ne le révèle jamais, le focus clavier le glisse à l’écran
• Évitez plus d’un lien d’évitement par page — un lien, une destination principale