Liens
Les liens se trouvent dans le contenu principal d’une page et peuvent mener vers des pages internes ou externes, ou encore ouvrir des documents.
Selon leur nature, ils sont suivis ou non d’une icône ou d’informations sur le document concerné. Le libellé d’un lien doit être compris hors de son contexte.
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Les liens se déclinent en plusieurs variantes selon la destination du lien :
- Lien interne : mène à une autre page du même site actuel.
- Lien externe : mène vers des contenus externes au site actuel.
- Lien vers un document : met de l’avant un document qui doit être repéré rapidement dans la page.
Quand l’utiliser
Les liens sont utilisés pour diriger l’utilisateur vers des pages ou des documents pertinents, en lien avec le contenu d’une page active.
Dans certains cas, les liens peuvent être utilisés pour naviguer au sein même d’une page comme dans un menu d’ancres.
Le lien vers un document peut être utilisé pour mettre de l’avant un ou des documents qui doivent être repérés rapidement dans la page. Il doit être utilisé avec modération et être lié à une tâche principale.
Quand ne pas l’utiliser
Les liens ne doivent pas être utilisés pour accomplir des actions telles que l’envoi d’un formulaire ou la connexion à un service en ligne. Dans ce cas, l’utilisation de boutons est privilégiée.
Anatomie
Lien interne
- Libellé du lien
Lien externe
- Libellé du lien
- Icône de lien externe
Lien vers un document
- Icône de document
- Libellé du lien
- Informations sur le type et le poids du document
- Précision sur le document
Contenus
Un lien doit être rédigé de façon à ce qu’il soit compris hors contexte. Consultez la section Libellé de la fiche Liens hypertextes pour en connaître les orientations.
Lien interne
Le libellé du lien interne doit être clair et directement lié à la page cible. Il doit informer l’utilisateur de ce qu’il trouvera sur cette page.
Lien externe
Le libellé du lien externe doit également être explicite, et l’ajout d’une icône indiquant qu’il s’agit d’un lien externe est recommandé pour informer l’utilisateur qu’il quitte le site.
Lien vers un document
Le libellé du lien doit inclure, entre parenthèses à la fin, le type et le poids du document à ouvrir. Exemple : Rapport du ABC (PDF, 1,2 Mo). Une précision sur le document peut être ajoutée sous le lien pour indiquer, par exemple, la version du document ou des détails sur son contenu.
Références
Des recherches approfondies ont été menées en s’appuyant sur les bonnes pratiques des experts en UX et UI :
Liens externes
Comment gérer les liens externes sur un site web (en anglais seulement)
Accessibilité des liens externes (en anglais seulement)
Ouverture des liens dans une nouvelle fenêtre ou un nouvel onglet
Nielsen Norman Group : Nouvelle fenêtre ou nouvel onglet ? (en anglais seulement)
Technique G200 du W3C pour l’accessibilité (en anglais seulement)
Lien : ouvrir dans un nouvel onglet ou même onglet ? (en anglais seulement)
Design des liens
Lignes directrices pour concevoir des liens pour les sites et les courriels (en anglais seulement)
Composants de lien du Web Design System américain (en anglais seulement)
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Lien externe
Positionnement et alignement : L’icône de sortie du site est située à droite du libellé.
Lien vers un document
Positionnement et alignement : Ce type de lien doit être isolé pour faciliter son repérage. Il ne doit pas se retrouver à l’intérieur d’un pavé de texte ni être utilisé dans une page dédiée à lister exclusivement des liens vers des documents. Dans les deux cas, le style de lien interne ou externe pourra alors être utilisé. S’il y a plusieurs liens subséquents, par exemple une liste de documents, chacun d’entre eux comporte une icône.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Ouverture dans le même onglet ou dans un nouvel onglet
Un lien s’ouvre habituellement dans le même onglet. Cependant, dans certaines situations, il est préférable de l’ouvrir dans un nouvel onglet :
- Lorsque cela facilite la réalisation d’une tâche. Par exemple, lors d’une demande en ligne, un lien externe peut s’ouvrir dans un nouvel onglet pour ne pas interrompre le processus en cours.
- Lorsque la page sert de point de départ pour accéder à d’autres pages, comme à partir d’un dossier client où l’on souhaite consulter plusieurs documents (factures, permis, etc.).
- Lorsque l’utilisateur doit comparer plusieurs pages, comme pour comparer les avantages de deux programmes d’aide similaires.
Lorsque le lien s’ouvre dans un nouvel onglet, il est accompagné du texte alternatif suivant : Cet hyperlien s’ouvrira dans une nouvelle fenêtre.
Lien visité
Lorsqu’un lien est cliqué, sa couleur change pour indiquer qu’il a déjà été visité.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris : clic pour suivre le lien.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Tabulation pour naviguer entre les liens.
- Entrée pour suivre un lien sélectionné.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 30 septembre 2024