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.
Nouveauté v1.13 : Storybook
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.
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.