L’un des éléments fondamentaux de l’accessibilité web est la création de liens accessibles. Dans cet article, nous allons examiner la différence entre les liens et les boutons, identifier des exemples de liens inaccessibles et fournir des solutions concrètes pour les rendre accessibles, y compris des exemples de code précis.
Créer des liens accessibles
Alors, qu’est-ce qu’un lien hypertexte ?
Un lien hypertexte est lien qui combine une adresse Web, une URL et un élément cliquable, un mot ou une phrase, parfois une image
Nous nous concentrerons sur les liens textuels et sur leur accessibilité.
Liens non significatifs, inaccessibles
Les liens comme « Cliquez ici » ou « Lien » ou « ici » sèment la confusion pour plusieurs raisons :
- Dans ce cas précis le texte trop court est plus difficile a viser avec le curseur de la souris, ou le doigt.
- Un mot comme, « lien », « ici », ne fournissent pas suffisamment d’informations pour les utilisateurs. Est ce un lien vers une page interne du site, vers un autre site web, vers un fichier PDF, vers un formulaire.. ce n’est vraiment pas clair du tout.
Liens explicites, significatifs
Des liens intégrés directement dans les phrases de vos paragraphes sont plus pertinents, plus clairs et contextualises.
Plutôt que de simplement placer un lien à la fin d’un paragraphe ou d’utiliser des mots génériques tels que « cliquez ici », l’intégration de liens dans le flux naturel du texte offre de nombreux avantages.
Tout d’abord, l’intégration de liens dans les phrases permet de fournir immédiatement des informations supplémentaires sur le contenu du lien. En utilisant des mots ou des phrases descriptifs, les lecteurs peuvent comprendre le contexte et la destination du lien avant même de le cliquer. Cela rend la navigation plus intuitive et aide les utilisateurs à prendre des décisions éclairées sur les liens qu’ils souhaitent explorer.
Enfin, les liens intégrés offrent une meilleure accessibilité. Les lecteurs utilisant des technologies d’assistance, telles que les lecteurs d’écran, bénéficient d’une compréhension plus claire du contexte du lien lorsqu’il est intégré dans le texte. Cela permet également aux utilisateurs de naviguer plus efficacement en sautant directement vers les parties pertinentes du contenu via les liens intégrés.
Prenons un exemple concret :
Lien non explicite, non intégré dans le texte:
Si vous souhaitez en savoir plus sur les galaxies, je vous recommande de consulter cet article sur la classification des galaxies. Il détaille les différents types de galaxies, des spirales majestueuses aux elliptiques mystérieuses, en passant par les irrégulières intrigantes. Cliquer ici
Lien contextualise :
Si vous souhaitez en savoir plus sur les galaxies, je vous recommande de consulter cet article sur la classification des galaxies. Il détaille les différents types de galaxies, des spirales majestueuses aux elliptiques mystérieuses, en passant par les irrégulières intrigantes
NOTE : Un lien bien conçu est souvent autonome, son sujet est clair, explicite hors contexte.
Par exemple : La classification des galaxies.
Une autre solution possible, même si elle est peu élégante consiste a utiliser directement l’URL.
En exemple:
Consulter notre article concernant la classification des galaxies: https://domaine.fr/galaxies
Le lien peut être exposé si l’adresse Web, l’URL est courte et explicite.
Si votre URL est une longue chaîne complète et incompréhensible, choisissez d’intégrer votre lien dans votre texte.
Des liens de téléchargement
Lorsque vous fournissez un lien de téléchargement vers une ressource, lien de type PDF par exemple, il est essentiel d’inclure des informations supplémentaires pour guider les utilisateurs.
En plus d’intégrer le lien dans un contexte significatif, explicite, vous devez également indiquer :
- Le format du fichier donne des indications sur la manière dont les données peuvent être utilisées. Par exemple, il peut signaler si les informations sont en lecture seule ou si elles peuvent être modifiées selon les besoins de l’utilisateur.
- La taille du fichier est également un élément crucial à mentionner. C’est particulièrement important pour les personnes disposant d’une connexion Internet coûteuse, d’une connexion lente ou d’un espace de stockage local limité. En fournissant la taille du fichier, vous permettez aux utilisateurs de prendre une décision éclairée quant à la pertinence du téléchargement en fonction de leurs ressources disponibles.
Par exemple :
Télécharger les articles au format PDF
Des liens externes, vers un autre site internet
Il est utile d’informer vos utilisateurs qu’ils seront redirigés vers un site externe. Vous pouvez:
- ajouter une icône ou un symbole, tel qu’une flèche sortante, à côté du lien pour indiquer qu’il mène vers un site externe.
- Ou ajouter l’information dans l’intitulé du lien et dans la balise « title »
Prenons un exemple :
<a href= »https://www.example.com » target= »_blank » rel= »noopener noreferrer » title= »Visitez notre site Web externe – domaine-externe.com – Nouvelle fenetre »>Consulter le site externe – domainedecesitezxterne.com – Nouvelle fenetre</a>
Explications du code :
L’attribut title est ajouté à la balise <a> et fournit un texte descriptif pour indiquer la destination du lien. Dans cet exemple, le texte est « Visitez notre site Web externe – nomdomaine-externe.com – Nouvelle fenetre ».
L’attribut href spécifie l’URL de destination vers laquelle le lien doit rediriger les utilisateurs.
L’attribut target= »_blank » ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet du navigateur.
Rendre les liens accessibles
Les directives WCAG
Les Web Content Accessibility Guidelines (WCAG), la norme d’accessibilité numérique la plus célèbre au monde, incluent des recommandations sur les hyperliens, y compris certaines fonctionnalités non visuelles.
Les critères RGAA
Critère 6.1 : Chaque lien est explicite
Chaque lien texte vérifie-t-il une de ces conditions (hors cas particuliers) ?
- L’intitulé de lien seul permet d’en comprendre la fonction et la destination;
- L’intitulé de lien additionné au contexte du lien permet d’en comprendre la fonction et la destination.
Critère 6.2 : Dans chaque page web, chaque lien a-t-il un intitulé ?
Des liens accessibles
Souligner les liens
Selon les WCAG, il est crucial de ne pas se reposer uniquement sur la couleur pour différencier un lien du reste du texte, couleur qui ne pourrait être différencier par les personnes souffrants de troubles visuels comme le daltonisme.
Pour remédier à cela, la méthode la plus courante consiste à souligner les liens. Ils peuvent également être mis en évidence en utilisant une mise en caractères gras.
Les contrastes
Les directives WCAG définissent deux niveaux de conformité en termes de contraste :
Niveau AA : Ce niveau est couramment utilisé par de nombreux sites web qui ciblent un large public. Il exige un niveau de contraste moyen pour assurer une lisibilité adéquate des liens.
Niveau AAA : Ce niveau est plus strict et est généralement appliqué sur les sites gouvernementaux et par les communautés de personnes handicapées. Il exige un niveau de contraste élevé pour une accessibilité optimale des liens.
Par exemple, selon le niveau AA, il est recommandé de maintenir un rapport de contraste d’au moins 4,5:1 entre un lien et l’arrière-plan, pour une taille de police normale. Pour les liens avec un texte de grande taille, un rapport de contraste d’au moins 3:1 est requis.
Les lecteurs d’écran
Pour une bonne restitution sur les lecteurs d’écran et technologie d’assistance, Il est essentiel de veiller à ce que les liens restent clairs et compréhensibles. Sinon, les utilisateurs aveugles pourraient entendre des informations confuses ou peu utiles lors de la navigation, ce qui pourrait entraîner une expérience utilisateur frustrante.
En veillant à ce que les liens soient concis, descriptifs et facilement identifiables, vous facilitez la navigation et la compréhension pour les utilisateurs de lecteurs d’écran. Cela garantit une expérience web plus inclusive et accessible à tous les utilisateurs, indépendamment de leur capacité visuelle.
Les personnes ayant une vision normale peuvent généralement deviner que le lien « Lire la suite… » est associé au titre de l’article le plus proche, tandis que les personnes aveugles ont besoin d’une indication explicite. Heureusement, l’attribut aria-label est très utile dans cette situation. Il permet d’attacher un texte explicatif aux liens pour les utilisateurs de lecteurs d’écran.
En utilisant l’attribut aria-label, vous pouvez fournir une description précise du lien qui est lisible par les lecteurs d’écran. Par exemple, vous pouvez l’utiliser comme suit :
<a href= »# » aria-label= »Lire la suite sur les avantages d’une alimentation saine »>Lire la suite…</a>
Dans cet exemple, l’attribut aria-label ajoute un texte explicatif qui indique aux utilisateurs de lecteurs d’écran le contenu du lien. Cela permet aux personnes aveugles d’accéder à une information individualisée et de comprendre précisément ce que le lien propose.
L’objectif de cette technique est de décrire le but d’un lien en utilisant l’attribut aria-label …. Il permet de placer une étiquette de texte descriptif sur un objet, tel qu’un lien, lorsqu’il n’y a aucun élément visible sur la page qui décrit l’objet. ….. Dans certaines technologies d’assistance, la valeur de l’attribut aria-label s’affichera dans la liste des liens au lieu du texte du lien réel. Source w3c.org
Des liens identiques
La présence de liens identiques multiples est une pratique courante mais controversée.
Par exemple, sur une page web, cela peut se traduire par l’utilisation de la même URL pour un titre d’article, une image principale et une phrase d’introduction.
À première vue, cela peut sembler pratique, car les utilisateurs peuvent accéder à l’article en cliquant sur n’importe quel élément. Cependant, pour les utilisateurs aveugles, cela signifie entendre les mêmes informations répétées trois fois, ce qui rallonge le temps nécessaire pour parcourir le contenu et accéder à ce qui les intéresse réellement.
Pour améliorer l’accessibilité, il est préférable d’éviter les liens identiques multiples. Au lieu de cela, il est recommandé de fournir des descriptions uniques et pertinentes pour chaque lien, afin que les utilisateurs aveugles puissent rapidement comprendre la destination du lien sans avoir à écouter des informations répétées.
Par exemple, au lieu d’avoir trois liens avec la même URL, vous pourriez opter pour des descriptions distinctes :
<a href= »article.html »>Lire l’article complet</a> (pour le titre d’article)
<a href= »article.html »>Afficher l’image principale</a> (pour l’image principale)
<a href= »article.html »>En savoir plus dans l’introduction</a> (pour la phrase d’introduction)
De cette manière, les utilisateurs aveugles peuvent rapidement identifier et sélectionner le lien qui correspond à leur intérêt spécifique, sans avoir à écouter les mêmes informations plusieurs fois. Cela améliore l’efficacité de leur navigation et contribue à une expérience web plus accessible pour tous les utilisateurs.
En résumé
- Les liens doivent inclure un texte significatif, afin que les utilisateurs comprennent la destination du lien
- Ils doivent pouvoir être compris hors contexte puisque certains lecteurs d’écran, comme JAWS, permettent aux utilisateurs de lire uniquement les liens
- Évitez les intitules « cliquez ici » ou « en savoir plus » car ces mots ne sont pas descriptifs.
- Les liens doivent être soulignés et apparaître plus foncés que le texte principal. Cela permet aux utilisateurs daltoniens de les trouver plus facilement.
- Ne soulignez pas le texte s’il ne s’agit pas d’un lien car les utilisateurs malvoyants ou daltoniens peuvent avoir des difficultés à distinguer ce texte du texte lié.
Ressources
« Utilisation aria-label à des fins de lien », Directives pour l’accessibilité du contenu Web (WCAG)
« Comment rendre les liens « Lire la suite » accessibles », Vision Australie