mouse-only-event-handlers
Les gestionnaires d’événements propres au pointeur devraient avoir un équivalent utilisable au clavier
Signale, pour une revue manuelle, les éléments dotés d’un gestionnaire d’événements propre au pointeur (onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onmousemove, onmouseenter, onmouseleave), en ligne ou, avec le hook d’écouteurs, ajouté par script, sans équivalent utilisable au clavier (onkeydown/onkeyup/onkeypress/onfocus/onblur).
Applicabilité. Éléments portant au moins un attribut de gestionnaire d’événements en ligne propre au pointeur (onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onmousemove, onmouseenter, onmouseleave) de valeur non vide ou, lorsque la page exécute le hook d’écouteurs (listenerHookScript), un écouteur de l’un de ces types ajouté par script (addEventListener ou la propriété on…), qui sont aussi éligibles et atteignables (ni masqués, ni aria-hidden, ni display:none).
Attendu. L’élément porte aussi au moins un gestionnaire en ligne atteignable au clavier : onkeydown, onkeyup, onkeypress (les équivalents directs en événements clavier), ou onfocus/onblur (le substitut standard d’un comportement déclenché au survol : focus/blur sont l’équivalent navigable au clavier de mouseover/mouseout, selon la technique WCAG G90). Un gestionnaire n’est atteignable que si les événements clavier peuvent l’atteindre : onfocus/onblur lorsque l’élément lui-même peut recevoir le focus, et un gestionnaire de touches lorsque l’élément ou l’un de ses descendants le peut (les événements de touches remontent, les événements de focus non). Sinon, le comportement de l’élément piloté à la souris (une infobulle au survol, une liste déroulante personnalisée, une interaction de glisser) ne peut pas être déclenché par une personne qui n’utilise que le clavier, et il est signalé avec un motif qui précise si les gestionnaires clavier manquent ou ne peuvent pas s’exécuter. Avec le hook d’écouteurs, un écouteur de touche, de focus ou de blur ajouté par script sur l’élément compte comme le gestionnaire en ligne correspondant, de même que les écouteurs focusin/focusout, qui, comme les événements de touches, se déclenchent aussi pour un descendant qui a le focus.
Ce que rapporte un constat.
mouseAttrs: les gestionnaires réservés au pointeur dont dispose l’élément. Un élément est un nom d’attribut, commeonmouseover; un écouteur ajouté par script est nommé comme l’attribut de son type.keyboardAttrs(gestionnaires qui ne peuvent pas s’exécuter,MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE) : les attributs de gestionnaire clavier que porte l’élément, que les événements clavier ne peuvent pas atteindre. Un élément est un nom d’attribut, commeonfocus.
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
<div onmouseover="show()" onmouseout="hide()">Hover-only tooltip trigger</div>
onmouseover/onmouseout n’ont pas d’équivalent onfocus/onblur : un utilisateur au clavier ne peut jamais déclencher ce comportement.
<div onmouseover="show()" onfocus="show()">Menu</div>
Le gestionnaire onfocus ne s’exécute jamais : le <div> ne peut pas recevoir le focus.
<div onmouseover="show()" onmouseout="hide()" onfocus="show()" onblur="hide()" tabindex="0">Hover + focus pair</div>
Chaque gestionnaire souris est associé à un gestionnaire de focus équivalent au clavier.
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.
MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE
- Repérez l’élément indiqué par le rapport et notez ce que font ses gestionnaires de souris en le survolant ou en cliquant dessus.
- Parcourez cette partie de la page avec Tab et observez si le focus arrive un jour sur l’élément ou sur quelque chose qu’il contient.
- Si c’est le cas, essayez Entrée, Espace et les touches fléchées et comparez avec ce qu’a fait la souris.
- Si le clavier ne permet pas de le faire ici, vérifiez si ce que fait la souris peut être fait autrement au clavier seul, par exemple avec un bouton ou une option de menu ailleurs dans la page. Cela ne compte que si cela fait tout ce que fait la souris.
Réussite. L’élément (ou un élément qu’il contient) reçoit le focus clavier et ses gestionnaires de clavier ou de focus donnent le même résultat que la souris, ou ce que fait la souris peut être fait autrement au clavier seul, ou l’action de la souris est seulement visuelle.
Échec. Le focus n’atteint jamais l’élément et ce que fait la souris ne peut pas être fait autrement au clavier, ce qui ne respecte pas le critère WCAG 2.1.1 (F54).
MOUSE_ONLY_HANDLER_NO_KEYBOARD_EQUIVALENT
- Repérez l’élément indiqué par le rapport et notez ses gestionnaires de souris (comme onmouseover ou ondblclick).
- Survolez-le, cliquez ou double-cliquez dessus à la souris et notez ce qui se passe (un menu s’ouvre, une info-bulle s’affiche, un élément se déplace).
- Rechargez la page, puis n’utilisez que le clavier : atteignez l’élément (ou le contrôle qui l’entoure) avec Tab et essayez Entrée, Espace, les touches fléchées et Échap.
- Vérifiez si le même résultat se produit, ou si la même fonction est proposée par un autre contrôle accessible au clavier.
Réussite. L’action à la souris n’ajoute qu’un effet visuel, ou le clavier obtient le même résultat au focus ou avec une touche.
Échec. Une chose que fait la souris (ouvrir un menu, afficher une information, déplacer un élément) ne peut pas être faite au clavier, ce qui ne respecte pas le critère WCAG 2.1.1 (F54).