5.3. Ne pas utiliser les attributs aria-label et title sur des liens ou boutons explicites

Un lien ou un bouton considéré comme explicite est un lien ou un bouton dont l’intitulé seul et/ou le contexte permettent de comprendre sa destination ou sa fonction.

Par exemple :

  • Le lien « Le projet AcceDe Web » est explicite par nature.
  • Idem pour le bouton « Confirmer ma commande ».

L’attribut aria-label (qui peut servir à rendre accessibles des liens ou boutons non explicites) et l’attribut title ne doivent pas être employés pour ce type de liens ou boutons.

Voici concrètement quelques exemples d’usages incorrects de l’attribut aria-label dans une balise <button> :

<button aria-label="">Confirmer ma commande</button>
<button aria-label="Valider ma commande">Confirmer ma commande</button>

Et quelques exemples d’usages incorrects de l’attribut title dans une balise <a> :

<a href="…" title="">Le projet AcceDe Web</a>
<a href="…" title="AcceDe Web">Le projet AcceDe Web</a>

3 commentaires

  • Par Steven, le 29 septembre 2017 à 11h37.

    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 l’équipe d’Atalan,

    title n’est pas toujours très bien rendu dans les aides techniques. Ne vaut-il mieux pas préférer aria-label aujourd’hui plutôt que title ?

    Merci

    Répondre

    • Par Johan Ramon, le 29 septembre 2017 à 12h01.

      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 Steven,

      Merci pour ton commentaire.

      Effectivement, aria-label est plus « fiable » que title pour expliciter un lien ou un bouton.

      En complément, je te propose de prendre connaissance des commentaires de la fiche « 5.2. Compléter les liens et les boutons non explicites avec aria-label ou title » pour plus d’informations à ce sujet.

      Bien à toi,
      Johan

      Répondre

      • Par Steven, le 29 septembre 2017 à 15h32.

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

        Merci pour l’info.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Mises à jour

28/10/2025
Ajustement des exemples de code.

Haut de page