Hyperlien

Dernière mise à jour : 21 juillet 2025

L’hyperlien est un élément interactif sous forme de texte souligné permettant à l'utilisateur de naviguer vers un autre contenu ou un autre site.

Utilisation

L’hyperlien peut être isolé ou faire partie du corps d’un texte. Si on l'utilise de manière isolée, il servira pour des interactions non prioritaires ou des téléchargements. Dans un corps de texte, sa nature est davantage référentielle.

Variants possibles

Il existe trois variants pour l'hyperlien :

1. Hyperlien standard

Cet hyperlien permet de naviguer entre les contenus.

Image repr/senatant un hyperlien standard visuellement

2. Hyperlien ouvrant un nouvel onglet

Cet hyperlien est accompagné d'une icône, représentée par un encadré et une flèche, indiquant l'ouverture d'un nouvel onglet. Les règles d'utilisation du lien ouvrant un nouvel onglet sont abordées plus bas dans cette page.

Image représentant visuellement un hyperlien ouvrant un nouvel onglet

Hyperlien de téléchargement

Cet hyperlien permet de télécharger un fichier.

Image repésentant un hyperlien de téléchargement

Lien ouvrant un nouvel onglet

  • Ce lien est toujours représenté par l'icône de nouvel onglet (encadré et flèche).
  • Cette icône ne doit jamais être juxtaposée à une autre icône.
  • Puisque l'ouverture d'un nouvel onglet est déroutante pour l'utilisateur, on y a donc recours seulement si cela est nécessaire et on se limite aux cas identifiés dans la section qui suit.

Quels liens de destination s'ouvrent dans un nouvel onglet ?

  • Hilo et filiales (exemples : EVLO, Cléo)

  • Bang the table, LS CODA, SimplyBook.me et autres sites, réseaux sociaux ou plateformes externes

  • Initiatives ponctuelles (exemple : Énergie en commun)

  • Site informationnel d'Hydro-Québec, si on y accède à partir de l'Espace client ou d'un formulaire

  • PDF*, s'il est ouvert à partir de l'espace connecté (Espace client) ou d'un formulaire

  • PDF*, s'il est ouvert à partir du site informationnel d'Hydro-Québec

  • Espace client, si on y accède à partir du site informationnel d'Hydro-Québec

  • Site spécialisé (exemples : maîtres électriciens, enseignants)

  • Sous-domaine du site d'Hydro-Québec (exemple : emploi.hydroquebec.com)

* L'extension et le poids du fichier doivent toujours être indiqués entre crochets, par exemple [PDF XXX ko]

Quand envisager autre chose

  • Pour tout appel à l'action, on privilégiera l'utilisation du bouton texte, plutôt que l’hyperlien qui est plutôt de nature référentielle.
  • Sur une tuile, on choisira le bouton fléché.

Rédaction UX

En tant qu’élément interactif, l’hyperlien doit décrire avec précision sa destination et non utiliser une formulation générique telle que « Plus de détails ». Son libellé doit être concis et significatif. Il doit reprendre des termes-clés de sa destination permettant ainsi d'établir un lien évident entre celle-ci et l'hyperlien.

Les articles, les déterminants, les pronoms, les adjectifs et les adverbes sont à éviter ou à doser avec parcimonie, sauf si leur utilisation apporte une valeur communicationnelle évidente.

Verbe à l’infinitif

  • Lorsque le libellé contient un verbe, utiliser toujours l’infinitif. Si un pronom est nécessaire, employer la première personne (exemple : « Me connecter »).

Libellé de l'hyperlien

  • Pas de nombre limite de caractères, mais le libellé doit demeurer concis. Idéalement, on vise un maximum de quatre à cinq mots.

    Rappel : il reprend des termes-clés de sa destination.

Anatomie

Image représentant l'anatomie de l'hyperlien

Couleurs et styles

Le bouton-texte à l’état interactif « Défaut » peut utiliser deux couleurs :

Image représentant visuellement l'hyperlien sur un fond blanc
Bleu d’interactivité, sur un fond blanc ou pâle
Image représentant visuellement l'hyperlien sur un fond bleu
Blanc, sur un fond foncé

Taille

S'il se trouve dans un corps de texte, l'hyperlien sera de la même taille que celui-ci.

Taille normale

Image représentant la taille normal de l'hyperlien

Tailles dynamiques

Image représentant la taille dynamique de l'hyperlien

États interactifs

Voici les états interactifs prévus pour l'hyperlien :

Défaut

image représentant un de état de l'hyperlien

Survol

image représentant un état de l'hyperlien

Clic

image représentant un état de l'hyperlien

Désactivé

image représentant un état de l'hyperlien

Focus

image représentant un état de l'hyperlien