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.

Dans ces situations l’attribut aria-label ou l’attribut title doit 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 à :

  1. Ajouter l’attribut aria-label dans la balise <a>, <button> ou <input />.
  2. Renseigner cet attribut avec les informations permettant de rendre explicite le lien ou le bouton puis en reprenant à l’identique la valeur de l’intitulé du lien ou du bouton lui-même.
<a href="…" aria-label="Le projet AcceDe Web (Lire la suite)">
   Lire la suite
</a>

Astuce

Une bonne pratique consiste à renseigner cet attribut en commençant par l’information la plus explicite puis en terminant par la reprise de l’intitulé.

Attribut title

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

  1. Ajouter l’attribut title dans la balise <a>, <button> ou <input />.
  2. Renseigner cet attribut avec les informations permettant de rendre explicite le lien ou le bouton puis en reprenant à l’identique la valeur de l’intitulé du lien ou du bouton lui-même.
<a href="…" title="Le projet AcceDe Web (Lire la suite)">
   Lire la suite
</a>

Astuce

Une bonne pratique consiste à renseigner cet attribut en commençant par l’information la plus explicite puis en terminant par la reprise de l’intitulé.


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

Aller plus loin

  1. Recommandation d’accessibilité pour la conception fonctionnelle et graphique associée : 4.1. Prévoir un intitulé explicite pour chaque lien et bouton.
  2. Autre technique pour expliciter les liens et les boutons : Infobulles simulées en ARIA.

7 commentaires

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

    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.

      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.

    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.

      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.

    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.

      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 :

      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 Johan Ramon, le 26 juin 2017 à 16h39.

    Mise à jour de la fiche le 26/06/2017 (suppression de la technique du texte caché).

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page