La fonctionnalité "Passer au contenu principal" est conçu pour permettre aux utilisateurs de lecteurs d'écran et à ceux naviguant uniquement au clavier de contourner les liens de navigation répétitifs et d'accéder directement au contenu principal d'une page web.

Principes fondamentaux

Position du lien

Positionner le lien en haut de la structure HTML de chaque page.

<body>
  <a href="#MainContent" class="skip-link">Passer au contenu principal</a>
  <!-- Autres éléments de la page -->
</body>

Visibilité et style

Le lien doit être conçus pour s’afficher lorsqu'il reçoit le focus, même s'il est principalement destiné aux utilisateurs n'utilisant pas la souris.

cssCopy code
.skip-link {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

Utilisation des attributs ARIA

Employer les attributs role et aria-label pour expliciter la fonction du lien :

<a href="#MainContent" class="skip-link" aria-label="Passer au contenu principal">Passer au contenu principal</a>

Identification du contenu principal

Marquer la zone de contenu principal avec un identifiant (id) associé au lien d'évitement.

<main id="MainContent" role="main">
  <h1>Bienvenue à la Ville de Laval</h1>
  <p>Introduction au contenu principal du site de la Ville de Laval.</p>
</main>

Bonnes pratiques