Une page « À propos » de dix-huit écrans de haut, une fiche produit qui empile description, caractéristiques techniques, avis clients et FAQ : ce genre de page pousse un utilisateur au clavier à appuyer sur Tab des dizaines de fois avant d’atteindre la section qui l’intéresse. Le lien d’évitement classique, celui qui saute directement du haut de page au contenu principal, ne résout qu’une partie du problème : une fois dans le contenu principal, encore faut-il pouvoir sauter d’une section à l’autre.
La recette qui suit ajoute un petit sommaire de navigation interne, avec des ancres qui déplacent réellement le focus clavier vers chaque section — pas seulement le défilement visuel, qui ne suffit pas à un utilisateur naviguant au clavier ou avec un lecteur d’écran.
Étape 1 : identifier et baliser chaque section
Chaque section reçoit un identifiant unique et un titre de niveau <h2>, condition nécessaire pour qu’un lien d’ancre ait un sens :
<section id="section-caracteristiques" aria-labelledby="titre-caracteristiques">
<h2 id="titre-caracteristiques">Caractéristiques techniques</h2>
<p>…</p>
</section>Étape 2 : construire le sommaire de saut
Le sommaire lui-même est une liste de liens classique, placée juste après le titre principal de la page, avec un libellage explicite pour les technologies d’assistance :
<nav aria-label="Sommaire de la page">
<ul>
<li><a href="#section-description">Description</a></li>
<li><a href="#section-caracteristiques">Caractéristiques techniques</a></li>
<li><a href="#section-avis">Avis clients</a></li>
<li><a href="#section-faq">Questions fréquentes</a></li>
</ul>
</nav>Étape 3 : déplacer réellement le focus, pas seulement le scroll
C’est l’étape que la plupart des intégrations oublient. Un lien d’ancre classique fait défiler la page jusqu’à la cible, mais ne déplace pas le focus clavier : après le clic, l’utilisateur qui appuie sur Tab repart depuis l’endroit où il se trouvait avant le saut, pas depuis la section affichée. Il faut donc que la cible soit focusable, et que le script gère le focus explicitement :
document.querySelectorAll('nav[aria-label="Sommaire de la page"] a').forEach((lien) => {
lien.addEventListener('click', (event) => {
const cibleId = lien.getAttribute('href').slice(1);
const cible = document.getElementById(cibleId);
if (!cible) return;
event.preventDefault();
cible.setAttribute('tabindex', '-1');
cible.scrollIntoView({ behavior: 'smooth', block: 'start' });
cible.focus({ preventScroll: true });
history.pushState(null, '', '#' + cibleId);
});
});Le tabindex="-1" ajouté dynamiquement rend la section focusable par script sans l’insérer dans l’ordre normal de tabulation au clavier. Après le saut, un appui sur Tab continue naturellement depuis cette section, exactement là où l’utilisateur vient d’être amené.
Étape 4 : respecter le confort de lecture au défilement
Le comportement smooth de scrollIntoView gagne à être désactivé pour les utilisateurs ayant réduit les animations dans leur système :
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}Étape 5 : tester au clavier, du sommaire jusqu’à la dernière section
Le test final consiste à parcourir chaque lien du sommaire au clavier seul, Tab puis Entrée, et à vérifier à chaque fois trois choses : le contenu défile bien jusqu’à la section, le focus visuel apparaît sur le titre de la section, et un nouvel appui sur Tab reprend bien après ce titre.
- Le sommaire reste visible et utilisable même sans JavaScript, grâce aux ancres HTML natives en repli.
- Chaque lien du sommaire correspond à un titre réel de la page, jamais à un texte reformulé qui ne correspondrait pas.
- L’URL se met à jour avec l’ancre, ce qui permet de partager un lien direct vers une section précise.
Notre verdict
Sur une page produit ou une longue page de contenu, ce sommaire de saut coûte une vingtaine de lignes de JavaScript et transforme radicalement l’expérience clavier. Il complète un lien d’évitement global sans le remplacer : le premier saute par-dessus l’en-tête et la navigation, le second permet de circuler ensuite librement à l’intérieur du contenu.
