Système de Design de l’État

Liens - Links

Le lien permet la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe.
Pour les actions d’un autre type, comme la soumission d’un formulaire, il faut utiliser le composant boutons .

 

Structure

un lien est composé des élements suivant:

  • un libellé - obligatoire.

  • une icône, placée à droite ou à gauche du texte visible ou seule - optionnelle.

Lien au fil du texte

Ce lien se trouve au sein d’un texte et reprend les caractéristiques typographiques de celui-ci (font, couleur, taille) tout en étant souligné. Il peut être suivi d’une icône (par exemple : lien externe).

1 2 <p>Lorem [...] elit, <a href="#" target="_self">lien interne</a> incididunt [...] morbi.</p>

 

Lien externe

Le lien ‘externe’ doit être utilisé pour les liens pointant vers un autre site et ouvrant un nouvel onglet/une nouvelle page (via l’attribut target=”blank”). Cela est matérialisé par une icône à droite du lien ainsi que par l’attribut title du lien mentionnant qu’il s’agit d’un lien externe et que l’on ouvre une nouvelle fenêtre.

À noter : l'attribut target="_blank" permettant l’ouverture d’une nouvelle fenêtre doit être accompagné d'un attribut rel="noopener" (et "noreferrer" sur les vieux navigateurs), en particulier si le lien pointe sur un site externe, afin d'éviter toute possibilité d’exécution de code malveillant (l’article de référence (en anglais) : https://mathiasbynens.github.io/rel-noopener/)

 

1 2 <p>Lorem [...] elit, <a title="intitulé lien externe - ouvre une nouvelle fenêtre" href="#" target="_blank" rel="noopener">intitulé lien externe</a> incididunt [...] morbi.</p>

Lien simple

Le lien simple en dehors du contenu peut se présenter :

  • avec une icône à droite

  • avec une icône à gauche

  • texte seul

Si une icône est présente, son choix et son emplacement doit rendre l’action à venir ou la destination plus explicite.

1 <a class="fr-link" href="#">lien simple</a>

 

1 <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right" href="#">lien simple avec icône à droite</a>

 

1 <a class="fr-link fr-fi-arrow-right-line fr-link--icon-left" href="#">lien simple avec icône à gauche</a>

Lien de téléchargement

Le lien de téléchargement doit indiquer dans son libellé le titre du ficher, le poids et le type de fichier téléchargé. Voir le composant Téléchargement de fichiers.

Lien de retour en haut de page

Dans les pages de contenu longues, il est possible de proposer un bouton de retour en haut de page à la fin du contenu.

Le retour en haut de page est constitué des éléments suivants :

  • Icône flèche vers le haut - obligatoire.

  • Libellé “Haut de page” - obligatoire.

Le lien de retour en haut de page se place à la fin du contenu de la page, avant le pied de page (footer). Il se place par défaut à gauche, aligné avec le contenu, mais peut-être centré ou aligné à droite.

Si il y a des bloc de poursuite de lecture (liens vers d’autres articles), il est conseillé de placer le retour en haut de page avant ces blocs.


Pour les développeur

Le lien de “retour en haut de page” est une ancre vers un élément dont l’id est "top".
Afin de le faire fonctionner correctement, il est nécessaire d’ajouter l’attribut id (id="top") sur l’élement le plus haut de la page comme le body (<body id="top" ...>) ou les liens d’évitement (<div class="fr-skiplinks" id="top">), afin que le focus de navigation soit lui aussi replacé en haut de page.

Le lien haut de page est un lien classique fr-link composé de l'icone arrow-up-fill, alignée à gauche, et du label "Haut de page".

1 2 3 4 5 6 7 8 9 10 <!-- placer l'attribut id sur l'élément le plus de la page <body id="top"> ou <div class="skiplink" id="top"> <!--lien à placer en dessous du contenu --> <a class="fr-link fr-fi-arrow-up-fill fr-link--icon-left" href="#top"> Haut de page </a>

Le lien peut être aligné sur la gauche ou la droite du contenu.
Actuce: Pour aligner le lien à droite, l'insérer dans une <div class="fr-grid-row fr-grid-row--right">.

Usages

Il est conseillé d’utiliser le retour en haut de page quand :

  • le contenu est “long”

  • l’en-tête (header) n’est plus visible au scroll (il n’est pas sticky).

Tailles

Les liens sont disponibles en 3 tailles :

  • La taille MD est la taille de lien par défaut

  • La taille SM et LG permet d’adapter la taille de votre lien à votre besoin

 

1 2 3 4 5 <!-- Lien taille SM --> <a class="fr-link fr-link--sm" href="#">Label lien SM</a> <!-- Lien taille LG --> <a class="fr-link fr-link--lg" href="#">Label lien LG</a>

 

Règles d’utilisation

Usage

Le lien doit être utilisé comme élément de navigation. Pour les actions d’un autre type, il faut utiliser le composant boutons du Design System.

Le lien simple, ne doit pas être utilisé au sein d’un paragraphe. Pour faire un lien dans un paragraphe utilisez les liens contextuels.

Accessibilité

  • Un lien doit toujours avoir un intitulé texte entre les balises <a> et </a>

L’utilisateur doit pouvoir :

  • naviguer au clavier grâce à la tabulation entre les différents liens et actions.

  • valider l’action en cliquant sur “entrée”.

  • identifier visuellement les liens par rapport au texte qui l’entoure (pas seulement avec la couleur). Dans un texte, un lien est *souligné*.

  • le libellé du lien doit être explicite, c’est à dire exprimer clairement ce qui va se passer pour l’utilisateur.

  • l’intitulé doit permettre de comprendre la destination ou la fonction du lien (ex: ‘faire ma demande de carte grise’, ‘Télécharger le rapport du CNN (format pdf - 345Ko)’).

  • de préférence utiliser un libellé court et direct, notamment lors de son usage hors du contenu (pour un lien simple hors contenu : 3 mots maximum).

  • éviter les intitulés de liens non explicites. Les termes trop génériques, comme “Cliquez ici”, “En savoir plus”, “Lire la suite”, etc, ne permettent pas à l’utilisateur d’identifier la destination ou la fonction du lien.
    Si vraiment aucune alternative n’est possible , il est possible d’ajouter un attribut title ajoutant des éléments de compréhension à l’intitulé non explicite : <a href=”…” title=”Lire la suite : comment faire ma demande de carte grise”>

  • Un lien peut être rendu explicite grâce à son contexte (RGAA 4 : contexte du lien)

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels et les icônes peuvent être changées - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :

 

 

 

Service d'Information du Gouvernement - 2021