Lien d'accès rapide

Un lien d'accès rapide permet d'accéder rapidement à une zone de contenu de la page ou de sauter une zone dans la page.

Règles d’implémentation pour l’accessibilité

Les critères 12.6 et 12.7 du RGAA requièrent la présence de liens d’évitement ou d’accès rapide aux zones de regroupement de contenus présentes dans plusieurs pages web, à savoir :

zone d’en-tête (implémenté avec <header role="banner">) ;
zone de navigation principale (implémenté avec <nav role="navigation">) ;
zone de contenu principal (implémenté avec <main role="main">) ;
zone de pied de page (implémenté avec <footer role="contentinfo">) ;
et zone de moteur de recherche (implémenté avec <form role="search">).

Le critère 12.7 se concentre plus particulièrement sur le lien d’évitement ou d’accès rapide au contenu principal (implémenté avec <main role="main">).

Dans les motifs de conception proposés ici, le lien d’accès rapide, parfois appelé aussi lien d’évitement (skip link en anglais) lorsqu’il permet de sauter une zone de la page, est invisible par défaut sur la page et n’apparaît qu’à la prise de focus pour une navigation au clavier.

Liens multiples d’accès rapide

Pour implémenter plusieurs liens d’accès rapide au début du code (typiquement un lien d’accès rapide au contenu, un lien d’accès rapide au menu de navigation voire un lien d’accès rapide au pied de page), on va créer une zone invisible à l’oeil nu qui apparaitra uniquement lors d’une navigation au clavier.
Dans ce cas, les liens seront implémentés entre les éléments HTML nav avec un système de liste à puces (éléments HTML ulet li).

Visuel

Pour tester les liens d’accès rapide, placez-vous en haut de cette page et naviguer au clavier (touche " tab " pour se déplacer, touche " entrée " pour " cliquer " sur le lien).

Code HTML

Ce code sera placé immédiatement après la balise body de la page HTML.

Le lien « Contenu » pointera vers la zone principale identifée comme suit : <main role="main" id="contenu">
Le lien « Menu » pointera vers le menu de navigation principale identifé comme suit : <nav role="navigation" id="navigation" aria-label="Menu principal">
Le lien « Recherche » pointera vers le formulaire de rechercche dans tout le site identifé comme suit : <form role="search" id="recherche">
Le lien « Pied de page » pointera vers la zone de pied de page identifée comme suit : <footer role="contentinfo" id="piedDePage">

<body>
<div class="rapide">
	<nav role="navigation" aria-label="Accès rapide">
		<ul>
			<li><a href="#contenu">Contenu</a></li>
			<li><a href="#navigation">Menu</a></li> 
      <li><a href="#recherche">Recherche</a></li>
			<li><a href="#piedDePage">Pied de page</a></li>
		</ul>
	</nav>
</div>
[...]

Code CSS

Pour que la zone d’accès rapide apparaisse bien au focus clavier, on utilisera la pseudo-classe :focus-within sur celle-ci.
Voir la documentation MDN sur :focus-within.

:root {
   --COLOR-1: #E3E3F6;
   --COLOR-2: #141429;
   --COLOR-3: #000;
}  
div.rapide {
  display:inline-block;
  background-color:var(--COLOR-1);
  padding:.5em;
  position:absolute;
  left:-99999px;
  z-index:2033
}
div.rapide:focus-within {
  position:relative;
  top:0;
  left:0;
  width:100%
}
div.rapide nav {
  position:relative;
  z-index:2035
}
div.rapide ul {
  list-style:none;
  display:flex
}
div.evitement ul li {
  padding-right:1em
}
div.rapide ul a {
  color:var(--COLOR-3);
  text-decoration:underline;
  padding:.25em
}
div.rapide ul a:focus {
  outline:3px solid var(--COLOR-2)
}

Lien unique d’accès raide au contenu

On peut vouloir ne proposer qu’un seul lien d’accès rapide. Dans ce cas, le motif HTML/CSS ne sera pas implémenté dans un élément nav. Il sera placé juste après la balise <body>

Code HTML

<body>
    <a class="evitement" href="#contenu">Aller au contenu</a> 
    <header role="banner">
    [...]

Code CSS

Il existe plusieurs façons de rendre son lien invisible en voici une :

a.evitement {
   display: inline-block;
   color: #555;
   background: #fff;
   padding: .5em;
   position: absolute;
   left: -99999rem;
   z-index: 100;
}
a.evitement:focus {
   left: 0;
}