WCAG 2.4.9 : Objectif du lien (lien seul)

Ce que signifie cette règle

\n

WCAG 2.4.9 — Objectif du lien (lien seul) est un critère de succès de niveau AAA dans WCAG 2.1 et 2.2. Il exige que l’objectif de chaque lien puisse être déterminé à partir du seul texte du lien. Contrairement à son équivalent de niveau AA, WCAG 2.4.4 (Objectif du lien — dans le contexte), qui permet de déduire l’objectif du lien à partir du contexte environnant comme un titre, un paragraphe ou une cellule de tableau, 2.4.9 est nettement plus strict : le texte du lien lui-même doit être entièrement auto-descriptif, sans aucune dépendance au contenu environnant.

\n

Le critère s’applique à tous les hyperliens créés avec l’élément <a>, ainsi qu’à tout élément interactif qui possède un nom accessible et se comporte comme un lien. Cela inclut les liens image (où l’attribut alt de l’image ou un aria-label fournit le nom accessible), les liens stylisés comme des boutons et les liens basés sur SVG. Le nom accessible du lien — calculé à partir de son texte visible, de aria-label, de aria-labelledby ou du texte alternatif de l’image — doit, à lui seul, communiquer vers où mène le lien ou ce qu’il fait.

\n

Ce qui est considéré comme conforme : Un lien satisfait 2.4.9 lorsqu’un utilisateur qui lit uniquement le texte du lien — et rien d’autre sur la page — peut comprendre avec confiance la destination ou la fonction du lien. Par exemple, un lien indiquant « Télécharger le Rapport Annuel d’Accessibilité 2024 (PDF, 2.4 MB) » est conforme parce que toutes les informations pertinentes sont contenues dans le texte du lien lui-même. Un lien indiquant « Lire l’article complet : Comment rédiger un texte de lien accessible » est également conforme. Un lien image avec alt='View pricing plans' est conforme parce que le texte alternatif est entièrement descriptif.

\n

Ce qui est considéré comme non conforme : Les liens dont le texte est « click here », « read more », « learn more », « this », « here » ou toute autre expression qui n’a de sens qu’en contexte ne satisfont pas ce critère. De même, un lien englobant une image dont l’attribut alt est vide ou absent, laissant le lien sans nom accessible, est non conforme. Les liens qui utilisent aria-label ou aria-labelledby mais dont le nom accessible calculé reste vague sont également non conformes.

\n

Exceptions officielles : WCAG mentionne explicitement une exception — lorsque l’objectif du lien est intentionnellement ambigu pour tous les utilisateurs, et pas seulement pour les personnes handicapées. Par exemple, un lien d’accroche dans un jeu de mystère qui indique « Proceed » (où l’ambiguïté fait partie du design intentionnel) ne serait pas considéré comme un échec, à condition que l’ambiguïté s’applique universellement. Cette exception est étroite et ne doit pas être utilisée comme échappatoire pour justifier de mauvaises pratiques de texte de lien.

\n\n

Pourquoi c’est important

\n

Un texte de lien significatif est l’une des améliorations d’accessibilité les plus impactantes qu’un site web puisse apporter. Les populations les plus directement affectées par un texte de lien vague sont les utilisateurs de lecteurs d’écran, les personnes qui naviguent au clavier, les personnes ayant des handicaps cognitifs et les utilisateurs de logiciels de contrôle vocal.

\n

Les utilisateurs de lecteurs d’écran — généralement des personnes aveugles ou ayant une basse vision sévère — naviguent fréquemment dans une page en affichant une liste de tous les liens. Des lecteurs d’écran populaires comme NVDA, JAWS et VoiceOver offrent tous cette fonctionnalité, qui extrait le nom accessible de chaque lien et les présente sous forme de liste autonome. Lorsque les liens indiquent « click here », « read more » ou « details », cette liste devient une série d’entrées identiques et dénuées de sens. L’utilisateur n’a aucun moyen de déterminer quel lien activer sans lire le contenu environnant pour chacun — une tâche lente, frustrante et souvent impossible, en particulier sur les pages comportant des dizaines de liens.

\n

Selon l’Organisation mondiale de la Santé, environ 2.2 milliards de personnes dans le monde présentent une forme de déficience visuelle, dont au moins 1 milliard ont une affection qui aurait pu être évitée ou n’a pas encore été prise en charge. Même parmi les utilisateurs sans handicap visuel, les personnes ayant des limitations motrices qui s’appuient sur un accès par contacteur ou sur la navigation vocale (en utilisant des outils comme Dragon NaturallySpeaking) bénéficient énormément d’un texte de lien descriptif, car elles peuvent activer un lien directement en prononçant ou en sélectionnant son nom. Les groupes de personnes ayant des handicaps cognitifs — y compris les utilisateurs ayant des troubles de l’attention, des troubles de la mémoire ou des difficultés de lecture — en bénéficient également, car des libellés de lien clairs réduisent la charge cognitive et le besoin de relire le contexte.

\n

Considérons un scénario réel : un citoyen turc visitant le site web d’un hôpital public pour prendre rendez-vous. La page comporte trois boutons de service, chacun contenant l’expression « Randevu Al » (Prendre rendez-vous) sans autre contexte dans le texte du lien. Un utilisateur aveugle qui ouvre la liste des liens de son lecteur d’écran voit « Randevu Al », « Randevu Al » et « Randevu Al » — trois options indiscernables. Il ne peut pas déterminer quel lien correspond à la cardiologie, lequel à la médecine générale et lequel à la radiologie sans revenir au contexte. Respecter WCAG 2.4.9 exigerait que chaque lien indique « Randevu Al — Kardiyoloji », « Randevu Al — Genel Pratisyen » et « Randevu Al — Radyoloji », rendant l’objectif sans ambiguïté à partir du seul texte du lien.

\n

Au-delà de l’accessibilité, un texte de lien descriptif a une valeur SEO significative. Les robots d’indexation des moteurs de recherche pondèrent le texte d’ancre lors de l’indexation des pages, et des liens descriptifs améliorent les signaux de pertinence pour la page source comme pour la page de destination. Remplacer un texte d’ancre générique par des expressions significatives améliore la découvrabilité et réduit les taux de rebond, au bénéfice de tous les utilisateurs.

\n\n

Règles Axe-core associées

\n

WCAG 2.4.9 nécessite des tests manuels, car les outils automatisés ne peuvent pas déterminer le sens ou l’intention — ils peuvent signaler l’absence de nom accessible, mais ils ne peuvent pas juger si un nom accessible donné est suffisamment descriptif.

\n

\n
• Test manuel requis — link-name (règle axe) : La règle link-name d’axe-core détecte les liens qui n’ont aucun nom accessible (par exemple, un élément <a> sans contenu textuel, sans aria-label, sans aria-labelledby et sans image avec un attribut alt non vide). Bien que cette règle détecte les liens complètement vides, elle ne peut pas évaluer si le nom accessible existant est significatif. Un lien indiquant « here » passera la règle automatisée link-name parce qu’il possède techniquement un nom accessible — mais il échoue à WCAG 2.4.9 parce que ce nom n’est pas auto-descriptif. C’est précisément pour cette raison que 2.4.9 est signalé comme nécessitant un examen manuel : une personne doit lire chaque libellé de lien et juger s’il communique l’objectif de manière isolée.
\n
• Test manuel requis — identical-links-same-purpose : Axe-core inclut une règle qui signale les ensembles de liens ayant des noms accessibles identiques mais des destinations différentes. Il s’agit d’une heuristique qui met en évidence des violations potentielles de 2.4.9 — par exemple, plusieurs liens « Read More » pointant vers des articles différents. Cependant, même cette règle nécessite une confirmation humaine, car des noms identiques pointant vers la même destination ne constituent pas une violation. La règle remonte des candidats à examiner, pas des échecs définitifs.
\n
• Pourquoi l’automatisation est insuffisante : La compréhension du langage naturel est nécessaire pour évaluer l’objectif d’un lien. Un outil automatisé peut calculer que le nom accessible d’un lien est la chaîne « details » mais ne peut pas savoir que cette chaîne ne décrit pas une destination. De même, un outil ne peut pas évaluer si « View » est adéquat (peut-être que oui, dans une interface très spécifique et étroitement définie) ou si « View the Q3 Financial Statement » est préférable. Le jugement humain, idéalement combiné à des tests avec lecteur d’écran, est la seule méthode fiable.
\n

\n\n

Comment tester

\n

\n
1. Analyse automatisée de base : Exécutez axe DevTools (extension de navigateur) ou Lighthouse sur la page cible. Dans axe DevTools, recherchez toute violation de la règle link-name — il s’agit de liens sans aucun nom accessible et ce sont des échecs garantis de 2.4.9. Exportez les résultats et notez tous les liens signalés. Cette étape ne complète pas votre audit 2.4.9 ; elle identifie seulement les échecs les plus évidents.
\n
2. Générer une liste de liens avec un lecteur d’écran : Ouvrez la page dans Firefox avec NVDA installé. Appuyez sur Insert + F7 (raccourci de la liste des éléments de NVDA) et sélectionnez « Links » dans la boîte de dialogue. Passez en revue la liste complète des libellés de liens. Demandez-vous : un utilisateur lisant uniquement cette liste pourrait-il comprendre la destination ou la fonction de chaque lien ? Répétez ce test dans JAWS en appuyant sur Insert + F7 pour ouvrir la boîte de dialogue Links List, et dans VoiceOver sur Safari (macOS) en appuyant sur VO + U pour ouvrir le Rotor et en naviguant jusqu’aux liens. Signalez tout lien dont le libellé est ambigu, dupliqué avec une destination différente ou composé entièrement d’une chaîne d’URL.
\n
3. Audit de tabulation au clavier : Naviguez dans la page en utilisant uniquement la touche Tab. Chaque fois que le focus se place sur un lien, lisez uniquement le texte visible de l’élément focalisé (ou écoutez l’annonce du lecteur d’écran). Sans regarder le contenu environnant, décidez si l’objectif du lien est clair. Documentez chaque lien dont l’objectif n’est pas clair à partir du seul texte du lien.
\n
4. Vérification des liens image : Identifiez tous les liens qui ne contiennent qu’une image (aucun texte visible). Inspectez chacun d’eux avec les outils de développement du navigateur pour vérifier que l’image possède un attribut alt non vide et descriptif, ou que le lien possède un aria-label descriptif. Le calcul du nom accessible doit aboutir à une expression significative.
\n
5. Vérification des textes de lien dupliqués : Recherchez dans le HTML de la page plusieurs occurrences du même texte de lien (par exemple, plusieurs ancres « Read More » ou « Buy Now »). Vérifiez si ces liens pointent vers la même destination (acceptable) ou vers des destinations différentes (un échec de 2.4.9, sauf s’ils sont désambiguïsés via aria-label ou aria-labelledby).
\n
6. Test de contrôle vocal : En utilisant Dragon NaturallySpeaking ou Windows Voice Access, tentez d’activer les liens en prononçant leur libellé visible. Si le libellé prononcé est ambigu et que plusieurs candidats apparaissent (par exemple, prononcer « Click Read More » met en évidence plusieurs liens), cela confirme un échec de l’ergonomie en conditions réelles, en lien avec 2.4.9.
\n

\n\n

Comment corriger

\n

Texte de lien générique « Read More » — Incorrect

\n

<!-- Fails 2.4.9: link purpose cannot be determined from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>Read more</a>\n</article>

\n

Texte de lien générique « Read More » — Correct

\n

<!-- Passes 2.4.9: link purpose is fully clear from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>\n    Read more about improving your website's accessibility score\n  </a>\n</article>\n\n<!-- Alternative: visually show short text but provide full accessible name -->\n<a href='/blog/improve-accessibility-score'\n   aria-label='Read more about improving your website's accessibility score'>\n  Read more\n</a>

\n\n

Lien uniquement image avec texte alternatif manquant — Incorrect

\n

<!-- Fails 2.4.9: image link has no accessible name; screen readers announce URL or nothing -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt=''>\n</a>

\n

Lien uniquement image avec texte alternatif manquant — Correct

\n

<!-- Passes 2.4.9: alt text gives the link a fully descriptive accessible name -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt='View Accsible pricing plans'>\n</a>\n\n<!-- Alternative using aria-label on the anchor -->\n<a href='https://accsible.com/pricing' aria-label='View Accsible pricing plans'>\n  <img src='/icons/pricing.svg' alt=''>\n  <!-- alt='' hides decorative image from AT; aria-label on <a> provides the name -->\n</a>

\n\n

Plusieurs liens « Satın Al » (Buy Now) identiques — Incorrect

\n

<!-- Fails 2.4.9: three identical link labels pointing to different products -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise'>Satın Al</a>\n</div>

\n

Plusieurs liens « Satın Al » (Buy Now) identiques — Correct

\n

<!-- Passes 2.4.9: each link has a unique, descriptive accessible name via aria-label -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic' aria-label='Temel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro' aria-label='Profesyonel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise' aria-label='Kurumsal Planı Satın Al'>Satın Al</a>\n</div>\n\n<!-- Alternative: use visually hidden text inside the anchor -->\n<a href='/plans/basic'>\n  Satın Al <span class='sr-only'>— Temel Plan</span>\n</a>

(Contenu tronqué en raison de la limite de jetons — veuillez réessayer cet article.)