Aria-label et aria-labelledby

Pour être complètement définis, à côté d'un rôle, de statuts et propriétés, les éléments qui se trouvent dans l'accessibility tree ont un nom. Pour les éléments HTML le nom est rempli de manière implicite. Voici des exemples de noms : ,

• l'attribut alt pour une image,
• le texte d'un lien,
• l'attribut value pour un bouton d'envoi
• la label pour un champ de formulaire, etc.

Il y a deux attributs ARIA qui permettent de donner un nom à un élément ou de modifier le nom existant: aria-label et aria-labelledby.

• La valeur de aria-label est le nom que vous voulez donner à l'élément.

  Par exemple, pour un bouton qui n'a pas de texte visible, on pourrait utiliser aria-label :

  <button aria-label="menu" class="menu-icon"></button>

• La valeur de aria-labelledby est l'id d'un texte qui existe déjà sur la page, et que vous voulez utiliser comme nom.

  Par exemple, pour donner un nom à un panneau d'onglet, on peut utiliser le texte qui se trouve dans l'onglet. Dans l'exemple incomplet ci-dessous, l'onglet contient le texte 'Printemps' et le div qui correspond au panneau d'onglet a un attribut aria-labelledby qui a comme valeur l'id de cet onglet:

  <div role="tab" id="spring" aria-selected="true" ">Printemps</div>
  ...
  <div role="tabpanel" aria-labelledby="spring">
    <p>Le printemps se situe entre l'hiver et l'été....</p>
  </div>

Attention

• Il y a deux 'l' dans 'labelledby'
• Il ne sert à rien de mettre un attribut aria-label(ledby) sur un span ou un div, sauf s'ils ont aussi un attribut role, car ces éléments ne font pas partie de l'accessibility tree.
• Si l'élément avait déjà un nom, celui-ci sera remplacé par celui spécifié avec aria-label(ledby). Donc surtout ne pas faire ceci:<a aria-label="Lien externe" href="http://www.anysurfer.be">AnySurfer</a>. Dans cet exemple le texte du lien sera perdu et remplacé par 'lien externe'.

• L'utilisation d'aria-label peut être de source de confusion car son contenu est visible pour les logiciels d'aide technique, mais n'est pas visible à l'écran.

  <a href="/en" aria-label="Anglais">EN</a>

  Dans l'exemple ci-dessus il y a un lien vers la version anglaise d'un site: le texte du lien "EN" a été remplacé dans l'accessibility tree par 'Anglais' en utilisant aria-label. Cela semble une bonne idée: Un lecteur d'écran lit maintenant 'Lien Anglais'. Mais sur l'écran on lit toujours 'EN':

  • L'utilisateur de lecteur d'écran ne sait pas que ce qu'il entend est différent de ce qui est affiché. Cela peut porter à confusion quand il parle à une personne voyante.
  • Une personne qui utilise une reconnaissance vocale comme Dragon Naturally Speaking dira 'Cliquer EN' parce que c'est cela qu'elle voit à l'écran. Cela ne fonctionnera pas car le texte est devenu 'anglais' pour Dragon.