Liens

Conseils

Les liens hypertextes doivent toujours être soulignés, car la couleur seule n’est pas un indice visuel suffisant pour permettre aux utilisateurs de les repérer. Les liens dans les zones de navigation et les pieds de page font cependant exception à la règle. Ils n’ont pas besoin d’être soulignés puisque leur emplacement indique leur fonction.

Référence : Critère de succès 1.4.1 – Utilisation des couleurs, WCAG 2.2 (en anglais)

Style de lien

Les liens intralignes héritent du style du texte dans lequel ils sont insérés. Nous ajoutons cependant un soulignement et augmentons légèrement le poids de la police pour en faciliter le repérage dans le paragraphe. Attention à ne jamais souligner d’autre texte que les liens.

<h3><a href="#">Lien dans un titre</a></h3>
<p>Lorem ipsum dolor, <a href="#">lien dans un paragraphe</a>.</p>

Comment rédiger un libellé de lien pertinent

La meilleure façon de vérifier si le texte d’un lien décrit correctement sa destination consiste à supprimer tout le texte de la page et à ne lire que le libellé du lien. L’utilisateur a-t-il toujours une bonne idée du contenu vers lequel il sera redirigé?

Un libellé de lien pertinent :

• décrit le contenu vers lequel mène le lien;
• n’utilise jamais de formulations comme « Cliquez ici » ou « En savoir plus »;
• n’inclut jamais la ponctuation s’il se trouve à la fin d’une phrase ou devant une virgule.

Référence : Critère de succès 2.4.4 – Fonction du lien, WCAG 2.2 (en anglais)

Liens et boutons

Il existe une différence sémantique entre les liens <a> et les boutons <button>. En règle générale, si l’élément dirige l’utilisateur vers une autre page, il faut utiliser un lien. S’il exécute une action (comme l’envoi de données), il faut utiliser un bouton. Vous pouvez cependant appliquer le style d’un bouton <button> à un lien <a> dans certains cas :

• Lorsqu’il s’agit du principal appel à l’action de la page (un lien pour s’inscrire, par exemple).
• Lorsque le lien mène à un service ou à une application en ligne.

Dans de tels cas, appliquez les classes du composant bouton au lien pour en définir le style.

Liens vers des fichiers

Mentionnez le type et la taille du fichier dans le libellé du lien. Cela permettra aux utilisateurs de comprendre le type de fichier qu’ils téléchargent et la quantité de données qu’ils utiliseront, ce qui est particulièrement important pour les utilisateurs d’appareils mobiles aux plans de données limités.

<a href="#">Nom du document (PDF 1.5 Mo)</a>

Liens vers des sites Web externes

Lorsque vous insérez des liens vers des sites Web externes, utilisez une icône de lien externe pour indiquer clairement à l’utilisateur qu’il quittera le site Web ou l’application. Cela permet d’éviter toute confusion. Insérez l’icône à la suite du libellé du lien en utilisant la classe .external-link. Assurez-vous que le libellé du lien en décrit précisément la destination. Les utilisateurs disposeront ainsi du contexte nécessaire pour décider s’ils souhaitent ou non quitter le site Web sur lequel ils se trouvent.

<p>Pour de plus amples renseignements, visitez <a class="external-link" href="#">myhealth.gnb.ca</a>.</p>

Liens ouvrant une nouvelle fenêtre

Conformément aux meilleures pratiques en conception d’expérience utilisateur, les liens insérés dans le contenu devraient toujours s’ouvrir dans la même fenêtre pour ne pas désorienter l’utilisateur. Toutefois, il est possible d’ouvrir un lien dans une nouvelle fenêtre lorsque l’utilisateur risque de perdre des données s’il quitte la page actuelle, à condition que le libellé du lien indique clairement cette action à l’utilisateur. Notez que l’omission de l’attribut target permet à l’utilisateur de décider s’il veut ouvrir la page dans une nouvelle fenêtre ou non.

Référence : Technique H83, WCAG 2.2 (en anglais)

<a href="#">Obtenir de l'aide (ouvre une nouvelle fenêtre)</a>

Ancres

Les ancres sont des outils de navigation qui mènent vers des sections à l’intérieur d’une même page. Il s’agit d’un élément de navigation de page dans la page. Elles doivent être utilisées avec modération, car l’ajout d’un trop grand nombre d’ancres sur une page peut désorienter l’utilisateur.

Nous recommandons d’utiliser des identifiants d’ancres numériques pour réduire le risque d’erreur lors de la traduction du contenu.

<!-- Lien d'ancre -->
<a href="#1">Vue d'ensemble</a>
<!-- ID d'ancre appliqué à un titre de section -->
<h2 id="1">Vue d'ensemble</h2>

Liens vers les adresses courriel

Vous pouvez transformer une adresse courriel en un lien actif. Lors de la création du lien, faites attention à ne pas y inclure l’étiquette « Courriel : » ni la ponctuation qui ne fait pas partie de l’adresse courriel.

Les adresses courriel de base doivent être écrites en minuscules. Les majuscules initiales peuvent être utilisées dans les adresses courriel plus complexes (ProgramName-NomDuProgramme@gnb.ca) pour faciliter la compréhension.

<a href="mailto:program@gnb.ca">program@gnb.ca</a>

Liens vers les numéros de téléphone

Vous pouvez transformer un numéro de téléphone en un lien actif. Les utilisateurs peuvent ainsi appeler directement le numéro, sans avoir à le sélectionner, à le copier, puis à le coller. Lorsque vous créez un lien vers un numéro d’appareil téléscripteur (ATS), assurez-vous d’inclure la mention (ATS) dans le libellé du lien pour que l’utilisateur comprenne clairement que le numéro correspond à un ATS.

<a href="tel:506-455-1088">506-455-1088</a>