Introduction - cas utilisateurs

Pour un utilisateur présentant une déficience visuelle et qui n'a pas une vision globale de la page, il est essentiel de comprendre la fonction d'un lien. En effet, le contexte visuel et la proximité d'information ne sont pas toujours disponibles pour ces utilisateurs aveugles ou malvoyants.

Pour des utilisateurs présentant des déficiences cognitives, des liens peu explicites n'incitent pas à l'action. L'utilisateur ne sait pas et ne comprend pas vers quelle page il se dirige si l'intitulé du lien ne l'explique pas suffisamment.

Lorsque les liens sont constitués par des images seules, c'est le texte alternatif de l'image qui constitue l'intitulé du lien. À ce moment, le texte alternatif à renseigner n'est plus la description de l'image, mais la destination du lien. Si l'image n'a pas d'alternative, le lien est alors un lien vide. Un utilisateur qui navigue à la voix ne pourra par exemple pas cliquer sur ce lien, ne sachant pas comment le nommer.

Liens explicites

Nous ne détaillerons pas ici les liens explicites, puisqu'ils ne sont généralement pas du ressort de l'intégrateur, mais plutôt du concepteur, du designer et du contributeur. Nous vous renvoyons à la fiche « Créer du lien sans perdre son chemin » du guide « Contribuer sur le web de manière accessible ».

À titre d'information, un lien doit être explicite par lui-même (son intitulé) ou grâce à son contexte dont les principaux sont :

• le titre (hx) précédant le lien ;
• le paragraphe (p) dans lequel est inséré le lien ;
• la liste (ul ol dl) dans laquelle est inséré le lien ;
• la ligne dans laquelle le lien est inséré.

Lorsqu'aucun de ces contextes ne permet de rendre le lien explicite, le recours au title, dont l'utilisation est détaillée plus bas, est la dernière solution possible.

Liens images

Lorsqu'un lien est composé uniquement d'une image, c'est l'alternative de cette image qui constitue son intitulé.

  <a href="#"><img src="home.png" alt="Accueil"/></a>

Alternative en fonction du type d'image

Selon le type d'image, l'intitulé du lien (l'alternative de l'image), est défini différemment :

• balise <img> ou balise <area> possédant un attribut href, l’alternative est le contenu de l’attribut alt ;
• balise <object>, l’alternative est contenue entre <object> et</object> ;
• balise <canvas>, l’alternative est contenue entre <canvas> et </canvas> ;
• balise <embed>, l’alternative est contenue entre <embed> et </embed> ;
• balise <svg>, l’alternative est contenue dans les attributs `title`, `aria-label` ou la balise <desc>.

Liens composites : image et texte

  <a href="#"><img src="home.png" alt="" />Accueil</a>

Liens vides

Tous les liens doivent avoir un intitulé entre la balise <a> et </a>. Peu importe la mise en forme par la suite, il faut obligatoirement un texte explicite entre ces balises.

Il est courant de trouver des liens vides dépourvus de texte. C'est souvent le cas des liens mis en forme par des icônes générées en CSS ou des images en propriété de fond, mais également souvent le cas d'images HTML (img) dépourvues d'alternative.

Dans le cas des liens mis en forme en CSS avec des icônes, la réparation consiste à mettre un intitulé texte pertinent positionné hors écran. Le graphisme est conservé et les utilisateurs de lecteurs d'écran accèdent à l'information textuelle.

Titre de liens title

L'attribut title sert surtout à apporter une information complémentaire à l'intitulé du lien et à le rendre explicite. Il doit toujours être construit sur le modèle : intitulé du lien + informations complémentaires.

<a href="#" title="En savoir plus sur l'accessibilité numérique">En savoir plus</a>

Les cas de title non conforme sont :

• les title identiques aux intitulés de lien ;
• les title vides ;
• les title qui ne reprennent pas au moins le contenu de l'intitulé du lien.

Les seuls cas où l'utilisation de title identiques aux intitulés de lien est acceptable sont les cas des liens-images ou mis en forme par une icône en CSS. Dans ces cas, pour permettre à tous d'accéder à l'information (une icône n'est pas nécessairement comprise par tous, et la destination d'un lien-image n'est pas évidente pour tout le monde), un title identique est autorisé, voire encouragé.

Important : la présence seule d'un title sur un lien n'en fait pas un lien conforme. Un lien doit toujours avoir un intitulé texte entre les balises <a> et </a>

<a href="#" title="Référentiel technique"><img src="img.png" alt="Référentiel technique" /></a>
<a href="#" title="Paramètres"><span class="sr">Paramètres<span><span class="fa fa-gear" aria-hidden="true"></span></a>
/** la classe .sr positionne le texte hors écran pour qu'il puisse être restitué à un utilisateur de lecteur d'écran **/