Liens d'évitement - Skiplinks

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

Le composant est masqué par défaut. Il apparait en haut de page lorsqu’un de ses liens reçoit le focus (navigation clavier).
Une fois affichée, la zone de liens d’évitement permet de fournir plusieurs liens pour aider les utilisateurs à naviguer rapidement vers des fonctionnalités importantes :

  • Contenu

  • Menu

  • Recherche

  • Pied de page

  • etc


Le composant est composé de liens simples.

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <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>

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.

 

Responsive

 

 

 

Règles d’utilisation

Usages

  • L’intégration des liens d’évitement est une obligation pour l’ensemble des sites.

  • 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 :