• Accueil
•   >  Recueil
•   >  Quelques notes sur les thématiques du RGAA
•   >  Liens

Liens

RGAA : Images

• Liens explicites
  • aria-label
  • title
• Liens identiques
• Liens vides
• Traduction

Liens explicites

L'intitulé permet de comprendre ou le lien va nous emmener
ou
Le contexte le permet (Titre, paragraphe et phrase précédente)

• «la suite», si le texte est seul, ce n'est pas explicite
• «la suite», précédé d'un article (titre ou paragraphe), c'est conforme

Mais on peut améliorer l'intitulé !

Si un lien n'est pas explicite pour le voyant, ce n'est pas une faute, mais plutôt un problème d'UX
Le nom visible doit être contenu dans le nom accessible

Pour expliciter un intitulé :

• via un texte caché en sr-only : non voyant uniquement
• title : tous le monde
• aria-label ou aria-labelledby : pas natif donc pas pour tout le monde

aria-label

Doit comporter l'intitulé du lien

<a href="#url" aria-label="Retour Accueil du site">Retour</a>

aria-label surcharge l'intitulé, c'est pour ça que l'on doit mettre l'intitulé dedans

title

• Le title sera restitué par les lecteurs d'écran et à la souris
• Par défaut le title est restitué en plus de l'intitulé, mais certain le configure pour etre que seul le title soit restitué

Doit comporter l'intitulé du lien

<a href="#url" title="Retour Accueil du site">Retour</a>

Liens identiques

Des liens dons l'intitulé et le contexte sont identiques et ont la même destination
Si ce n'est pas le cas :

• Ajouter un titre pour préciser la différence entre les liens
• Changer le contexte

Liens vides

Pas de lien vides
Attention au lien avec des images, aux polices d'icônes où les mise en forme en CSS uniquement (content:"")

Mettre un alt sur les images liens

<a href="#lien">
    <img alt="intitule">
</a>

Ajouter un aria-label ou aria-labelledby sur le lien si besoin,
utilisé si possible les propriétés natives

<a aria-label="intitule">
    <i class="fa-solid fa-house"></i>
</a>

Un texte positionné hors de l'écran est la méthode conseillée

<a href="#lien">
    <span class="sr-only">intitule</span>
    <i class="fa-solid fa-house"></i>
</a>

Traduction

aria-label n'est pas correctement traduit par google translate
Préféré les méthodes : sr-only ou title