Liens d'évitement

Les liens d’évitement sont un système de navigation secondaire permettant à l’usager naviguant au clavier, ou équipé d’un lecteur d'écran, d’accéder plus rapidement à des zones précises de la page.

HTML

Structure du composant

Le composant Liens d'évitement permet aux utilisateurs de naviguer rapidement vers les sections principales de la page.

Toujours placé en haut de la page, sa structure est la suivante :

  • Le conteneur des liens d'évitement est un élément HTML <div> défini par la classe fr-skiplinks.
  • Les liens d'évitement sont entourés par un élément HTML <nav> défini par la classe fr-container avec le rôle navigation et comportant un attribut aria-label dont la valeur est "Accès rapide".
  • La liste des liens d'évitement est un élément HTML <ul> défini par la classe fr-skiplinks__list.
  • Chaque élément <li> de la liste contient :
    • Un lien d'évitement, un élément HTML <a> défini par la classe fr-link.

Attention

Les liens d'évitement pointent vers des ancres (#intitulé), qui doivent être présentes dans la page. Par exemple, Le lien <a class="fr-link" href="#content">Contenu</a> ne peut fonctionner que si un élément avec l’id “content” est présent dans la page (comme <main id=”content”>), à l’endroit souhaité.

Exemple de structure HTML

<div class="fr-skiplinks">
    <nav role="navigation" aria-label="Accès rapide" class="fr-container">
        <ul class="fr-skiplinks__list">
            <li>
                <a class="fr-link" href="#content">Contenu</a>
            </li>
            <li>
                <a class="fr-link" href="#header-navigation">Menu</a>
            </li>
            <li>
                <a class="fr-link" href="#header-search">Recherche</a>
            </li>
            <li>
                <a class="fr-link" href="#footer">Pied de page</a>
            </li>
        </ul>
    </nav>
</div>

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core et des liens d'évitement doivent être importés. L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec le fichier minifié, car plus léger. 

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/skiplink/skiplink.min.css" rel="stylesheet">

NB : Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé : 

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/skiplink/skiplink.legacy.min.css" rel="stylesheet">

JavaScript

Le composant Liens d'évitement ne nécessite pas l'utilisation de JavaScript pour son fonctionnement de base.

Note de version

Voir les évolutions sur github

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github