Navigation au clavier : pourquoi c'est important au-delà de l'accessibilité

Liens de navigation à ignorer : le raccourci de 2 secondes que les utilisateurs expérimentés nécessitent

Pourquoi les liens « Aller au contenu principal » existent, comment les implémenter dans Shopify, et comment ils accélèrent la réalisation des tâches.

Appuyez sur Tab sur la plupart des sites de commerce électronique et comptez. Un, deux, trois… vous êtes toujours dans l’en-tête. Dix, quinze, vingt… vous avez dépassé le menu de navigation. Vingt-cinq appuis sur Tab plus tard, vous atteignez enfin le contenu principal.

Pour quelqu’un utilisant une souris, cet en-tête est une surcharge invisible. Pour les utilisateurs au clavier, c’est un mur qu’ils escaladent à chaque chargement de page, ou en retournant à une page précédemment visitée. Sur une boutique avec un menu géant de 30 articles, ce mur peut prendre plus d’une minute à traverser.

Les liens de navigation à ignorer résolvent ce problème en deux secondes. Appuyez sur Tab une fois, appuyez sur Entrée, et vous êtes au contenu. C’est la fonctionnalité d’accessibilité la plus simple en développement web, mais la plupart des boutiques Shopify n’en ont pas une, et beaucoup de celles qui en ont l’implémentent de manière incorrecte.

Lecture rapide

WCAG 2.4.1 (Niveau A) exige un mécanisme pour contourner les blocs de contenu répétés — les liens de saut sont la solution standard
L'en-tête moyen du commerce électronique force les utilisateurs au clavier à traverser 20-40 points d'arrêt avant d'atteindre le contenu principal
Les liens de saut réduisent la surcharge de navigation de 30+ secondes à moins de 2 secondes par page
Seulement 32 % des sites parmi le premier million ont un lien de saut fonctionnel (WebAIM 2024)
GitHub, Amazon et Google utilisent tous des liens de saut — c'est une pratique standard, pas un cas limite

Pourquoi les liens de saut existent

Chaque site web a des blocs de contenu répétés : le logo, la navigation principale, la barre de recherche, des bannières promotionnelles, peut-être une barre d’utilitaires avec des liens de connexion/panier. Les utilisateurs de souris contournent cela instantanément — leurs yeux sautent vers le contenu et leur curseur suit.

Les utilisateurs au clavier n’ont pas ce luxe. L’ordre de tab est linéaire. Chaque élément interactif dans l’en-tête est visité en séquence : lien du logo, chaque élément de nav, bouton de recherche, icône de panier, lien de compte. Si votre menu géant est dépliable, chaque élément de sous-menu s’ajoute au compte.

Le critère de succès WCAG 2.4.1 (Contourner les blocs) existe spécifiquement pour traiter cela. Au Niveau A — le niveau minimum de conformité — il exige « un mécanisme pour contourner les blocs de contenu qui sont répétés sur plusieurs pages Web ».

Les liens de navigation à ignorer sont la solution universellement acceptée. L’initiative Web Accessibility du W3C les énumère comme la technique préférée pour satisfaire à 2.4.1.

À quel point le problème est-il grave sans liens de saut ?

Pour quantifier la problématique, considérez un en-tête de boutique Shopify typique :

Élément	Points d’arrêt
Logo (lien)	1
Éléments de navigation principale (6 catégories)	6
Liens de menu géant par catégorie (moyenne 8)	48
Bouton de recherche	1
Compte/connexion	1
Icône de panier	1
Lien de bannière promotionnelle	1
Sélecteur de langue/devise	2
Total	61

À environ 0,5 secondes par appui sur Tab, cela représente 30 secondes de surcharge avant d’atteindre le contenu principal. À chaque page. Si un utilisateur visite 5 pages dans une session, cela représente 2,5 minutes à naviguer dans la même navigation.

Les utilisateurs de lecteurs d’écran vivent cela encore plus intensément. Chaque point d’arrêt n’est pas juste un saut visuel — le lecteur d’écran annonce l’élément : « Lien, Vêtements femmes. Lien, Vêtements hommes. Lien, Enfants. Lien, Soldes… » Chaque annonce prend 1-2 secondes d’audio.

Un lien de saut fonctionnel élimine tout cela.

Comment fonctionnent les liens de saut

Un lien de saut est un lien d’ancrage qui cible la zone de contenu principal. C’est le premier élément focusable de la page — ce qui signifie que c’est la première chose qui apparaît quand un utilisateur appuie sur Tab.

Implémentation basique

Le HTML est minimal :

<!-- Premier élément à l'intérieur de <body> -->
<a href="#main-content" class="skip-link">Aller au contenu principal</a>

<!-- ...en-tête, navigation, etc... -->

<!-- Zone de contenu principal -->
<main id="main-content" tabindex="-1">
  <!-- Contenu de la page ici -->
</main>

Le tabindex="-1" sur l’élément <main> est important. Sans cela, certains navigateurs ne déplaceront pas le focus vers la cible quand le lien de saut est activé. L’élément doit être focusable par programme, même s’il ne devrait pas apparaître dans l’ordre de tab normal.

CSS : visible au focus, caché sinon

Les liens de saut sont généralement cachés jusqu’à ce que l’utilisateur appuie sur Tab. Cela les rend invisibles pour les utilisateurs de souris tout en en faisant la première chose que les utilisateurs au clavier rencontrent :

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}

.skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 12px 24px;
  background: #000000;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 100000;
}

Quand le lien de saut reçoit le focus (l’utilisateur appuie sur Tab), il glisse dans la vue au coin supérieur gauche. Il est grand, à haut contraste, et impossible à manquer. Quand le focus se déplace au-delà, il disparaît à nouveau.

Pourquoi `display: none` ne fonctionne pas

Une erreur courante est de masquer les liens de saut avec display: none ou visibility: hidden :

/* NE faites PAS ceci */
.skip-link {
  display: none;
}
.skip-link:focus {
  display: block;
}

Les éléments avec display: none sont complètement supprimés de l’ordre de tab. Le lien de saut devient non focusable — il pourrait aussi bien ne pas exister.

La technique correcte utilise un positionnement hors écran. L’élément est toujours dans le DOM et dans l’ordre de tab ; il est juste positionnellement placé où personne ne peut le voir jusqu’à ce qu’il soit focusé.

Implémentation des liens de saut dans Shopify

L’ajout d’un lien de saut à une boutique Shopify nécessite l’édition du fichier de mise en page du thème. Voici le processus étape par étape.

Étape 1 : Éditer theme.liquid

Ouvrez l’éditeur de thème Shopify et naviguez vers Layout > theme.liquid. Trouvez la balise <body> d’ouverture et ajoutez le lien de saut immédiatement après :

<body>
  <a href="#MainContent" class="skip-link">Aller au contenu</a>
  <!-- reste de votre thème... -->

Étape 2 : Ajouter l’ID cible

Trouvez où votre contenu principal commence. Dans la plupart des thèmes Shopify, c’est une balise <main> ou une <div> avec une classe spécifique. Ajoutez l’ID cible :

<main id="MainContent" role="main" tabindex="-1">

De nombreux thèmes Shopify ont déjà un élément avec id="MainContent". Vérifiez votre thème avant d’ajouter un doublon.

Étape 3 : Ajouter le CSS

Ajoutez les styles de lien de saut au fichier CSS de votre thème. Utilisez les styles de la section précédente, en ajustant les couleurs pour correspondre à votre marque.

Étape 4 : Tester

Appuyez sur Tab sur la page d’accueil de votre boutique. Le lien de saut devrait apparaître au coin supérieur gauche. Appuyez sur Entrée. Le focus devrait sauter au contenu principal, contournant l’en-tête entier.

Testez sur plusieurs pages — pages de produits, pages de collections, panier et paiement — pour vérifier que le lien de saut fonctionne de manière cohérente.

Liens de saut multiples

Certains sites bénéficient de plus d’un lien de saut. Si votre page a plusieurs régions de contenu (filtres de barre latérale, grille de produits, navigation de pied de page), vous pouvez fournir des raccourcis vers chacun :

<div class="skip-links">
  <a href="#MainContent" class="skip-link">Aller au contenu</a>
  <a href="#ProductGrid" class="skip-link">Aller aux produits</a>
  <a href="#SearchBar" class="skip-link">Aller à la recherche</a>
</div>

Chaque lien de saut supplémentaire apparaît quand l’utilisateur appuie sur Tab au-delà du précédent. Le premier Tab montre « Aller au contenu », le deuxième montre « Aller aux produits », le troisième montre « Aller à la recherche ».

Utilisez ce schéma avec parcimonie. Deux ou trois liens de saut est utile. Dix liens de saut va à l’encontre de l’objectif — vous créez juste un autre bloc à contourner.

Comment les sites principaux gèrent cela

GitHub : Deux liens de saut — « Skip to content » et « Skip to footer navigation »
Amazon : Un lien de saut — « Skip to main content »
Google : Un lien de saut — « Skip to main content » (apparaît sur les résultats de recherche)
BBC : Trois liens de saut — « Skip to content », « Accessibility Help » et « Skip to Live Chat »

Le consensus de l’industrie est qu’un ou deux liens de saut couvre 95 % des cas d’utilisation.

Erreurs courantes d’implémentation

Malgré le fait d’être l’une des fonctionnalités d’accessibilité les plus simples, les liens de saut échouent étonnamment souvent. Le rapport WebAIM 2024 sur un million de pages d’accueil a révélé que seuls 32,4 % des premiers millions de sites web avaient un lien de saut fonctionnel.

Voici les défaillances les plus courantes :

Erreur 1 : Le lien de saut ne mène nulle part

Le lien de saut existe, mais l’ID cible ne correspond pas :

<!-- Le lien cible #main -->
<a href="#main" class="skip-link">Aller au contenu</a>

<!-- Mais le contenu a un ID différent -->
<main id="MainContent">

Appuyer sur Entrée sur le lien de saut ne fait rien. L’utilisateur est laissé confus.

Correction : Vérifiez que la valeur href correspond à la id sur l’élément cible. Testez en cliquant sur le lien de saut et en vérifiant si le focus se déplace.

Erreur 2 : La cible n’est pas focusable

Sans tabindex="-1", certains navigateurs ne déplaceront pas le focus vers la cible :

<!-- tabindex manquant -->
<main id="MainContent">

Le hash URL change (vous voyez #MainContent dans la barre d’adresse), mais le focus reste où il était. L’utilisateur appuie sur Tab et obtient l’élément d’en-tête suivant au lieu du premier élément de contenu.

Correction : Ajoutez tabindex="-1" à l’élément cible.

Erreur 3 : Le lien de saut n’est jamais visible

Certaines implémentations gardent le lien de saut complètement caché :

.skip-link {
  display: none !important;
}

Cela viole WCAG. Les liens de saut doivent être visibles au focus. Ils peuvent être hors écran par défaut, mais ils doivent apparaître au focus.

Correction : Utilisez la technique de positionnement hors écran décrite ci-dessus, pas display: none.

Erreur 4 : Le lien de saut apparaît après d’autres éléments

Si le lien de saut n’est pas le premier élément focusable, il contredit son objectif. Les utilisateurs appuient sur Tab à travers d’autres éléments avant de l’atteindre :

<body>
  <div class="promo-bar">
    <a href="/sale">Solde d'été - 20 % de réduction</a>
  </div>
  <a href="#MainContent" class="skip-link">Aller au contenu</a>

Ici, le lien de la bannière promotionnelle reçoit le focus en premier. Le lien de saut est deuxième.

Correction : Placez le lien de saut comme tout premier enfant de <body>, avant les bannières, en-têtes ou tout autre contenu.

Liens de saut et lecteurs d’écran

Les liens de saut bénéficient à tous les utilisateurs au clavier, mais ils sont particulièrement importants pour les utilisateurs de lecteurs d’écran.

Quand un lecteur d’écran rencontre une page, il lit les éléments dans l’ordre du DOM. Sans lien de saut, l’utilisateur entend l’en-tête complet à chaque page : « Bannière, lien, Navi Plus. Navigation, liste, 6 articles. Lien, Vêtements femmes. Lien, Vêtements hommes… » Cela prend 30-60 secondes par page.

Avec un lien de saut, le lecteur d’écran annonce : « Lien, Aller au contenu ». L’utilisateur appuie sur Entrée et entend immédiatement le titre de la page ou le premier paragraphe.

Les lecteurs d’écran modernes disposent également d’une navigation de repère intégrée (appuyez sur H pour sauter aux en-têtes, appuyez sur 1-6 pour les niveaux d’en-têtes, appuyez sur D pour les repères). Mais les liens de saut sont un fallback universel qui fonctionne même quand le HTML sémantique est imparfait.

Vérification du thème ShopifySi vous utilisez un thème basé sur Shopify Dawn (2.0+), le lien de saut est déjà intégré. Recherchez « skip » dans votre theme.liquid pour vérifier. Si vous utilisez un ancien thème ou un thème personnalisé, vous devrez probablement en ajouter un manuellement.

L’argument de la vitesse pour les liens de saut

Les liens de saut ne concernent pas seulement la conformité d’accessibilité. C’est une fonctionnalité de productivité.

Considérez un acheteur B2B passant une commande hebdomadaire. Il visite votre boutique, accède directement à une page de collection via un signet, et commence à ajouter des produits. S’il utilise la navigation au clavier (beaucoup de professionnels de la saisie de données le font), chaque rechargement de page le force à traverser l’en-tête à nouveau.

Sans liens de saut : 30 secondes de navigation dans l’en-tête par page, 20 pages par session = 10 minutes gaspillées sur la navigation répétée.

Avec liens de saut : 2 secondes par page, 20 pages par session = 40 secondes total.

C’est une réduction de 93 % de la surcharge de navigation. Pour un acheteur fréquent, c’est la différence entre « tolérable » et « efficace ». C’est le genre de détail qui transforme un client unique en client régulier.

Des outils comme Navi+ Menu Builder peuvent aider en générant des structures de navigation qui fonctionnent bien avec les liens de saut et la navigation au clavier directement — ce qui signifie que vous n’avez pas à adapter ces schémas à un thème qui n’a pas été conçu pour eux.

Liste de vérification des tests

Avant de considérer votre implémentation de lien de saut comme complète, vérifiez chacun de ceux-ci :

Appuyez sur Tab lors d’un chargement de page frais. Le lien de saut apparaît visuellement en haut de la fenêtre d’affichage.
Appuyez sur Entrée sur le lien de saut. Le focus se déplace vers le contenu principal (vérifiez avec Tab — l’élément suivant focusé devrait être à l’intérieur du contenu principal, pas dans l’en-tête).
Le lien de saut a un contraste suffisant (4,5:1 pour le texte, car c’est un texte de taille normale).
Le lien de saut fonctionne sur tous les types de pages : accueil, collection, produit, panier, résultats de recherche, blog.
Sur mobile (testez dans les outils de développement du navigateur), le lien de saut s’affiche toujours et fonctionne correctement.
Le lien de saut est le premier élément focusable de la page — rien d’autre ne reçoit le focus avant lui.
Après utilisation du lien de saut, appuyer sur Maj+Tab déplace le focus dans l’en-tête (pas vers le lien de saut à nouveau).

Si les sept réussissent, votre implémentation de lien de saut est solide. Il a fallu 15 minutes à construire et économisera aux utilisateurs au clavier des heures de frustration cumulative.

Cet article fait partie du guide plus large sur la Navigation au clavier : pourquoi c’est important au-delà de l’accessibilité.