click-handler-keyboard-operable

Les gestionnaires de clic sur des éléments qui ne sont pas des contrôles natifs doivent fonctionner au clavier

Vérifie qu’un élément qui n’est pas un contrôle natif et qui a un gestionnaire de clic (un onclick en ligne, ou un écouteur de clic qu’a vu le hook d’écouteurs) peut recevoir le focus clavier et qu’un gestionnaire de touches sur lui, sur un ancêtre ou sur un descendant reçoit ses touches, pour qu’une personne qui utilise le clavier puisse exécuter ce qu’exécute un clic.

Applicabilité. Éléments que la page affiche, dotés d’un attribut onclick en ligne non vide ou, lorsque la page exécute le hook d’écouteurs (listenerHookScript), d’un écouteur de clic ajouté par script (addEventListener('click', …) ou la propriété onclick) sur l’élément lui-même, sauf :

• <html> et <body>, où un gestionnaire de clic sert la page entière ;
• un gestionnaire composé uniquement d’instructions qui ne font rien (return false, void(0), void 0, event.preventDefault()) : il n’offre aucune fonction ;
• un élément doté de aria-disabled="true", sur lui-même ou un ancêtre : un contrôle désactivé n’offre aucune fonction à actionner ;
• les contrôles natifs, dont le comportement clavier propre est à la disposition de l’utilisateur : un lien ou un area avec href, button, input autre que hidden, select, textarea, option, summary, label (il active son contrôle, qui reçoit lui-même le focus), iframe, embed, audio ou video avec controls, et un hôte d’édition (contenteditable) ;
• un élément qui contient, dans l’arbre aplati (sa shadow root et son contenu inséré par slot compris), un contrôle dont l’activation au clavier déclenche click (un lien ou un area avec href, button, summary, ou un input de type button, submit, reset, image, checkbox ou radio) présent dans l’ordre de tabulation : le clic du contrôle remonte jusqu’au gestionnaire, il s’agit donc d’une délégation d’événements et le clavier l’exécute déjà ;
• un élément qui ne peut pas recevoir le focus, n’a aucun descendant qui le peut, n’a ni rôle de widget ni cursor: pointer : rien n’indique à l’utilisateur qu’il est cliquable, et un tel gestionnaire ne fait souvent que suivre les clics ou arrêter leur propagation.

Attendu. Une personne qui utilise le clavier peut exécuter ce qu’exécute le clic. Chromium ne déclenche click sur Entrée ou Espace que pour les contrôles natifs : un <span role="button" tabindex="0" onclick> reçoit le focus mais ne fait rien avec l’une ou l’autre touche.

• L’élément, ou l’un de ses descendants dans l’arbre aplati, est dans l’ordre de tabulation, et un gestionnaire de touches en ligne (onkeydown, onkeyup, onkeypress) se trouve sur lui, sur un ancêtre ou sur un descendant, de sorte que les événements de touches de l’élément qui a le focus peuvent en atteindre un : pass.
• L’élément ou un descendant est dans l’ordre de tabulation, mais aucun gestionnaire de touches en ligne ne s’y trouve : cantTell (CLICK_HANDLER_NO_KEY_HANDLER), vérifier qu’Entrée et Espace font ce que fait un clic.
• L’élément ou un descendant peut recevoir le focus, mais seulement avec tabindex="-1", et aucun ancêtre n’a de gestionnaire de touches : cantTell (CLICK_HANDLER_NOT_IN_TAB_ORDER). La touche Tab ne l’atteint jamais ; un script peut y déplacer le focus, comme le fait un tabindex itinérant (roving tabindex).
• Avec le hook d’écouteurs, un écouteur de touches ajouté par script sur l’élément ou un descendant compte comme un gestionnaire de touches en ligne. S’il ne se trouve que sur un ancêtre, une shadow root dans laquelle se trouve l’élément, le document ou la fenêtre, il peut traiter les touches de l’élément ou seulement celles d’autres éléments : cantTell (CLICK_HANDLER_KEY_LISTENER_ABOVE).
• L’élément est dans l’ordre de tabulation, son rôle est button, link, checkbox, switch, tab, menuitem, menuitemcheckbox ou menuitemradio, et un hook installé avant les scripts de la page n’a vu aucun écouteur de touches sur lui, un descendant, un ancêtre, une shadow root dans laquelle il se trouve, le document ou la fenêtre, et aucun gestionnaire de touches en ligne ne s’y trouve non plus : fail (CLICK_HANDLER_NO_KEY_LISTENER). Aucun événement de touche n’atteint de gestionnaire, si bien qu’Entrée et Espace ne font rien. Sauf si un écouteur focus ou focusin se trouve sur lui, un ancêtre, une shadow root dans laquelle il se trouve, le document ou la fenêtre : il peut ajouter l’écouteur de touches une fois que l’élément a le focus ou, pour un onglet, afficher son panneau au focus ; d’où cantTell (CLICK_HANDLER_FOCUS_LISTENER).
• Ni lui ni aucun descendant ne peut recevoir le focus, et son rôle est button, link, checkbox ou switch : fail (CLICK_HANDLER_CONTROL_NOT_FOCUSABLE). L’élément se présente comme un contrôle, et la touche Tab ne l’atteint jamais, comme dans l’échec WCAG F42 pour les liens scriptés. Sauf si un ancêtre porte aria-activedescendant ou un gestionnaire de touches en ligne, ou est un widget composite focalisable (grid, treegrid, listbox, menu, menubar, tree, tablist, toolbar, radiogroup, combobox), qui peut l’actionner sans y déplacer le focus : alors cantTell.
• Ni lui ni aucun descendant ne peut recevoir le focus, avec un autre rôle de widget ou cursor: pointer : cantTell (CLICK_HANDLER_NOT_FOCUSABLE). Une option de la liste d’un combobox ou une cellule d’un grid est souvent actionnée depuis l’élément qui garde le focus, et l’action peut être proposée par un autre contrôle de la page.

Exemples

<span role="button" tabindex="0" onclick="save()" onkeydown="if (event.key === 'Enter' || event.key === ' ') save()">Save</span>

<div role="button" onclick="openPanel()">Open the panel</div>

<span role="button" tabindex="0" onclick="showPreferences()">Manage my cookies</span>

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.

Voir le code source