diff --git a/src/fr/articles/gestion-dynamique-du-focus/index.njk b/src/fr/articles/gestion-dynamique-du-focus/index.njk index e90a9e6378..2748bcde16 100644 --- a/src/fr/articles/gestion-dynamique-du-focus/index.njk +++ b/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:
  • 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 :

    +

    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, 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. -
    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. -
    3. S’assurer que le parcours du focus est demeuré logique et séquentiel après apparition/disparition de contenu.
      4. +
    4. 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.
      5. +
    5. 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é.
      6. +
    6. 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)

    -

    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

    +

    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, 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. -
    2. Le nouveau contenu doit apparaître dans le code source juste après l’élément déclenchant (exemple : menu dépliant),
      3. -
    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…).
      4. +
    4. 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.
      5. +
    5. Bonne pratique : insérer le nouveau contenu juste après l’élément déclencheur dans le code source (exemple : menu dépliant),
      6. +
    6. Déplacer le focus sur un élément pertinent du nouveau contenu (le container, un titre, un lien, un bouton…).
    -

    Disparition de contenu

    +

    Gestion de la disparition de contenu

      -
    1. Prévenir si besoin l’utilisateur avant qu’il ne déclenche cette disparition,
      2. -
    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, …).
      3. +
    3. Prévenir, si besoin, l’utilisateur avant qu’il ne déclenche cette disparition,
      4. +
    4. 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 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 :

    - +

    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 :

    + -

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

    +

    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 (avec des valeurs positives).

    +

    Cas de l'attribut tabindex

    +

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

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

    +

    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 :

    Cas particulier d’une modification dynamique d’une iframe

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