Gérer le focus pour du contenu dynamiquement généré

Introduction

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

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 tout les cas un chargement asynchrone aurait été bien plus efficace.
Donc, s’il n’y a aucun moyen de faire du chargement asynchrone, il faut pour le moins :

  1. Prévenir 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…).
Pour rendre accessible ce type de contenu :

Cas particulier d’une modification dynamique d’une iframe

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