5.2. Compléter les liens et les boutons non explicites avec `aria-label` ou `title`

Un lien ou un bouton considéré comme non explicite est un lien ou un bouton dont l’intitulé seul ne permet pas de comprendre sa destination ou sa fonction.

Les liens « Lire la suite », « En savoir plus », « Plus d’informations », « Cliquer ici » sont par exemple considérés comme non explicites par nature.
Idem pour le bouton « Ok ».

Dans ces situations l’attribut aria-label ou l’attribut title peut alors être utilisé pour préciser la destination du lien ou la fonction du bouton.

Prenons ci-dessous l’exemple d’un lien « Lire la suite » pointant vers la page du projet AcceDe Web pour présenter ces deux techniques.

Attribut `aria-label`

Rendre un lien ou un bouton explicite via l’attribut aria-label consiste à :

Ajouter l’attribut aria-label dans la balise <a>, <button> ou <input />.
Renseigner cet attribut en reprenant à l’identique la valeur de l’intitulé du lien ou du bouton lui-même puis avec les informations permettant de rendre explicite le lien ou le bouton.

<a href="…" aria-label="Lire la suite : Le projet AcceDe Web">
   Lire la suite
</a>

Attribut `title`

Remarque

Le support de l’attribut title par les navigateurs et technologies d’assistance est partiel.

Bien qu’il s’agisse d’une technique conforme, l’utilisation de l’attribut aria-label est donc à privilégier.

Rendre un lien ou un bouton explicite via l’attribut title consiste à :

Ajouter l’attribut title dans la balise <a>, <button> ou <input />.
Renseigner cet attribut en reprenant à l’identique la valeur de l’intitulé du lien ou du bouton lui-même puis avec les informations permettant de rendre explicite le lien ou le bouton.

<a href="…" title="Lire la suite : Le projet AcceDe Web">
   Lire la suite
</a>

Astuce

Une bonne pratique consiste à renseigner ces attributs en commençant par la reprise de l’intitulé puis en terminant par l’information permettant de rendre explicite le lien ou le bouton.

Remarque

Une de ces deux techniques doit également être utilisée pour distinguer les liens ou boutons dont les intitulés pourraient être considérés comme explicites, mais qui pointent vers des pages ou déclenchent des actions différentes.

Par exemple, dans le cas de deux boutons « Rechercher » affichés sur la même page, et qui seraient à distinguer :

<input type="submit" value="Rechercher" aria-label="Rechercher une actualité" />
[…]
<input type="submit" value="Rechercher" aria-label="Rechercher une personne dans l'annuaire" />

Remarque

À noter qu’un lien peut être considéré comme explicite grâce à son contexte quand les éléments environnants permettent d’en comprendre le sens.

11 commentaires

Par Michèle Legait, le 9 octobre 2015 à 16h36.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour,

Tout d’abord merci pour vos notices, elles sont d’une aide précieuse :-)

J’ai juste une remarque à faire relative à l’usage de l’attribut title. J’ai cru comprendre en me baladant sur le net que ce n’était plus vraiment d’actualité.

Sources :
Qu’en pensez-vous ? Est-ce que la technique utilisant l’attribut title est toujours valide ?

Merci pour votre aide,
Michèle Legait

Répondre
- Par Johan Ramon, le 12 octobre 2015 à 13h28.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Michèle,
  
  Merci pour votre commentaire.
  
  Effectivement, comme le précise les ressources que vous citez, l’utilisation de l’attribut title pour expliciter un lien ou un bouton n’est pas des plus optimal.
  Notamment car certains lecteurs d’écran ne le restituent pas (dépend aussi parfois des réglages effectués par l’utilisateur).
  
  Toutefois, étant donné que cette technique est conforme du point de vue des référentiels d’accessibilité (RGAA, AccessiWeb, WCAG…) nous avons pris le parti de la mentionner.
  Mais nous l’avons volontairement proposée à la fin de la fiche, après les techniques « Texte caché » et « aria-label » (car davantage efficaces).
  
  En revanche, vous pourrez noter que nous mettons en avant la technique du title sur la fiche 5.5. Signaler l’ouverture des nouvelles fenêtres car nous estimons que l’affichage de l’infobulle générée par le title a un intérêt fort dans ce contexte.
  
  Johan
  
  Répondre
Par Cedric, le 26 avril 2016 à 16h37.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour,

Il me semble que la technique du titre de lien proposée dans cette notice est conforme au RGAA / accessiweb, mais ne correspond pas à la technique WCAG sur le sujet.

En effet, le RGAA / accessiweb impose de reprendre l’intitulé du lien dans le titre, en y ajoutant des informations complémentaires (cf. glossaire > titre de liens).

La technique WCAG dit l’inverse, à savoir que le titre ne doit contenir que les informations complémentaires :
H33: Supplementing link text with the title attribute.
La technique WCAG me semble plus logique car, dans leur configuration par défaut, la plupart des lecteurs d’écran vont restituer le titre de lien en complément de l’intitulé du lien ou en complément du aria-label, si je me fie à cet article :
Text Links: Best Practices for Screen Readers.

Ce qui correspond à mes tests avec Jaws 17 et NVDA 2015, sur Firefox 43 et IE 11, mais uniquement en tabulation. En navigation avec les flèches, ou en extraction de la liste des liens, il n’y a pas du tout de vocalisation du titre. Je ne comprends pas ce choix des outils d’ailleurs …

Une autre grosse différence entre les WCAG et le RGAA / accessiweb : pour le RGAA / accessiweb, la technique du titre permet de valider le critère sur l’intitulé du lien. Par contre, pour les WCAG, il ne s’agit pas d’une technique suffisante à valider le critère.

Répondre
- Par Sébastien Delorme, le 26 avril 2016 à 16h55.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Cédric,
  
  La solution présentée ici est effectivement conforme AccessiWeb et RGAA 3.0. Elle ne correspond pas tout à fait à la technique WCAG que tu pointes, mais elle reste conforme à cette technique.
  
  C’est donc le meilleur compromis.
  
  Ce choix est fait pour assurer le support idéal par les lecteurs d’écran.
  L’étude de Deque est pertinente mais malheureusement très incomplète !
  
  Par exemple, avec Jaws, il est possible de choisir :
  - De lire l’intitulé (et jamais l’attribut title) ;
  - De lire l’attribut title (et jamais l’intitulé) ;
  - De lire le plus long des deux ;
  - Etc.
  Le comportement est ensuite différent selon si l’on lit la page linéairement, si l’on lit la page de lien en lien ou si on liste les liens.
  
  Et il ne s’agit que de Jaws, pour NVDA les possibilités sont également nombreuses (selon le mode de navigation).
  
  Ainsi, le nombre d’utilisations où seul l’attribut title sera lu est finalement assez important ! D’où le fait de demander à disposer de toutes les informations dans l’attribut title.
  
  Enfin, pour ta dernière remarque, nous sommes d’accord, l’attribut title est assez mal supporté sur les liens et cette solution n’est pas optimale. C’est pour cette raison qu’elle se trouve en troisième et dernière position dans cette fiche. Nous pourrions même ajouter une remarque pour préciser que bien que la solution soit conforme, nous ne la recommandons pas (sur les liens).
  
  Bien à toi,
  Sébastien.
  
  Répondre
Par Véronique Leclerc, le 9 août 2016 à 16h00.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour,

que penseriez-vous d’une solution où l’attribut « aria-label » ET l’attribut « title » serait utilisés sur un même lien non-explicite? De cette façon, pourrions-nous nous assurer de la bonne compréhension pour les personnes non-voyantes mais aussi pour les personnes qui voient?

Sinon, serait-ce préférable d’utiliser la technique du texte caché? Mais à ce moment là, j’ai peur de créer un doublon à la lecture avec le lecteur d’écran.

Alors, est-ce que ma solution pourrait être celle-ci (je dois me baser sur les normes WCAG 2.0):
<a href="ferme-de-lamas.html" aria-label="Notre ferme de lamas" title="Notre ferme de lamas" rel="nofollow">Lire la suite</a>

Et quand est-il des cas où le lien « Lire la suite » est le second lien vers une même page (exemple: j’ai un titre cliquable, une courte description et un lien « Lire la suite » à la fin de la description)? Ne serait-ce pas préférable de le masquer pour le lecteur d’écran avec l’attribut « aria-hidden » pour ne pas créer de doublons de lien?

Merci beaucoup pour votre réponse ^_^

Répondre
- Par Johan Ramon, le 12 août 2016 à 9h56.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Véronique,
  
  Merci pour votre commentaire.
  
  Votre proposition de doubler l’attribut aria-label d’un attribut title pour expliciter un lien (ou un bouton) nous paraît effectivement intéressante (et, sauf erreur de ma part, est bien compatible avec les WCAG 2.0).
  
  L’attribut aria-label étant, de manière générale, mieux supporté par les différents couples navigateur/lecteur d’écran que l’attribut title.
  
  Concrètement, nos tests de support de lecteur d’écran (notamment sur JAWS 17, NVDA et VoiceOver) de votre code suivant <a href="..." aria-label="Notre ferme de lamas" title="Notre ferme de lamas">Lire la suite</a> sont concluants : seul le contenu de l’attribut aria-label est restitué. Ce qui est souhaité.
  
  À noter que le contenu de l’attribut title doit être strictement identique au contenu de l’aria-label. Sous peine que certains lecteurs d’écran vocalisent les deux. Ce qui ne serait pas optimal.
  
  Ici l’utilisation de l’attribut title en plus de l’aria-label serait donc notamment intéressante pour les personnes malvoyantes naviguant avec une loupe d’écran type « ZoomText » qui, au survol souris du lien « Lire la suite », disposeraient visuellement de l’infobulle « Notre ferme de lamas ». Ce qui est intéressant.
  
  Toutefois, le title est visuellement « rigide » : les préférences d’affichage de l’utilisateur (changement de couleurs, de police et taille de caractères, etc.) ne sont pas appliquées sur les contenus de cet attribut.
  
  Par conséquent, idéalement, une technique encore meilleure pourrait consister à implémenter une infobulle personnalisée dont les contenus prendraient en considération ces préférences d’affichage.
  Voici par exemple deux scripts d’infobulle personnalisée :
  - jQuery accessible simple tooltip window, using ARIA.
  - Tooltip.
  Concernant votre seconde question sur l’intégration d’aria-hidden="true" dans des liens « Lire la suite » déjà précédés de liens explicites, bien que cela peut paraître une bonne idée, nous aurions tendance à ne pas la recommander.
  
  Notamment car les lecteurs d’écran ne sont pas uniquement utilisés par les personnes aveugles : certaines personnes malvoyantes (ou encore dyslexiques) utilisent ce type d’aide technique et il est souhaitable pour elles que ces liens « Lire la suite » (ou les contenus de ses attributs) soient vocalisés.
  
  Je reste à votre écoute et vous remercie de nouveau pour votre commentaire.
  
  Johan
  
  Répondre
Par Thomas, le 28 février 2018 à 17h12.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour,

je tiens à vous remercier pour vos notices qui me sont d’une aide précieuse.

Je souhaitais avoir un conseil/avis concernant l’accessibilité d’un lien image sans accompagnement de texte. Pour illustrer mon exemple, voici l’exemple sur cette image ci-dessous :
https://zupimages.net/up/18/09/2n8s.png

Je n’ai pas vraiment trouver de réponse sur les notices.
Dans cette image, la flèche en bas à droite représente le lien qui redirige vers l’article du texte qui est affiché.

Peut-on mettre une image (la flèche dans cet exemple) dans un lien <a>, sans texte, tout en ajoutant un aria-label="" dans mon <a> ?

Ou alors, le mieux est-il de d’entourer le texte du lien d’un <span> et de le rendre non visible l’oeil (tout en sachant qu’il sera visible avec la touche tabulation) ?

Ex :
```
<a href="#" aria-label="Lorem ipsum">
   <span>Lorem ipsum</span>
   <img>
</a>
```
Si la deuxième solution est impérative, est-il conseillé de cacher mon texte par une position:absolute en négatif (left:-9999px), par un visibility:hidden ou une opacity:0 ?

Merci pour votre aide :)

Thomas

Répondre
- Par Laurent Bracquart, le 2 mars 2018 à 18h03.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Thomas,
  
  Et merci pour les bons mots.
  
  Dans le cas d’un lien-image, l’idée est de se baser sur l’attribut alt="" de l’image pour fournir une alternative textuelle au lien, selon le schéma suivant :
```
<a href="[...]">
  <img src="fleche.png" alt="Assurance mobile, une couverture tous risques et toutes causes" />
</a>
```
  Pour approfondir le sujet, n’hésitez pas à consulter la page suivante : http://www.accede-web.com/notices/html-css-javascript/images-icones/balise-img/#ancre-03.
  
  Beau weekend à vous,
  
  Répondre
Par Farouk Tbahriti, le 3 juin 2019 à 12h45.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour, je vous remercie pour votre travail méticuleux et clair avec beaucoup d’informations utiles sur l’accessibilité web.

Voici mon cas :
Sur une page web j’ai 2 liens explicites qui ouvrent le même PDF (document d’une page) dans un autre onglet.
Ceci dit ces 2 liens n’ont pas tout à fait le même but puisque le premier invite l’utilisateur à lire une section particulière du PDF et que le second invite à lire une autre partie de ce PDF (C’est à l’utilisateur de chercher visuellement la partie concernée du PDF).

Voici une image de la page web et du PDF en question :
Page web : https://zupimages.net/up/19/23/sn4v.jpg
PDF : https://zupimages.net/up/19/23/34uq.jpg

Ma question est :
Que devrais-je utiliser ici en terme de « title » ou « aria-label » ?

Pour le moment j’ai fait comme ceci :

1er lien :

See guidelines

2e lien :

Note: Prior using the composite logo, read the Paralympic section in the email signature guidelines.

Voilà, donc ici plusieurs aspects sont à prendre en compte :
– Les liens explicites
– Les textes des liens explicites qui sont différents mais qui signifient la même chose (« See guidelines » et « email signature guidelines »)
– L’ouverture du PDF dans un nouvel onglet (est-ce que ma technique du texte dans l’aria-label est adéquate ?)
– Les liens qui ouvrent le même PDF mais pour des sections différentes

Cordialement.

Répondre
- Par Farouk Tbahriti, le 3 juin 2019 à 12h54.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Excusez-moi, le code HTML pour « 1er lien » et « 2e lien » ne s’est pas affiché.
  
  Les voici donc en images :
  
  https://zupimages.net/up/19/23/9y2m.jpg
  
  Cordialement.
  
  Répondre
  - Par Johan Ramon, le 23 août 2019 à 11h26.
    
    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
    
    Bonjour,
    
    Nous vous remercions pour l’intérêt que vous portez au projet AcceDe Web.
    
    Toutefois, cet espace de commentaires est dédié aux échanges à propos des recommandations AcceDe Web.
    
    Étant donné que votre demande relève davantage d’un forum d’entraide, nous vous suggérons donc de la publier sur ce type d’espace : Forum « Accessibilité du Web d’Alsacréations », par exemple.
    
    Bien à vous,
    Johan