Français
Menu du site

focus-not-removed-by-script

Un script ne doit pas retirer le focus d’un élément au moment où il le reçoit

automaticWCAG 2.1.1, 2.4.7 (AA)confiance : mediumgravité : seriousoperable

Fait échouer les éléments de l’ordre de tabulation dont le gestionnaire onfocus en ligne ne fait qu’appeler blur() sur eux, et pose une question pour les autres gestionnaires qui appellent blur(), ou focus() sur un autre élément, ce qui peut retirer le focus dès que l’élément le reçoit (échec WCAG F55).

Applicabilité. Éléments qui peuvent recevoir le focus, que la page affiche, et dont le gestionnaire onfocus en ligne appelle blur(), ou focus() sur un autre élément. Sans un tel élément, ou dans un document où aucun ne peut recevoir le focus, rien n’est applicable.

Attendu. Échec WCAG F55 : un script qui retire le focus d’un élément lorsqu’il le reçoit empêche une personne qui utilise le clavier de l’atteindre ou de l’actionner, et de voir où se trouve le focus.

  • FOCUS_HANDLER_BLURS_SELF : fail, sur un élément de l’ordre de tabulation, lorsque le gestionnaire ne fait que cela (this.blur(), blur(), ou blur() sur event.target ou event.currentTarget, par nom ou entre crochets, éventuellement derrière if (this.blur), avec tout au plus un return), comme le font les exemples de F55. Le focus ne va nulle part : il est abandonné, pas envoyé ailleurs. Hors de l’ordre de tabulation (tabindex="-1"), là où une personne qui utilise le clavier ne l’atteint pas, il donne lieu à une question.

Chaque autre élément donne lieu à une question (cantTell) :

  • FOCUS_HANDLER_CALLS_BLUR lorsqu’il appelle blur() parmi d’autres instructions, ou sur un autre élément, où la perte du focus dépend du script ;
  • FOCUS_HANDLER_MOVES_FOCUS lorsqu’il appelle focus() sur un autre élément (document.body.focus()), ce qui retire le focus au moment où il arrive, comme le vérifie le test de F55.

Un gestionnaire qui envoie le focus ailleurs (une sentinelle de piège à focus, une redirection) relève du cas du déplacement et donne lieu à une question, jamais à un échec : la règle lit le texte du gestionnaire, pas ce que fait la page, et une personne peut le confirmer en atteignant l’élément avec la touche Tab.

Ce que rapporte un constat.

  • reasonCode : FOCUS_HANDLER_BLURS_SELF, FOCUS_HANDLER_CALLS_BLUR ou FOCUS_HANDLER_MOVES_FOCUS.
  • handler : la valeur de l’attribut onfocus, espaces fusionnés, jusqu’à 120 caractères ; une valeur plus longue est coupée et se termine par ….
  • tabbable : si l’élément est dans l’ordre de tabulation. Un élément qui ne l’est pas peut quand même recevoir le focus par un clic ou un script.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

fail
<a href="/offers" onfocus="this.blur()">Offers</a>

Le lien se retire le focus dès qu’il le reçoit, l’exemple même de l’échec WCAG F55 : une personne qui utilise le clavier ne peut pas rester dessus pour le suivre.

can't tell
<button type="button" onfocus="if (locked) this.blur(); track('focus')">Send</button>

Le gestionnaire appelle blur() parmi d’autres instructions : la perte du focus dépend donc du script.

n/a
<span onfocus="this.blur()">Label</span>

Le <span> ne peut pas recevoir le focus, son gestionnaire ne s’exécute donc jamais.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

FOCUS_HANDLER_BLURS_SELF

  1. Cliquez juste avant l’élément indiqué par le rapport, puis appuyez sur Tab jusqu’au moment où le focus devrait l’atteindre (s’il n’est pas dans l’ordre de tabulation, cliquez plutôt dessus).
  2. Observez l’indicateur de focus et, dans la console des outils de développement, vérifiez document.activeElement.
  3. Appuyez encore une fois sur Tab et voyez où va le focus.

Réussite. Le focus reste sur l’élément, son indicateur de focus s’affiche, et la touche Tab suivante passe au contrôle suivant.

Échec. Le focus disparaît de l’élément dès qu’il y arrive : il ne peut donc pas être atteint ni actionné au clavier, ce qui ne respecte pas les critères WCAG 2.1.1 et 2.4.7 (F55).

FOCUS_HANDLER_CALLS_BLUR

  1. Lisez le gestionnaire onfocus cité par le rapport et notez quand il appelle blur() et sur quel élément.
  2. Cliquez juste avant l’élément, puis appuyez sur Tab jusqu’au moment où le focus devrait l’atteindre ; recommencez dans chaque état que teste le gestionnaire (par exemple un champ rempli ou vide).
  3. Observez l’indicateur de focus et vérifiez document.activeElement dans la console des outils de développement.
  4. Essayez d’actionner l’élément au clavier (saisie, Entrée ou Espace).

Réussite. Dans chaque état, le focus reste sur l’élément, son indicateur de focus s’affiche et il peut être actionné au clavier.

Échec. Dans un des états, le focus est retiré au moment où l’élément le reçoit : il ne peut donc pas être actionné au clavier ou le focus disparaît de la vue, ce qui ne respecte pas les critères WCAG 2.1.1 et 2.4.7 (F55).

FOCUS_HANDLER_MOVES_FOCUS

  1. Lisez le gestionnaire onfocus cité par le rapport et notez vers quel élément il envoie le focus.
  2. Cliquez juste avant l’élément, puis appuyez sur Tab jusqu’au moment où le focus devrait l’atteindre, et voyez où il arrive (vérifiez document.activeElement dans la console).
  3. Si l’élément est une sentinelle invisible et sans nom au bord d’une boîte de dialogue qui renvoie le focus à l’intérieur, notez qu’il s’agit d’un piège à focus attendu pour une fenêtre modale.
  4. Sinon, essayez d’actionner l’élément au clavier et appuyez sur Maj+Tab pour voir si vous pouvez revenir en arrière.

Réussite. Le focus va à un endroit logique (le bouclage du focus d’une boîte de dialogue) ou reste sur l’élément, et chaque contrôle peut toujours être atteint et actionné au clavier.

Échec. Un contrôle visible envoie le focus ailleurs dès qu’il y arrive : il ne peut donc pas être atteint ni actionné au clavier, ce qui ne respecte pas les critères WCAG 2.1.1 et 2.4.7 (F55).

Voir le code source