Utiliser le rôle status

Cette technique présente l'utilisation du rôle status et décrit les effets produits sur les navigateurs et les technologies d'assistance.

Le rôle status est un type de zone live et un conteneur dont le contenu est un message d'informations destiné à l'utilisateur. Ce message n'est pas assez important pour justifier une alerte. Il est souvent présenté comme une barre d'état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement status accessible aux produits de technologies d'assistance qui pourront alors le notifier à l'utilisateur.

Le contenu des informations d'état doit être fourni dans un objet d'état et il faut s'assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s'affiche dans l'objet d'état, la relation doit être explicitement définie à l'aide de l'attribut aria-controls.

Les technologies d'assistance devraient réserver des cellules dans la grille Braille pour rendre l'état.

Lorsque le rôle status est ajouté à un élément, ou qu'un tel élément devient visible, l'agent utilisateur devrait suivre les étapes suivantes :

• Présenter l'élément ayant un rôle de status à l'API d'accessibilité du système d'exploitation ;
• Déclencher un événement status accessible à l'aide l'API d'accessibilité du système d'exploitation si elle le prend en charge.

Les technologies d'assistance devraient être à l'écoute de tels événements et les notifier à l'utilisateur en conséquence :

• Les lecteurs d'écran peuvent fournir une touche spécifique pour annoncer l'état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut aria-live=”assertive” soit défini dans quel cas l'utilisateur peut être interrompu ;
• Les loupes d'écran devraient agrandir l'objet d'état.

Exemple 1 : ajout du rôle status dans le code HTML

L'extrait de code ci-dessous montre comment le rôle status est ajouté directement dans le code source HTML.

<p role="status">Vos modifications ont été automatiquement enregistrées.</p>

Exemples concrets

• status.

• Rôle alert.

• Bonnes pratiques ARIA – Implémentation des zones live : #LiveRegions.