Contexte du lien
Le contexte du lien, c'est l'élément HTML qui entoure un lien et permet d'en comprendre la destination quand son intitulé seul ne suffit pas. Un paragraphe, un élément de liste, une cellule de tableau ou un titre de section peuvent servir de contexte, à condition que les technologies d'assistance sachent les lire.
Cinq liens « En savoir plus » sur une même page. Pour un utilisateur voyant, aucun problème : chaque lien est visuellement proche de son sujet. Un utilisateur de lecteur d'écran qui affiche la liste des liens voit cinq intitulés identiques, sans aucune indication de destination.
#Ce que les WCAG entendent par « contexte »
Le critère 2.4.4 des WCAG (niveau A) pose une règle simple : la destination de chaque lien doit être compréhensible à partir de son texte seul, ou de son texte combiné à un contexte déterminable par programmation. Le RGAA reprend cette exigence dans le critère 6.1.
Ce contexte programmatique, c'est l'élément HTML qui englobe le lien et que les technologies d'assistance savent interpréter :
- la phrase ou le paragraphe (
<p>) - l'élément de liste (
<li>), pas la liste entière - la cellule de tableau (
<td>) ou son en-tête (<th>) - le titre de section (
<h2>,<h3>…) qui précède le lien
<!-- Le contexte rend le lien compréhensible -->
<article>
<h3>Forfait Pro, 49 €/mois</h3>
<p>Accès illimité aux audits automatisés.
<a href="/tarifs/pro">En savoir plus</a>
</p>
</article>Le lecteur d'écran peut restituer « En savoir plus, Forfait Pro, 49 €/mois ». Le lien devient explicite sans changer son texte visible.
#Trois erreurs que tout le monde fait
Compter sur title. Beaucoup de développeurs ajoutent un attribut title au lien pour compenser un intitulé vague. Les lecteurs d'écran ignorent le title en configuration par défaut. Les utilisateurs au clavier et sur mobile ne le voient jamais.
Confondre proximité visuelle et contexte HTML. Une image placée à côté d'un lien ne fournit aucun contexte si elle n'est pas dans le même élément englobant. Les technologies d'assistance ne devinent pas les relations spatiales. Elles lisent le DOM.
Mettre le lien et son contexte dans des <li> différents. Une clarification du W3C le confirme : le contexte programmatique est le <li> qui contient le lien, pas le <ul> entier. Un texte dans un <li> et un lien dans le <li> suivant ne partagent aucun contexte.
Quand aucun élément HTML parent ne fournit de contexte suffisant, aria-label reste une option :
<a href="/tarifs/pro" aria-label="Tarifs du forfait Pro">En savoir plus</a>aria-label remplace l'intitulé visible pour les lecteurs d'écran. C'est une technique reconnue par le W3C, pas un premier choix : un intitulé explicite dans le texte du lien reste toujours préférable.
#En résumé
Un lien n'a pas besoin d'un intitulé long pour être accessible. Il a besoin d'un contexte HTML que les technologies d'assistance savent lire : paragraphe, élément de liste, cellule de tableau ou titre de section. Listez vos liens hors contexte visuel. Si cinq d'entre eux disent la même chose, il manque du contexte programmatique.