aria-describedby sans role

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.

Restitution du message lié au champ par aria-describedby, sans role ni zone live, en fonction du lecteur d’écran et du navigateur
NVDA 2019.2 JAWS 2018 VoiceOver
Firefox 70 restitution conforme : Le message lié est restitué restitution conforme : Le message lié est restitué non applicable
IE 11 restitution conforme : Le message lié est restitué restitution conforme : Le message lié est restitué non applicable
Edge 44 restitution conforme : Le message lié est restitué restitution non conforme : Le message lié n'est pas restitué non applicable
Chrome 78 restitution conforme : Le message lié est restitué restitution conforme : Le message lié est restitué non applicable
Safari 13.0.3 (macOS Mojave 10.14.6) non applicable non applicable restitution conforme : Le message lié est restitué

aria-describedby avec role="alert"

<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.

Restitution du message avec le role="alert" lié au champ par aria-describedby en fonction du lecteur d’écran et du navigateur
NVDA 2019.2 JAWS 2018 VoiceOver
Firefox 70 restitution non conforme : Le message lié n'est pas restitué restitution conforme : Le message lié est restitué non applicable
IE 11 restitution conforme : Le message lié est restitué restitution conforme : Le message lié est restitué non applicable
Edge 44 restitution non conforme : Le message lié est restitué restitution non conforme : Le message lié n'est pas restitué non applicable
Chrome 78 restitution conforme : Le message lié est restitué restitution conforme : Le message lié est restitué non applicable
Safari 13.0.3 (macOS Mojave 10.14.6) non applicable non applicable restitution non conforme : Le message lié n'est pas restitué

aria-describedby avec aria-live

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.

Restitution du message avec le aria-live lié au champ par aria-describedby en fonction du lecteur d’écran et du navigateur
NVDA 2019.2 JAWS 2018 VoiceOver
Firefox 70 restitution conforme : Le message lié est restitué restitution conforme : Le message lié est restitué non applicable
IE 11 restitution conforme : Le message lié est restitué restitution conforme : Le message lié est restitué non applicable
Edge 44 restitution conforme : Le message lié est restitué restitution non conforme : Le message lié n'est pas restitué non applicable
Chrome 78 restitution conforme : Le message lié est restitué restitution conforme : Le message lié est restitué non applicable
Safari 13.0.3 (macOS Mojave 10.14.6) non applicable non applicable restitution conforme : Le message lié est restitué