Skip to content

Latest commit

 

History

History
153 lines (112 loc) · 7.6 KB

5-liens.md

File metadata and controls

153 lines (112 loc) · 7.6 KB
Raw

Guide de l'intégrateur

Fiche 5 : Liens

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.

Synthèse

  • Attention aux liens vides.
  • Définissez des intitulés de liens pertinents.
  • Respectez la construction des titres de liens.

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 est inséré le lien.

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

Page de démonstration

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

Par exemple, pour les images <img>, c'est le contenu de l'attribut alt qui est l'intitulé du lien :

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

Dans ces cas, l'alternative de l'image indique à l'utilisateur la destination du lien.

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

Lorsque le lien est constitué d'une image et d'un texte, si le texte visible est suffisant à comprendre la destination du lien, alors l'image est une image de décoration et doit avoir un alt vide.

<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 **/

Voir ailleurs / Ressources

Critères RGAA

  • 6.1 [A]
  • 6.2 [A]
  • 6.3 [AAA]
  • 6.4 [A]
  • 6.5 [A]

Sommaire du guide de l'intégrateur