Qu'est-ce qu'un lien de saut ?

What's a Skip Link?

Imaginez n'avoir qu'un clavier disponible pour naviguer sur le Web. Vous êtes sur un site, en train de faire des recherches sur un sujet d'intérêt, et chaque fois que vous chargez une nouvelle page, vous devez vous frayer un chemin à travers le même contenu encore et encore.

L'en-tête avec une liste déroulante méga-nav qui s'ouvre sur le focus du clavier, un formulaire de recherche, une zone de contenu à gauche… quel casse-tête ! Si seulement il y avait un moyen de sauter tout ce contenu répété pour arriver à ce que vous voulez réellement ; le contenu principal de la page.

Entrez le lien de saut. Le lien de saut est un lien qui se trouve généralement tout en haut du document HTML, la première chose disponible lors de l'utilisation d'un clavier. Son but est de résoudre les problèmes décrits ci-dessus ; sauter/sauter/ ollier sur les zones de contenu répétées afin de mettre le focus du clavier sur le contenu principal du corps. De cette façon, les utilisateurs du clavier uniquement disposent d'un mécanisme pour accéder directement au contenu principal.

Utilisateur de clavier animé gif os découvrant et utilisant le lien de saut sur Shopify.com - Le focus se déplace du haut vers la zone de contenu principale.

Il existe des exigences spécifiques pour créer un lien de saut :

  • Implémenter comme un lien valide avec un attribut href
  • Définissez la valeur de l'attribut href pour qu'elle corresponde à l' id de l'élément qui recevra le focus clavier
  • Ajoutez la classe CSS visuallyhidden afin de masquer visuellement le lien
  • Ajoutez la classe CSS focusable afin d'afficher le lien lorsqu'il reçoit le focus (cela aide les utilisateurs voyants au clavier uniquement à savoir où ils se trouvent actuellement dans le document)
  • Placer le lien comme premier élément en haut du document HTML

Le code devrait ressembler à ceci :

 <body> <a href="#" class="visuallyhidden focusable">Skip to content</a> <!-- ... --> </body>

Avec le lien de saut en place et prêt à fonctionner, la dernière exigence est de fournir un emplacement pour le lien vers lequel s'ancrer ; que définissons-nous comme valeur href du lien ?

Aller où ?

L'autre partie de la création d'un lien de saut consiste à envoyer le focus du clavier à un endroit utile. N'oubliez pas que le but du lien est d'ignorer le contenu répété afin de fournir un accès rapide à la zone de contenu principale.

En règle générale, lorsque le lien est activé, le focus sera envoyé à un élément tel que le conteneur d'élément main ou peut-être un élément d'en-tête. Ces éléments ne peuvent pas recevoir le focus clavier par défaut, donc, pour ce faire, l'attribut tabindex doit être ajouté à l'élément. Spécifier une valeur de -1 permettra à l'élément de recevoir le focus, mais ne sera pas disponible dans l'ordre de tabulation naturel lors de la navigation dans la page à l'aide du clavier.

Avec cela en place, l'activation du lien de saut amènera le focus du clavier à partir du haut du document, au-delà de tout le contenu répété, et directement à l'élément main . À partir de ce moment, l'utilisateur peut avancer par Tab et consommer le contenu principal de la page.

Le code final devrait ressembler à ceci :

 <a href="#main" class="visuallyhidden focusable">Skip to content</a> <!-- ... --> <main id="main" tabindex="-1"> <!-- ... --> </main>

Essayez-le en utilisant uniquement votre clavier. Si le lien apparaît sur le focus et passe à l'élément principal, vous êtes prêt à partir !

Critères de réussite WCAG

Cela revient à 2.4.1 Bypass Blocks qui stipule :

"Un mécanisme est disponible pour contourner les blocs de contenu qui se répètent sur plusieurs pages Web."

Ressources:

Retour au blog