Un utilisateur de clavier devra peut-être parcourir le même en-tête sur chaque page avant d'accéder à l'article. Un lien de saut rend le contenu principal accessible en une seule action, sans modifier la présentation visuelle pour tout le monde.

<a class="skip-link" href="#main">Skip to content</a>
<header>...</header>
<main id="main" tabindex="-1">...</main>

Gardez-le visible lorsque vous êtes concentré

  • Placez le lien près du début du document afin qu'il soit l'un des premiers arrêts du clavier.
  • Cachez-le visuellement sans le supprimer de l'ordre de tabulation, puis révélez-le avec :focus.
  • Donnez à la cible un identifiant stable et assurez-vous que vous pouvez vous concentrer sur elle.
.skip-link:not(:focus) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link:focus { clip-path: none; height: auto; width: auto; }

Testez en appuyant sur Tab immédiatement après le chargement de la page, puis activez le lien et confirmez le déplacement du focus et de la position de lecture vers le contenu principal.