string

aria-labelledby

Identifie l'élément (ou les éléments) qui sert de libellé à l'élément courant en référençant son identifiant.

Description

aria-labelledby accepte un ou plusieurs identifiants (id) séparés par des espaces. Le texte des éléments référencés est concaténé pour former le nom accessible de l’élément. C’est la méthode préférée pour associer un libellé visible à un élément interactif.

Syntaxe

<h2 id="titre-section">Informations personnelles</h2>
<form aria-labelledby="titre-section">…</form>

<span id="lbl-prenom">Prénom</span>
<input type="text" aria-labelledby="lbl-prenom" />

Exemples

Dialog avec titre comme libellé :

<div role="dialog" aria-labelledby="dialog-titre" aria-modal="true">
  <h2 id="dialog-titre">Confirmer la suppression</h2>
  <p>Cette action est irréversible.</p>
  <button>Confirmer</button>
  <button>Annuler</button>
</div>

Libellé composite (plusieurs éléments) :

<span id="lbl-ville">Ville</span>
<span id="lbl-code">Code postal</span>
<input type="text" aria-labelledby="lbl-ville lbl-code" />
<!-- Nom accessible : "Ville Code postal" -->

Notes

Plusieurs IDs : les valeurs sont séparées par des espaces. La concaténation suit l’ordre des IDs listés.

Priorité : aria-labelledby écrase aria-label, <label>, et title.

Référence hors DOM visible : l’élément référencé peut être visuellement masqué (.sr-only), mais il doit rester présent dans le DOM.

Support navigateurs