Hyperliens Les hyperliens jouent un rôle essentiel dans le référencement de nos pages et de notre site Web. Dans cette page : Types d'hyperliens Il existe trois types d'hyperliens dans le site Web de Revenu Québec. Hyperlien dans le texte L'hyperlien dans le texte a généralement la même typographie et taille que le texte régulier. Afin de le différencier du texte courant, il est toutefois de couleur bleu contrasté. Au survol de la souris, l'hyperlien dans le texte change légèrement de couleur et devient surligné. Note Exemple Hyperlien qui mènera vers une autre section du site web Fin de la note Hyperlien externe L'hyperlien externe est caractérisé par une icône à droite du libellé visant à informer l'utilisateur que le lien sera ouvert dans un nouvel onglet. Les hyperliens doivent ouvrir un nouvel onglet lorsqu'ils mènent vers des sites externes; une page du site informationnel, lorsqu'on ne veut pas sortir l'utilisateur de son contexte de lecture, par exemple un questionnaire; des images faisant partie de la galerie d'images; des services en ligne; des documents avec des formats XSD et XML; une messagerie (Outlook, Hotmail, etc.) Note Exemple Hyperlien qui ouvrira dans un nouvel onglet Fin de la note Hyperlien définition L'hyperlien définition a la même typographie et taille que le texte régulier. Comme l'hyperlien dans le texte, il est de couleur bleu contrastante, mais est souligné d'une ligne pointillée. Au survol de la souris, un petit point d'interrogation et la phrase suivante apparaissent : Ce bouton ouvre une fenêtre modale contenant une définition. Note Exemple Hyperlien qui ouvrira une fenêtre modale Fin de la note Quand les utiliser Les hyperliens doivent être utilisés comme élément de navigation. Pour les actions d'un autre type, comme le téléchargement d'un formulaire, il faut utiliser le composant bouton d'action.Ils sont généralement utilisés pour naviguer à l'intérieur d'une même page (voir la composante ancres); naviguer d'une page à une autre dans notre site; naviguer vers un site Web externe; ouvrir une fenêtre modale (hyperlien définition). À éviterIl faut éviter la surabondance des mêmes hyperliens dans une même page pour faciliter la lisibilité de notre contenu. En général, nous ne mettons qu'un hyperlien menant au même endroit par page écran pour éviter trop de répétition.Fin de l'exemple États État actifL'hyperlien est prêt à être cliqué. C'est l'état que les utilisatrices et les utilisateurs voient le plus souvent sur une page.État actif de l'hyperlienÉtat au survolIl apparaît lorsque le curseur survole l'hyperlien, généralement la couleur de l'hyperlien change légèrement de nuance et le pointeur se transforme en main pour indiquer qu'une action est possible.État au survol de l'hyperlienÉtat au focusIl n'est affiché que lorsque l'utilisateur navigue au clavier. C'est un indicateur visuel qui permet à l'utilisatrice ou à l'utilisateur de savoir où il se situe dans la page par rapport aux éléments interactifs.État au focus de l'hyperlien Libellés Le libellé d'un hyperlien peut être différent du titre de la page, mais doit contenir des mots-clefs correspondant à ceux du titre de la page pour que les utilisateurs sachent qu'ils sont au bon endroit; doit, si on utilise un verbe, s'insérer seulement sur le titre de la page Web, comme dans cet exemple : « Consulter la page Taux d'imposition ».doit de préférence contenir des mots courts, ce qui procurera une navigation plus fluide et sans embûches aux utilisateurs, qui seront plus rapidement en mesure de savoir s'ils ont cliqué au bon endroit; doit de préférence contenir des mots courts, ce qui procurera une navigation plus fluide et sans embûches aux utilisateurs, qui seront plus rapidement en mesure de savoir s'ils ont cliqué au bon endroit; doit être appliqué uniquement sur le numéro entre parenthèses qui suit le nom d'un formulaire ou d'une publication.À éviterPour répondre aux standards d'accessibilité Web, il faut éviter de mettre des hyperliens sur des termes génériques qui ne veulent rien dire sortis de leur contexte (ex : Cliquez-ici ou Formulaire).Fin de l'exemple Accessibilité S'il s'agit d'un hyperlien externe, la phrase « Ce lien ouvrira un nouvel onglet » est intégrée en attribut ALT.L'hyperlien définition contient le rôle button dans le code pour aviser les utilisatrices et utilisateurs de lecteur d'écran que le comportement de l'hyperlien sera différent de celui d'un hyperlien régulier. Note Important La couleur de nos hyperliens n'est actuellement pas suffisamment constatée pour respecter les standards d'accessibilité de niveau AA. Nous rectifierons la situation dès que possible. Fin de la note Note À consulter aussi Mettre les liens contextuels ici Fin de la note