Aria-label et aria-labelledby

Nous vous recommandons de lire d'abord ARIA - introduction.

Les éléments qui se trouvent dans l'accessibility tree ont souvent besoin d'un nom. Pour de nombreux éléments HTML, le nom est fourni de manière implicite. Avec aria-label et aria-labelledby on peut donner un nom ou modifier un nom dans l'accessibility tree.

Donner un nom de manière implicite en HTML

Pour la plupart des éléments en html, il y a une manière native de leur donner un nom et on n'a pas besoin d'utiliser arial-label(ledby). Voici quelques exemples :

• le texte entre la balise ouvrante et fermante des éléments a et button:

  <a href="/contact">Nous contacter</a>

• l'attribut alt de l'élément img :

  <img src="logo.png" alt="AnySurfer" />

• le label des éléments input et select :

  <label for="fname">Prénom</label>
  <input type="text" id="fname" />

Donner un nom avec ARIA

Les attributs aria-label et aria-labelledby permettent de donner un nom à un composant qui n'en a pas ou de modifier le nom existant.

• L'attribut aria-label prend comme valeur le nom que vous voulez donner à l'élément.

  Dans l'exemple ci-dessous le champ d'édition n'a pas d'étiquette visible (label) qui peut servir de nom. Avec aria-label on peut donner à ce champ d'édition un nom dans l'accessibility tree.

  <form name="search_website">
  <input type="text" name="search" aria-label="terme à rechercher">
  <input type="submit" value="Chercher">
  </form>

• L'attribut aria-labelledby prend comme valeur 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 ci-dessous, le premier onglet avec id="tab1" contient le texte "Lundi à vendredi" et le div du panneau d'onglet correspondant a un attribut aria-labelledby qui a comme valeur l'id de cet onglet, aria-labelledby="tab1". Le nom du premier panneau d'onglet est "Lundi à vendredi" :

  <a role="tab" id="tab1">Lundi à vendredi</a>
  <a role="tab" id="tab2">Samedi</a>
  <a role="tab" id="tab3">Dimanche et jours fériés</a>
  
  <div id="tabpanel1" role="tabpanel" aria-labelledby="tab1">
  Ouvert de 9h à 18h</div>
  <div id="tabpanel2" role="tabpanel" aria-labelledby="tab2">
  Ouvert de 10h à 17h</div>
  <div id="tabpanel3" role="tabpanel" aria-labelledby="tab3">
  Fermé</div>

Points d'attention

• Il y a deux "l" dans "aria-labelledby".
• N'oubliez pas de traduire le contenu des attributs aria-label.

• Ne répétez pas le rôle dans le label.

  Ne faites pas:

  <button aria-label="Bouton de recherche"></button>

  <a href="facebook.com" aria-label="Lien vers Facebook"></a>

  <nav aria-label="navigation principale">

  mais plutôt

  <button aria-label=" recherche"></button>

  <a href="facebook.com" aria-label="Facebook"></a>

  <nav aria-label="principale">

Règles de priorité

Un algorithme détermine le nom accessible de chaque élément. Les attributs aria-label et aria-labelledby ont toujours priorité et remplacent les noms donnés de manière implicite (contenu de l'élément, attribut alt, label, etc ). l'attribut aria-labelledby a priorité sur aria-label si les deux sont présents.

OK: remplacer un symbole par un texte pertinent

Prenons par exemple un bouton "Fermer". La lettre X est visuellement reconnaissable comme symbole de fermeture, mais le nom implicite (X) n'est pas significatif pour les utilisateurs de lecteur d'écran. L'attribut aria-label écrase le nom implicite et clarifie la fonction du bouton :

<button type="button" aria-label="Fermer">X</button>

On peut visualiser l'ordre de priorité en inspectant ce bouton avec les outils développeur dans Chrome, sous "computed properties" dans l'onglet "accessibilité".

L'attribut aria-labelledby n'est pas spécifié. En deuxième place, l'attribut aria-label est "Fermer". Le contenu du bouton, "X", se trouve plus bas dans la hiérarchie et est barré parce qu'il est remplacé par le contenu de aria-label. Le nom du bouton est "Fermer" et pas "X".

Notez que dans ce cas-ci, on considère la lettre X comme un symbole et non comme du texte.

Pas OK : écraser un texte visible

Prenons un premier exemple de lien dont le texte est écrasé par un attribut aria-label :

<a class="external" aria-label="Nouvelle fenêtre" href="https://www.anysurfer.be">
AnySurfer
</a> 

Ce lien contient une icône qui indique que le lien s'ouvre dans une nouvelle fenêtre. Cette icône doit avoir une alternative textuelle, mais ce n'est pas OK de donner cette information au moyen d'un attribut aria-label sur le lien. A cause de l'aria-label, le nom du lien n'est plus "AnySurfer" mais "nouvelle fenêtre" dans l'accessibility tree. L'attribut aria-label écrase le texte du lien.

Nous pouvons observer cela dans les "computed properties" de ce lien dans l'accessibility tree : aria-label est plus haut que le contenu du lien et le remplace.

C'est un problème parce qu'un utilisateur de lecteur d'écran ne sait pas que c'est un lien vers le site de AnySurfer. Le lien ne fonctionnera pas avec un logiciel de contrôle vocal si l'on dit "cliquer AnySurfer" parce que le nom du lien, vu par le logiciel de contrôle vocal, est "nouvelle fenêtre".

OK : compléter un texte visible

On ne peut pas remplacer un texte visible par un autre mais on peut éventuellement remplacer un texte visible par un texte qui contient ce texte. Ne faites cela que quand cela présente une valeur ajoutée, par exemple quand le texte d'un lien est ambigu.

Par exemple, le texte visible est "lire plus". Le contenu de l'attribut aria-label remplace ce texte dans l'accessibility tree par "Lire plus sur nos produits".

<h2>Produits</h2>
<a href="/producten" aria-label="Lire plus sur nos produits">
Lire plus
</a>

C'est une application correcte de 2.5.3 Étiquette dans le nom: le nom dans l'accessibility tree contient le texte visible.

Quand utiliser aria-label(ledby)?

De manière générale, n'utilisez les attributs aria-label(ledby) que quand c'est nécessaire et permis.

• N'utilisez pas aria-label(ledby) sur des éléments comme <div>, <span>, <p>, parce que ce n'est pas permis, et cela n'aura aucun effet, sauf s'ils ont aussi un attribut role.
• N'utilisez pas aria-label(ledby) pour remplacer un texte visible.
• N'utilisez pas aria-label(ledby) si vous pouvez donner un nom en utilisant une technique native (contenu de la balise, alt, label,...).

Utilisez aria-label(ledby) par exemple pour

• donner un nom à un bouton ou lien vide (qui contient par exemple une icône insérée par CSS)
• donner un nom plus pertinent à un lien, en incluant le texte visible du lien
• donner un nom à un champ de formulaire qui n'est pas relié à un label visible
• donner un nom à chaque région de navigation quand il y en a plusieurs
• donner un nom à des composants complexes (panneaux d'onglets, fenêtre de dialogue,etc.)
• donner un nom à un composant personnalisé (par exemple bouton radio créé à partir d'un span)

Lire plus

• Accessible name calculation
• Les éléments qui ont l'indication "naming prohibited" ne peuvent pas avoir d'attribut aria-label(ledby).