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 lie 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 - 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

  • icône seule

Si une icône est présente, son choix et son emplacement doit rendre l’action à venir ou la destination plus explicite.
L’icône seule n'est à utiliser que très rarement.

 

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é. (À venir)

 

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