Lien d'évitement - Skiplink
Les liens d’évitement permettent aux utilisateurs naviguant au clavier, ou équipés de lecteurs d'écran, d’accéder plus rapidement à des zones précises de la page.
Liens d'évitement par défaut
- Contenu
- Menu
- Recherche
- Pied de page
- etc
Le composant est composé de liens simples.
<div class="fr-skiplinks">
<nav class="fr-container" role="navigation" aria-label="Accès rapide">
<ul class="fr-skiplinks__list">
<li>
<a class="fr-link" href="#contenu">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>
À noter
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="#contenu">Contenu</a> ne peut fonctionner que si un élément avec l’id “contenu” est présent dans la page (comme <main id=”contenu”), à l’endroit souhaité.
Ils doivent figurer parmi les premiers éléments accessibles au clavier et avoir toujours le même contenu, la même position et la même forme sur l’ensemble du site.
![](/uploads/Capture_d_ecran_2021_03_08_a_09_25_19_142687d7f2.png)
Règles d’utilisation
Usages
- L’intégration des liens d’évitement est une obligation pour l’ensemble des sites.
- Le composant doit toujours être placé au tout début de la page.
- Le choix des liens à afficher dépend des éléments clés présents dans le site. Le lien minimum est “Accéder au contenu”, les autres liens doivent être choisis en fonction des fonctionnalité/zone clés.
- Pour que les liens d'évitement soient efficaces, il faut en limiter le nombre.
Accessibilité
- Les liens d’accès rapide doivent être entourés par une balise <nav>.
- Les liens d’accès rapide doivent être structurés avec une liste <ul><li>.
- Le lien d’accès au contenu devrait toujours être le premier dans la liste.
Personnalisation
Le style de ce composant n’est pas personnalisable.
Besoin d'aide ?
L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :
- la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant ! - le centre de support pour envoyer vos demandes de correctifs et d'évolution.