Gestion dynamique du focus

  • Composant

Introduction

La gestion du focus dans des applications riches est complexe. Plusieurs cas se présentent :

  • Apparition/disparition de contenu généré par une action utilisateur avec rechargement de page
  • Apparition/disparition de contenu dynamique généré par une action utilisateur sans rechargement de page
  • Cas particulier : les iframes dynamiques

Contenu généré par une action utilisateur avec rechargement de page

Ce cas, où l’on recharge la page pour modifier une partie du contenu de cette page, est à éviter car, même si c’est une action utilisateur, il y a perte de contexte et dans tous les cas un chargement asynchrone aurait été bien plus efficace.

Apparition de contenu

Donc, s’il n’y a aucun moyen de faire du chargement asynchrone, il faut pour le moins :

  1. Prévenir, si besoin, l’utilisateur de ce rechargement de page avec un message de type « Chargement en cours, veuillez patientez » sur lequel on met le focus, si il y a perte de contexte.
  2. Au rechargement, mettre le focus, sur le contenu généré ou, lors d’une disparition, sur l’élément déclenchant (s’il existe toujours après rechargement) ou positionner le focus juste avant la partie qui a été enlevée.
  3. S’assurer que le parcours du focus est demeuré logique et séquentiel après apparition/disparition de contenu.

Contenu dynamique généré par une action utilisateur sans rechargement de page (asynchrone)

C’est le cas le plus fréquent : la page n’est pas rechargée, seul le DOM est modifié par addition ou suppression de contenu lors d’une action utilisateur (par exemple, affichage des résultats d’un moteur de recherche, apparition d’une popin…).

Addition de contenu

  1. Prévenir, si besoin, l’utilisateur de l’apparition de contenu (par exemple, pour un sous-menu à déplier, on peut ajouter un texte « déplier » et mettre une propriété aria-haspopup). Si ce contenu est susceptible de disparaître (popin, par exemple), garder en mémoire l’élément déclenchant l’apparition pour y remettre le focus lors de la disparition.
  2. Le nouveau contenu doit apparaître dans le code source juste après l’élément déclenchant (exemple : menu dépliant),
  3. Le focus doit être déplacé sur un des premiers éléments du nouveau contenu qui est apparu (le container, un titre, un lien, un bouton…).

Disparition de contenu

  1. Prévenir si besoin l’utilisateur avant qu’il ne déclenche cette disparition,
  2. Le focus doit être redonné à l’élément déclenchant ou, si c’est impossible, positionner le focus juste avant le contenu qui a disparu. Par exemple, à la fermeture d’une boîte de dialogue, le focus doit être repositionné sur l’élément qui a déclenché l’ouverture (bouton, lien, …).

Dans tous les cas, s’assurer que le parcours du focus est demeuré logique et séquentiel après apparition/disparition de contenu.

Avertir l'utilisateur de la modification du contenu

C'est le principal problème posé à tout utilisateur, et en particulier les personnes déficientes visuelles, cognitives ou avec un trouble de l’attention ou sur des petits écrans.

L'utilisateur doit pouvoir repérer l’apparition ou la disparition de contenu et d’interagir avec ceux-ci, si besoin.
Il faut donc prévenir l’utilisateur, et pour cela, il existe plusieurs solutions en cas de modification de contenu :

  • En fournissant à l'utilisateur un texte informatif,
  • En gérant le déplacement du focus,
  • En utilisant de l’ARIA.

Voir l’exemple de menu déroulant pour la mise en pratique de l’attribut aria-haspopup.

Cas de l'attribut Tabindex

Il faut, autant que possible, ne pas redéfinir l'ordre de lecture en utilisant des attributs tabindex (avec des valeurs positives).

En pratique, l’attribut tabindex ne devrait être utilisé qu’avec deux valeurs :

  • tabindex="-1" : pour interdire à un élément de recevoir le focus via la touche TAB et l’autoriser à recevoir le focus via Javascript.
  • tabindex="0" : pour rendre un élément focusable via la touche TAB et via Javascript.

Cas particulier d’une modification dynamique d’une iframe

Lorsqu’une iframe est mise à jour dynamiquement par une action utilisateur, il faut :

  • Informer l’utilisateur de cette mise à jour et mettre à jour l’attribut title pour informer l’utilisateur de cette mise à jour.
  • Si besoin (l’utilisateur doit avoir accès à l’iframe modifié immédiatement après l’action ayant abouti à la mise à jour), il faut mettre le focus sur la balise iframe.
  • S’assurer que le parcours du focus reste logique et séquentiel dans la page comme à l’intérieur de l’iframe.