aria-labelledby

Quand l’utiliser

Lorsqu’un texte visible sur la page décrit déjà l’élément — un titre au-dessus d’une boîte de dialogue, un en-tête de colonne au-dessus d’une cellule, un paragraphe qui introduit une région. aria-labelledby pointe vers ce texte afin que le lecteur d’écran l’annonce comme le nom accessible de l’élément. L’utilisateur entend exactement ce qu’un utilisateur voyant lit.

L’équivalent HTML natif est <label for="…"> sur les champs de formulaire. aria-labelledby étend la même idée à tout rôle qui prend en charge un nom.

Comportement

La valeur est une liste d’IDs d’éléments séparés par des espaces. La technologie d’assistance collecte le contenu textuel de chaque élément référencé, dans l’ordre, les joint avec des espaces et utilise le résultat comme nom accessible. Les références à des éléments masqués (display: none, hidden) contribuent toujours à leur texte — l’élément doit seulement être dans le DOM.

aria-labelledby a la priorité sur aria-label, qui à son tour a la priorité sur le texte interne visible. Ainsi, si vous pointez vers le titre visible, vous n’avez pas besoin d’un aria-label supplémentaire.

Pour maintenir la relation valide : les IDs référencés doivent exister sur la page, être uniques, et le texte qu’ils contiennent doit rester significatif. Si vous restituez un panneau d’onglets et réutilisez des IDs, vérifiez que le nouveau contenu décrit toujours l’élément libellé.

Erreurs fréquentes

• Pointer vers un ID qui n’existe pas (faute de frappe, élément supprimé, composant démonté). La relation échoue silencieusement et l’élément se retrouve sans nom.
• Réutiliser le même ID deux fois sur la page — seule la première correspondance est prise en compte.
• Référencer un élément dont le texte est vide ou composé uniquement d’espaces.
• Concaténation dans le mauvais ordre : aria-labelledby="nom prenom" produit « Dupont Jean » alors que vous vouliez « Jean Dupont ».
• Pointer vers un <div> générique contenant un long paragraphe — le paragraphe entier devient le nom. Les noms doivent être courts ; le contexte long appartient à aria-describedby.
• Oublier de mettre à jour le texte référencé lors de la localisation — les noms se désynchronisent avec l’interface visible.

Exemple

<h2 id="billing-heading">Adresse de facturation</h2>
<div role="group" aria-labelledby="billing-heading">
  <label>
    Rue
    <input type="text" autocomplete="street-address">
  </label>
  <!-- … -->
</div>

<!-- Deux IDs concaténés pour un modèle « prénom + nom » -->
<span id="first">Prénom</span>
<span id="last">(obligatoire)</span>
<input type="text" aria-labelledby="first last">