aria-describedby

aria-describedby sans role

Prénom

Ce champ est obligatoire.

<p>
  <label for="name0">Prénom</label>
  <input id="name0" aria-describedby="error-name0" />
</p>
<p id="error-name0">Ce champ est obligatoire.</p>

À noter que JAWS 2018 utilisé avec Edge ne restitue jamais un message lié par aria-describedby.

aria-describedby avec role="alert"

Prénom

Ce champ est obligatoire.

<p>
  <label for="name">Prénom</label>
  <input id="name" aria-describedby="error-name" />
</p>
<p id="error-name" role="alert">Ce champ est obligatoire.</p>

NVDA (avec Firefox), ainsi que VoiceOver (avec Safari), ne restituent pas le passage de texte relié par aria-describedby s'il possède le role="alert" à la prise de focus sur le champ.

Pour toutes les autres combinaisons (NVDA avec Chrome ou Edge, JAWS 2018 avec Firefox, Chrome ou Edge), le passage de texte est bien restitué à la prise de focus.

aria-describedby avec aria-live

Prénom

Ce champ est obligatoire.

<p>
  <label for="name2">Prénom</label>
  <input id="name2" aria-describedby="error-name2" />
</p>
<p id="error-name2" aria-live="polite">Ce champ est obligatoire.</p>

Avec la propriété aria-live, le texte est bien restitué par le couple NVDA/Firefox ainsi que par toutes les autres combinaisons de lecteurs d’écran/navigateur. vec la propriété aria-live, le texte est bien restitué par le couple NVDA/Firefox ainsi que par toutes les autres combinaisons de lecteurs d’écran/navigateur.

Cela peut être utile si vous validez la saisie de l’utilisateur dès que le focus sort du champ – même si cette technique n'est pas conseillée.