Accessibilité des liens avec le RGAA

Deux options sont possibles pour vous assurer de la pertinence de votre intitulé de lien texte :

1. L’intitulé de lien suffit à lui seul à comprendre la fonction et la destination ;
2. L’intitulé de lien associé au contexte du lien permet de bien comprendre la fonction et la destination.

Par exemple, un intitulé de lien de type “Lire notre étude sur l’accessibilité web” est pertinent à lui seul.

Un lien de type “Téléchargez notre étude” ne devient pertinent que s’il est précédent d’une phrase “Nous venons de publier une étude complète sur l’accessibilité web : téléchargez notre étude“.

La première solution (l’intitulé du lien contient l’information pertinente) est la solution que je vous recommande.

Les liens images peuvent prendre différentes formes :

• <img>
• Élément ayant l’attribut WAI-ARIA role="img"
• <area> possédant un attribut href,
• <object>
• <canvas>
• <svg>

Chaque lien image, doit posséder une alternative textuelle de l’image (attribut alt ou attributs WAI-ARIA aria-label ou aria-labelledby). Cette alternative doit être :

1. Explicite en elle-même (l’internaute comprendre la finalité du lien) ;
2. Explicite grâce au contexte (l’internaute comprendre la finalité du lien avec les éléments autour du lien, comme la phrase précédant le lien).

Un lien SVG se compose d’un élément <svg> avec un élément <a> doté d’un attribut xlink-href (SVG 1.1) ou href (SVG 2).

Comme tout autre type de lien, il doit présenter un intitulé de lien explicite en lui-même ou dans son contexte, généralement fourni par le nom accessible présent dans un élément <text>.

Exemple de code valable pour le RGAA avec élément <text> :

<a href=”https://example.com/accueil”>
<svg width=”60″ height=”30″>
<text x=”5″ y=”20″ font-family=”sans-serif” font-size=”12″>Mon intitulé de lien accessible</text>
</svg>
</a>

Exemple de code valable pour le RGAA sans élément <text> :

<a href=”/video/play”>
<svg width=”100″ height=”100″ aria-label=”Lancer la vidéo”>
<title>Bouton de lecture</title>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”#007bff” />
<polygon points=”40,30 40,70 70,50″ fill=”white” />
</svg>
</a>

Un lien composite comprend à la fois du texte et un ou plusieurs éléments ou balises HTML affichant une image :

• Balise <img> ;
• Balise ouvrante ayant l’attribut WAI-ARIA role="img") ;
• Balise <area> possédant un attribut href (zone cliquable) ;
• Balise <object> ;
• Balise <canvas>pour une image bitmap ;
• Balise <svg>pour une image vectorielle.

• 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.

Dans le domaine de l’accessibilité, on distingue :

• L’intitulé visible : vu par tous les utilisateurs ;
• Le nom accessible du lien : lu par les technologies d’assistance de type lecteur d’écran.

Le nom accessible est obtenu à partir de plusieurs éléments, dans un ordre de priorité précis :

• Le contenu textuel de la balise <a> (l’intitulé visible ou ancre de texte en SEO) ;
• L’attribut aria-label, qui prend le dessus sur le contenu textuel ;
• L’attribut aria-labelledby, qui prend le dessus sur le contenu textuel et le aria-label ;
• L’attribut title, considéré comme une information secondaire et parfois ignoré par certains lecteurs d’écran.

La règle du RGAA sur les liens stipule :

• Quand le aria-labelledby est présent, il doit intégrer l’intitulé visible (ancre du lien) ;
• En l’absence d’aria-labelledby, l’attribut aria-label doit inclure l’intitulé visible ;
• En l’absence d’attributs aria-labelledby et aria-label, l’intitulé visible est pris en considération.