update gestion dynamique du focus

src/fr/articles/gestion-dynamique-du-focus/index.njk

@@ -3,6 +3,7 @@ title: "Gestion dynamique du focus"
 abstract: "Gestion du focus des zones qui se mettent à jour dynamiquement dans vos pages."
 titleBeforeTag: true
 date: "2018-01-18"
+updateDate: "2025-07-16"
 tags:
   - component
 css:
@@ -19,54 +20,54 @@ js:
 	<li>Cas particulier&nbsp;: les <code>iframes</code> dynamiques </li>
 </ul>
 
-<h2>Contenu généré par une action utilisateur avec rechargement de page</h2>
-<p>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. </p>
-<h3>Apparition de contenu</h3>
-<p>Donc, s’il n’y a aucun moyen de faire du chargement asynchrone, il faut pour le moins&nbsp;:</p>
+<h2>Contenu généré par une action utilisateur avec rechargement complet de page</h2>
+<p>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.</p>
+
+<p>S’il n’y a aucun moyen de faire du chargement asynchrone, il faut au moins&nbsp;:</p>
 <ol>
-<li>Prévenir, si besoin, l’utilisateur de ce rechargement de page avec un message de type «&nbsp;Chargement en cours, veuillez patientez&nbsp;» sur lequel on met le focus, si il y a perte de contexte.</li>
-<li>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.</li>
-<li> S’assurer que le parcours du focus est demeuré logique et séquentiel après apparition/disparition de contenu.</li>
+<li>Prévenir l’utilisateur de ce rechargement de page avec un message de type «&nbsp;Chargement en cours, veuillez patientez&nbsp;» (on peut, par exemple, placer le focus sur le message, utiliser role="alert", aria-busy ou aria-live...) pour éviter la perte de contexte.</li>
+<li>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é.</li>
+<li>S’assurer que le parcours du focus reste logique et séquentiel après l'apparition ou la disparition du contenu.</li>
 </ol>
 
 <h2>Contenu dynamique généré par une action utilisateur sans rechargement de page (asynchrone)</h2>
-<p>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…).</p>
-<h3>Addition de contenu</h3>
+<p>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).</p>
+<h3>Gestion de l’ajout de contenu</h3>
 <ol>
-<li>Prévenir, si besoin, l’utilisateur de l’apparition de contenu (par exemple, pour un sous-menu à déplier, on peut ajouter un texte «&nbsp;déplier&nbsp;» et mettre une propriété <code>aria-haspopup</code>). 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.</li>
-<li>Le nouveau contenu doit apparaître dans le code source juste après l’élément déclenchant (exemple&nbsp;: menu dépliant),</li>
-<li>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…).</li>
+<li>Prévenir l’utilisateur de l’apparition de contenu (par exemple, pour un sous-menu à déplier, on peut ajouter un texte «&nbsp;déplier&nbsp;» et mettre une propriété <code>aria-expanded</code> à "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.</li>
+<li>Bonne pratique : insérer le nouveau contenu juste après l’élément déclencheur dans le code source (exemple&nbsp;: menu dépliant),</li>
+<li>Déplacer le focus sur un élément pertinent du nouveau contenu (le container, un titre, un lien, un bouton…).</li>
 </ol>
-<h3>Disparition de contenu</h3>
+<h3>Gestion de la disparition de contenu</h3>
 <ol>
-<li>Prévenir si besoin l’utilisateur avant qu’il ne déclenche cette disparition,</li>
-<li>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, …).</li>
+<li>Prévenir, si besoin, l’utilisateur avant qu’il ne déclenche cette disparition,</li>
+<li>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).</li>
 </ol>
 <p>
 <strong>Dans tous les cas, s’assurer que le parcours du focus est demeuré logique et séquentiel après apparition/disparition de contenu.</strong>
 </p>
 <h3>Avertir l'utilisateur de la modification du contenu</h3>
 
-<p>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. </p>
-<p>L'utilisateur doit pouvoir repérer l’apparition ou la disparition de contenu et d’interagir avec ceux-ci, si besoin. <br />Il faut donc prévenir l’utilisateur, et pour cela, il existe plusieurs solutions en cas de modification de contenu&nbsp;:</p>
-<ul><li>En fournissant à l'utilisateur un texte informatif,</li>
-<li>En gérant le déplacement du focus,</li>
-<li>En utilisant de l’<abbr>ARIA</abbr>.</li></ul>
+<p>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. </p>
+<p>L'utilisateur doit pouvoir repérer l’apparition ou la disparition de contenu et d’interagir avec celui-ci, si besoin. <br />Il faut donc prévenir l’utilisateur, et pour cela, il existe plusieurs solutions&nbsp;:</p>
+<ul><li>Fournir à l'utilisateur un texte explicatif,</li>
+<li>Gérer le déplacement du focus,</li>
+<li>Utiliser les rôles <abbr>ARIA</abbr>.</li></ul>
 
-<p>Voir <a href="../menu-deroulant/">l’exemple de menu déroulant</a> pour la mise en pratique de l’attribut <code>aria-haspopup</code>.</p>
+<p>Voir <a href="../menu-deroulant/">l’exemple de menu déroulant</a> pour la mise en pratique de l’attribut <code>aria-expanded</code>.</p>
 
-<h3>Cas de l'attribut <code>Tabindex</code></h3>
-<p>Il faut, autant que possible, ne pas redéfinir l'ordre de lecture en utilisant des attributs <code>tabindex</code> (avec des valeurs positives).</p>
+<h3>Cas de l'attribut <code>tabindex</code></h3>
+<p>Il faut, autant que possible, ne pas redéfinir l'ordre de lecture en utilisant des attributs <code>tabindex</code>.</p>
 <p>
-En pratique, l’attribut <code>tabindex</code> ne devrait être utilisé qu’avec deux valeurs&nbsp;:</p>
+<p>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&nbsp;:</p>
 <ul>
-<li><code>tabindex="-1"</code>&nbsp;: pour interdire à un élément de recevoir le focus via la touche <kbd>TAB</kbd> et l’autoriser à recevoir le focus via Javascript.</li>
-<li><code>tabindex="0"</code>&nbsp;: pour rendre un élément focusable via la touche <kbd>TAB</kbd> et via Javascript.</li>
+<li><code>tabindex="-1"</code>&nbsp;: pour interdire à un élément de recevoir le focus via la touche <kbd>tab</kbd> et l’autoriser à recevoir le focus via JavaScript (<a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/focus">méthode JavaScript focus()</a>).</li>
+<li><code>tabindex="0"</code>&nbsp;: pour rendre un élément non-focusable nativement focusable via la touche <kbd>tab</kbd> et via JavaScript.</li>
 </ul>	  
 <h2>Cas particulier d’une modification dynamique d’une <code>iframe</code></h2>
 <p>Lorsqu’une <code>iframe</code> est mise à jour dynamiquement par une action utilisateur, il faut&nbsp;:</p>
 <ul>
-<li>Informer l’utilisateur de cette mise à jour et mettre à jour l’attribut <code>title</code> pour informer l’utilisateur de cette mise à jour. </li>
-<li> Si besoin (l’utilisateur doit avoir accès à l’<code>iframe</code> modifié immédiatement après l’action ayant abouti à la mise à jour), il faut mettre le focus sur la balise <code>iframe</code>.</li>
-<li> S’assurer que le parcours du focus reste logique et séquentiel dans la page comme à l’intérieur de l’<code>iframe</code>.</li>
+<li>Mettre à jour l’attribut <code>title</code> pour indiquer la modification à l’utilisateur. </li>
+<li>Si besoin, (l’utilisateur doit avoir accès à l’<code>iframe</code> modifiée immédiatement après l’action ayant abouti à la mise à jour), il faut mettre le focus sur la balise <code>iframe</code>.</li>
+<li>S’assurer que le parcours du focus reste logique et séquentiel dans la page comme à l’intérieur de l’<code>iframe</code>.</li>
 </ul>