Liens

Le lien doit servir de moyen de navigation. Pour tout autre type d'action, le composant bouton du système de design doit être utilisé. Il est essentiel qu'un lien contienne toujours un titre textuel à l'intérieur des balises <a>.

Mots-clés

• Lien : Une connexion cliquable vers une autre page web ou ressource.

Détail des composants d'un lien

Liens textuels

• Le titre visuel d'un lien doit être suffisamment explicite pour permettre aux utilisateurs de comprendre sa destination simplement en le lisant. Évitez les titres vagues comme "cliquez ici" ou "voir plus", car ils ne précisent pas clairement la destination du lien. Optez plutôt pour des titres plus informatifs, comme "cliquez ici pour voir notre galerie" ou simplement "voir notre galerie".
• Les liens textuels doivent être facilement distinguables, les différencier uniquement par la couleur n'est pas suffisant pour l'accessibilité. Pour améliorer l'identification des liens, il est recommandé d'incorporer des indices visuels supplémentaires, tels que le soulignement ou le gras. Cette stratégie est particulièrement bénéfique pour les utilisateurs ayant des déficiences visuelles, car elle facilite la reconnaissance des liens dans un texte.

La solution la plus accessible pour les liens est d'encapsuler toutes les informations nécessaires directement dans la balise de lien elle-même.

Liens externes

Les liens qui s'ouvrent dans un nouvel onglet ou une nouvelle fenêtre doivent être explicitement indiqués. Cela peut être fait de plusieurs manières :

• La première option consiste à inclure un titre entièrement visible qui indique explicitement que le lien s'ouvre dans une nouvelle fenêtre. Cette solution est la plus avantageuse, car elle est bénéfique à tous les utilisateurs.
• Une autre approche consiste à incorporer une icône au sein du lien qui signifie visuellement l'ouverture d'une nouvelle fenêtre. Cette icône doit avoir un texte alternatif pour transmettre la même information aux utilisateurs de lecteurs d'écran.
• La troisième option peut être réalisée en utilisant l'attribut aria-label pour décrire l'action, comme l'ouverture dans une nouvelle fenêtre.

Cette pratique informe les utilisateurs à l'avance que le lien s'ouvrira dans un nouvel onglet, évitant ainsi des changements de contextes inattendus.

Liens de téléchargement

Les liens de téléchargement doivent fournir des informations détaillées sur le fichier à télécharger, comme son nom, son poids et son type de format. Ces détails aident les utilisateurs à comprendre ce qu'ils vont télécharger. Ils peuvent ainsi évaluer la pertinence du fichier à télécharger par rapport à leurs besoins.
Les bonnes pratiques sont les mêmes que pour les liens textuels et externes — titre visible, icône avec texte alternatif et aria-label

• Le titre visible doit contenir le nom du fichier, son poids, sa langue (si différente de celle du site) et son format. Cette approche complète est la meilleure solution car elle est bénéfique à tous les utilisateurs.
• Le texte alternatif de l'icône de téléchargement peut inclure toutes les informations contenues dans la version n°1 avec titre visible. Cela garantit que les lecteurs d'écran vocalisent les détails nécessaires lors de la lecture du lien.
• L'attribut aria-label peut être utilisé pour fournir toutes les informations nécessaires aux lecteurs d'écran. Cet attribut contient tous les détails pertinents sur le lien.

Titres de liens génériques (comme "En savoir plus", "Voir plus", "Lire la suite")

• Il est recommandé d'éviter les titres vagues ou non spécifiques pour les liens. Des titres comme "Cliquez ici", "En savoir plus" ou "Lire la suite" ne fournissent pas d'informations claires sur la destination ou la fonction du lien.
• Lorsqu'un titre descriptif ne peut pas être fourni, l'attribut aria-label doit être utilisé pour fournir un contexte supplémentaire. La valeur de cet attribut doit inclure la portion visible du texte pour une compréhension plus claire.

Liens uniquement avec icône

• Pour les liens représentés uniquement par des icônes, il est essentiel de garantir l'accessibilité. Les icônes doivent être étiquetées avec aria-hidden="true" pour être ignorées par les lecteurs d'écran, et une étiquette descriptive doit être ajoutée pour plus de clarté.
• Le titre du lien est fourni via l'attribut aria-label. Son contenu doit être précis et décrire de manière exacte la destination ou la fonction du lien.
• Cette approche aide les utilisateurs dépendant des lecteurs d'écran à comprendre la fonction de l'icône.

Liens d'image

• Lors de l'utilisation d'une image comme lien, il est essentiel d'inclure un texte alternatif (alt) qui décrit la destination et la fonction du lien.
• La valeur de l'attribut alt doit indiquer l'action qui sera effectuée en cliquant sur le lien. Cela permet d'aider les utilisateurs n'ayant pas la possibilité de voir l'image à comprendre l'information qu'elle véhicule.

Liens personnalisés (Incorporation des attributs ARIA pour des fonctions spécifiques de lien)

• Des liens non génériques peuvent être créés en utilisant différentes balises HTML en combinaison avec des attributs WAI-ARIA. Cette approche garantit que les balises HTML utilisées apparaissent et fonctionne comme un lien, à la fois visuellement et pour les technologies d'assistance.
• L'attribut role="link" est essentiel dans ces cas-là, modifiant la fonction de l'élément en tant que lien.
• L'attribut tabindex="0" est inclus sur la balise pour être atteignable à la navigation au clavier.Malgré l'efficacité de cette méthode, il est généralement recommandé d'utiliser la balise <a> pour la création de liens. Cette recommandation découle des problèmes potentiels de prise en charge des attributs ARIA par les navigateurs.