live-region-announcements

Les régions live devraient pouvoir annoncer les messages d’état

manualWCAG 4.1.3 (AA)confiance : mediumgravité : moderaterobust

Signale, pour une revue manuelle, une région live masquée aux technologies d’assistance ou laissée occupée et, avec le hook de régions live, une région ajoutée avec son texte ou affichée et remplie en même temps.

Applicabilité. Régions live que dessine la page : éléments dont aria-live vaut polite ou assertive ou, sans aria-live, dont le rôle est status, log ou alert, et éléments <output>. aria-live="off" désactive chacun d’eux. Une région live masquée avec display: none, visibility: hidden ou [hidden] est laissée de côté : une région en attente d’affichage, c’est la page au repos. Une région live située derrière un <dialog> modal ouvert, que le navigateur rend inerte, est incluse, bien que d’autres règles laissent ce contenu de côté. Avec le hook de régions live (liveRegionHookScript), également les régions live dont il a vu recevoir leur texte d’une façon qui, souvent, n’est pas annoncée, qu’elles soient encore dans la page ou non.

Attendu. WCAG 4.1.3 : un message d’état peut être présenté à l’utilisateur par les technologies d’assistance sans recevoir le focus, ce que fait une région live lorsque son contenu change alors que les technologies d’assistance peuvent l’atteindre.

Une région live dessinée à l’intérieur de aria-hidden="true" ou d’inert, ou qui les porte, ou située derrière un <dialog> modal ouvert : cantTell (LIVE_REGION_HIDDEN). Elle est hors de l’arbre d’accessibilité, si bien que rien de ce qu’elle reçoit ne peut être annoncé (derrière la boîte de dialogue, tant que celle-ci est ouverte).
Une région live en aria-busy="true" au moment de l’analyse de la page : cantTell (LIVE_REGION_BUSY). Les technologies d’assistance peuvent retenir ses changements jusqu’à ce qu’aria-busy soit levé.
Enregistrée par le hook, une région live ajoutée à la page avec son texte déjà présent, autre que role="alert" : cantTell (LIVE_REGION_INSERTED_WITH_CONTENT). Les lecteurs d’écran annoncent généralement les changements d’une région qu’ils connaissent déjà, pas le contenu d’une nouvelle région.
Enregistrée par le hook, une région live qui était masquée et a été affichée et a reçu son texte dans la même tâche : cantTell (LIVE_REGION_SHOWN_AND_FILLED). Elle n’était pas dans l’arbre d’accessibilité lorsque le texte est arrivé.
Sinon : pass.

Vérifiez si la page utilise la région pour des messages d’état, et qu’elle est dans la page, affichée et atteignable, avant que son texte ne change.

Ce que rapporte un constat.

politeness : celle de la région, polite ou assertive.
hiddenBy : pour LIVE_REGION_HIDDEN, aria-hidden, inert, ou modal pour une région située derrière un <dialog> modal ouvert. Une région située derrière la boîte de dialogue vaut modal quoi que ce soit d’autre qui la masque (inert ou aria-hidden sur elle ou au-dessus, avec ou sans includeHiddenElements) : tant que la boîte de dialogue est ouverte, c’est elle la cause effective.
text : pour les deux constats du hook, le texte que la région a reçu (jusqu’à 300 caractères).
removed : pour les deux constats du hook, true lorsque la région n’était plus dans la page au moment de l’analyse ; l’occurrence se trouve alors sur l’élément document, et region la décrit (tag, role, id).

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

pass

<div role="status"></div>

Une région status vide, présente dans la page et atteignable avant l’arrivée de tout message.

can't tell

<div aria-hidden="true"><div role="status"></div></div>

La région est masquée aux technologies d’assistance, si bien que rien de ce qu’elle reçoit ne peut être annoncé. Une personne vérifie si la page l’utilise pour des messages d’état.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

`LIVE_REGION_BUSY`

Repérez la zone live indiquée par le rapport ; elle avait aria-busy="true" lors de l’analyse de la page.
Déclenchez l’action qui met à jour la zone, puis inspectez-la dans les outils de développement et voyez si aria-busy passe à false ou est retiré une fois la mise à jour terminée.
Refaites l’action avec un lecteur d’écran en marche et écoutez le message.
Si vous n’entendez rien de cette zone, vérifiez si la page annonce le même message autrement, par exemple depuis une autre zone d’état que le lecteur d’écran lit. Cela ne compte que si vous entendez le message en entier sans déplacer le focus.

Réussite. Le lecteur d’écran annonce le message sans déplacement du focus, car aria-busy est retiré à la fin de la mise à jour ou car la page annonce le même message autrement.

Échec. aria-busy reste à true, le lecteur d’écran retient ou saute le message et la page ne l’annonce d’aucune autre façon, ce qui ne respecte pas le critère WCAG 4.1.3.

`LIVE_REGION_HIDDEN`

Repérez la zone live indiquée par le rapport et notez ce qui la masque, comme le précise le rapport : aria-hidden="true" ou inert sur elle ou sur un ancêtre, ou une boîte de dialogue modale ouverte devant elle.
Vérifiez si une boîte de dialogue modale était ouverte lors de l’analyse de la page ; si c’est le cas, notez si la page écrit dans la zone pendant qu’elle est ouverte, puis fermez-la et voyez si la zone est toujours masquée.
Déclenchez l’action qui met à jour la zone (soumettre un formulaire, ajouter au panier, lancer une recherche) avec un lecteur d’écran en marche.
Écoutez le message. Si vous n’entendez rien, vérifiez dans le volet Accessibilité des outils de développement si cette zone, ou une autre zone d’état portant le même message, est dans l’arbre quand le texte change.

Réussite. Le lecteur d’écran annonce le message sans déplacement du focus, car la zone n’est pas masquée quand son texte change (ou ne sert jamais aux messages), ou car une autre zone d’état non masquée porte le même message.

Échec. La zone est encore masquée par aria-hidden, inert ou une boîte de dialogue modale ouverte quand le message arrive, et rien d’autre ne l’annonce : le lecteur d’écran ne dit rien, ce qui ne respecte pas le critère WCAG 4.1.3.

`LIVE_REGION_INSERTED_WITH_CONTENT`

Repérez le message cité par le rapport et l’action qui l’affiche (le rapport donne le texte et la zone).
Lancez un lecteur d’écran, puis effectuez cette action.
Écoutez le message sans y déplacer le focus.
S’il n’est pas lu, vérifiez dans les outils de développement si la page ajoute la zone déjà remplie ; une zone vide devrait d’abord être présente sur la page, le texte y étant écrit ensuite.

Réussite. Le lecteur d’écran annonce le message quand il apparaît, sans que le focus se déplace.

Échec. Le message apparaît à l’écran mais le lecteur d’écran ne l’annonce pas, parce que la zone a été ajoutée avec son texte déjà présent, ce qui ne respecte pas le critère WCAG 4.1.3 (ARIA22).

`LIVE_REGION_SHOWN_AND_FILLED`

Repérez le message cité par le rapport et l’action qui l’affiche.
Lancez un lecteur d’écran, puis effectuez cette action.
Écoutez le message sans y déplacer le focus.
S’il n’est pas lu, vérifiez dans les outils de développement si la zone reste masquée jusqu’au moment où son texte est défini ; elle devrait être visible (ou présente et vide) avant l’arrivée du texte.

Réussite. Le lecteur d’écran annonce le message quand il apparaît, sans que le focus se déplace.

Échec. Le message apparaît mais le lecteur d’écran ne l’annonce pas, parce que la zone a été affichée et remplie au même moment, ce qui ne respecte pas le critère WCAG 4.1.3 (ARIA22).

Voir le code source