Open tchak opened 2 years ago
Les zones live doivent impérativement être présentes au chargement de la page : elles ne peuvent pas être injectées à la volée en même temps que le message à restituer, faute de quoi ces derniers ne seront pas restitués.
L'attribut aria-live="assertive"
(équivalent à un attribut role="alert"
) est à utiliser pour les informations devant être restituées sans délai à l'utilisateur. Leur vocalisation est immédiate et interrompt l'utilisateur dans sa tâche.
L'attribut aria-live="polite"
(équivalent à un attribut role="status"
) est à utiliser pour les informations moins critiques et dont la vocalisation peut attendre que l'utilisateur soit inactif.
Dans tous les cas l'utilisation de l'attribut aria-live
doit s'accompagner de l'attribut aria-atomic=”true” qui indique au lecteur d'écran qu'il doit présenter l'ensemble de la zone live, même si une partie seulement a été modifiée.
Les message de status sont tous affichés dans le conteneur suivant : <div aria-live="assertive" id="flash_messages">
.
Dans certains cas, ce conteneur reçoit comme contenu une nouvelle zone live : <div role="status">
.
Ce qui a pour effet de les imbriquer :
<div id="flash_messages" aria-live="assertive">
<div id="flash_message" class="center">
<div class="alert alert-success" role="status">
Vous êtes connecté(e) ! Vous pouvez à tout moment alterner entre vos différents profils : administrateur, instructeur, expert, usager.
</div>
</div>
</div>
La solution la plus simple à implémenter consiste certainement à prévoir deux zones live différentes :
<div id="flash_messages">
<div id="flash_message" class="center">
<div role="alert"></div>
<div role="status"></div>
</div>
</div>
Suivant la nature du message, ce dernier sera injecté dans la zone live correspondante, en même temps que les classes lui conférant le rendu attendu (class="alert alert-success"
, par exemple).
Éléments à injecter dans la zone live role="status"
.
Éléments à injecter dans la zone live role="alert"
.
Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d'assistance ?
Au moins un message de statut n'est pas correctement restitué aux technologies d'assistance.
Messagerie
Par exemple :
Corrections :
Création dossier
Par exemple :
Corrections :
Authentification
Par exemple :
Corrections :