4.4 Les rafraîchissements dynamiques sont annoncés

L'objectif de cette directive est d'éviter que les internautes qui ne voient pas la page soient perdus lorsqu'il y a des mises à jour dynamiques.

Pourquoi?

Les mises à jour dynamiques à l'intérieur d'une page peuvent porter à confusion lorsque l'on ne perçoit pas la page de manière visuelle. Pour que les mises à jour dynamiques ne portent pas à confusion elles doivent être prévisibles ou avoir lieu de telle manière que l'utilisateur puisse comprendre ce qui se passe.

En pratique

Il faut utiliser une combinaison méthodes suivante:

  • Annoncer une mise à jour, par exemple :
    • dans un filtre on annonce que le fait de sélectionner des critères met directement à jour les résultats;
    • dans l'attribut alt d'une image on annonce qu'en cliquant dessus une version agrandie va être affichée;
    • utiliser un intitulé de lien ou de bouton bien clair comme 'cacher les détails'.
  • Utiliser des attributs ARIA pour compléter l'information sémantique, ce qui est une manière implicite de rendre le comportement d'un widget prévisible. Par exemple :
    • dans un accordéon, ajouter un attribut aria-expanded="true" (ou "false" qui indique l'état de l'élément (ouvert ou fermé);
    • utiliser des attributs role (par exemple role="dialog" ou role="tablist") pour communiquer dans quel type de widget on se trouve.

Attention

Il faut utiliser ARIA avec prudence : uniquement lorsque c'est absolument nécessaire, et toujours en suivant la spécification. Nous vous invitons à lire une introduction à ARIA.

Il faut également toujours faire particulièrement attention à la gestion du focus et à la possibilité de naviguer au clavier: par exemple, si l'on annonce qu'une fenêtre modale va s'ouvrir mais que le focus ne s'y déplace pas, l'utilisateur sera perdu. Les design patterns décrivent le comportement attendu pour chaque type de widget ainsi que les attributs ARIA qui peuvent être utilisés

De nombreux frameworks et bibliothèques jquery utilisent ARIA dans leurs widgets. Il est important de bien choisir car leur accessibilité varie.

Pour certains composants nous avons documenté le comportement attendu:

comment tester