Gestion dynamique du focus

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 complet de page

Ce cas concerne les situations où une action utilisateur entraîne le rechargement complet de la page pour modifier une partie du contenu. Bien que cela puisse sembler simple, cette méthode présente plusieurs inconvénients, notamment la perte de contexte et une expérience moins fluide.

S’il n’y a aucun moyen de faire du chargement asynchrone, il faut au moins :

1. Prévenir l’utilisateur de ce rechargement de page avec un message de type « Chargement en cours, veuillez patientez » (on peut, par exemple, placer le focus sur le message, utiliser role="alert", aria-busy ou aria-live...) pour éviter la perte de contexte.
2. Au rechargement, placer le focus sur le contenu généré ou, lors d’une disparition de contenu, sur l’élément déclenchant (s’il existe toujours après rechargement) ou bien positionner le focus juste avant le contenu qui a été retiré.
3. S’assurer que le parcours du focus reste logique et séquentiel après l'apparition ou la disparition du contenu.

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

Ce cas est le plus courant : seul le DOM est modifié par addition ou suppression du contenu lors d’une action utilisateur sans recharger la page entière (par exemple, affichage des résultats d’un moteur de recherche, apparition d’une modale).

Gestion de l’ajout de contenu

1. Prévenir 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-expanded à "true"). Si ce contenu est susceptible de disparaître (popin, par exemple), garder en mémoire l’élément déclenchant l’apparition pour lui redonner le focus lors de la disparition.
2. Bonne pratique : insérer le nouveau contenu juste après l’élément déclencheur dans le code source (exemple : menu dépliant),
3. Déplacer le focus sur un élément pertinent du nouveau contenu (le container, un titre, un lien, un bouton…).

Gestion de la disparition de contenu

1. Prévenir, si besoin, l’utilisateur avant qu’il ne déclenche cette disparition,
2. Redonner le focus à l’élément déclencheur ou, si c'est impossible, juste avant le contenu 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).

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 une précaution à prendre pour tout utilisateur, et en particulier aux personnes déficientes visuelles, cognitives ou avec un trouble de l’attention.

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

• Fournir à l'utilisateur un texte explicatif,
• Gérer le déplacement du focus,
• Utiliser les rôles ARIA.

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

Cas de l'attribut tabindex

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

Si l’élément auquel vous transférez le focus n’est pas un élément interactif (titre, liste, texte, etc.), vous devrez utiliser l’une de ces deux méthodes :

• tabindex="-1" : pour interdire à un élément de recevoir le focus via la touche tab et l’autoriser à recevoir le focus via JavaScript (méthode JavaScript focus()).
• tabindex="0" : pour rendre focusable un élément non-nativement 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 :

• Mettre à jour l’attribut title pour indiquer la modification à l’utilisateur.
• Si besoin, (l’utilisateur doit avoir accès à l’iframe modifiée 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.