string

aria-describedby

Identifie l'élément (ou les éléments) qui fournit une description complémentaire à l'élément courant.

Description

aria-describedby accepte un ou plusieurs id séparés par des espaces. Contrairement à aria-labelledby qui donne le nom de l’élément, aria-describedby fournit une description supplémentaire. Les lecteurs d’écran annoncent généralement le libellé en premier, puis la description après une pause.

Syntaxe

<label for="mdp">Mot de passe</label>
<input type="password" id="mdp" aria-describedby="mdp-aide" />
<p id="mdp-aide">8 caractères minimum, dont une majuscule et un chiffre.</p>

Exemples

Message d’erreur lié à un champ :

<label for="email">Email</label>
<input type="email" id="email"
       aria-describedby="email-erreur"
       aria-invalid="true" />
<p id="email-erreur" role="alert">Format invalide — exemple : nom@domaine.fr</p>

Bouton avec contexte supplémentaire :

<button aria-describedby="info-suppression">Supprimer</button>
<span id="info-suppression" class="sr-only">
  Supprime définitivement le fichier sans possibilité de récupération.
</span>

Notes

Différence avec aria-labelledby : le libellé identifie l’élément (annoncé en premier), la description le complète (annoncée après). Un élément peut avoir les deux simultanément.

Description différée : les lecteurs d’écran n’annoncent pas toujours la description immédiatement — l’utilisateur peut devoir la demander manuellement selon son mode de navigation.

Plusieurs IDs : les textes des éléments référencés sont concaténés dans l’ordre.

Support navigateurs