click-handler-keyboard-operable

Los manejadores de clic en elementos que no son controles nativos deben funcionar con el teclado

Comprueba que un elemento que no es un control nativo y tiene un manejador de clic (un onclick en línea, o un listener de clic que vio el hook de listeners) puede recibir el foco del teclado y que un manejador de teclas en él, en un ancestro o en un descendiente recibe sus teclas, para que un usuario de teclado pueda ejecutar lo que ejecuta un clic.

Ámbito de aplicación. Elementos que la página renderiza con un atributo onclick en línea no vacío o, donde la página ejecuta el hook de listeners (listenerHookScript), con un listener de clic añadido desde un script (addEventListener('click', …) o la propiedad onclick) en el propio elemento, salvo:

• <html> y <body>, donde un manejador de clic sirve a toda la página;
• un manejador formado solo por instrucciones que no hacen nada (return false, void(0), void 0, event.preventDefault()): no ofrece ninguna función;
• un elemento con aria-disabled="true", en sí mismo o en un ancestro: un control deshabilitado no ofrece ninguna función que operar;
• los controles nativos, cuyo propio comportamiento de teclado llega al usuario: un enlace o area con href, button, input que no sea hidden, select, textarea, option, summary, label (activa su control, que recibe el foco por sí mismo), iframe, embed, audio o video con controls, y un anfitrión de edición (contenteditable);
• un elemento que contiene, en el árbol plano (su shadow root y el contenido asignado a slots incluidos), un control cuya activación con el teclado dispara click (un enlace o area con href, button, summary, o un input de tipo button, submit, reset, image, checkbox o radio) que está en el orden de tabulación: el clic del control se propaga hasta el manejador, así que es delegación de eventos y el teclado ya lo ejecuta;
• un elemento que no puede recibir el foco, no tiene ningún descendiente que pueda, no tiene rol de widget ni cursor: pointer: nada indica al usuario que se puede hacer clic en él, y un manejador así a menudo solo registra los clics o detiene su propagación.

Resultado esperado. Un usuario de teclado puede ejecutar lo que ejecuta el clic. Chromium dispara click con Intro o Espacio solo en los controles nativos: un <span role="button" tabindex="0" onclick> recibe el foco pero no hace nada con ninguna de las dos teclas.

• El elemento, o uno de sus descendientes del árbol plano, está en el orden de tabulación, y hay un manejador de teclas en línea (onkeydown, onkeyup, onkeypress) en él, en un ancestro o en un descendiente, de modo que los eventos de teclado del elemento con el foco pueden llegar a uno: pass.
• El elemento o un descendiente está en el orden de tabulación, pero no hay ningún manejador de teclas en línea: cantTell (CLICK_HANDLER_NO_KEY_HANDLER); compruebe que Intro y Espacio hacen lo mismo que un clic.
• El elemento o un descendiente puede recibir el foco, pero solo con tabindex="-1", y ningún ancestro tiene un manejador de teclas: cantTell (CLICK_HANDLER_NOT_IN_TAB_ORDER). Tab nunca llega a él; un script puede mover el foco ahí, como hace un tabindex itinerante (roving tabindex).
• Con el hook de listeners, un listener de teclado añadido desde un script en el elemento o en un descendiente cuenta como un manejador de teclas en línea. Uno que está solo en un ancestro, en un shadow root en el que está el elemento, en el documento o en la ventana puede gestionar las teclas del elemento o solo las de otros: cantTell (CLICK_HANDLER_KEY_LISTENER_ABOVE).
• El elemento está en el orden de tabulación, su rol es button, link, checkbox, switch, tab, menuitem, menuitemcheckbox o menuitemradio, y un hook instalado antes de los scripts de la página no vio ningún listener de teclado en él, en un descendiente, en un ancestro, en un shadow root en el que está, en el documento ni en la ventana, ni hay ahí un manejador de teclas en línea: fail (CLICK_HANDLER_NO_KEY_LISTENER). Ningún evento de teclado llega a un manejador, así que Intro y Espacio no hacen nada. Salvo que haya un listener de focus o focusin en él, en un ancestro, en un shadow root en el que está, en el documento o en la ventana: puede añadir el listener de teclado una vez que el elemento tiene el foco o, en una pestaña, mostrar su panel al recibir el foco, así que cantTell (CLICK_HANDLER_FOCUS_LISTENER).
• Ni él ni ningún descendiente puede recibir el foco, y su rol es button, link, checkbox o switch: fail (CLICK_HANDLER_CONTROL_NOT_FOCUSABLE). El elemento dice que es un control, y Tab nunca llega a él, como en el fallo F42 de WCAG para los enlaces generados por script. Salvo que un ancestro lleve aria-activedescendant o un manejador de teclas en línea, o sea un widget compuesto enfocable (grid, treegrid, listbox, menu, menubar, tree, tablist, toolbar, radiogroup, combobox), que puede operarlo sin moverle el foco: entonces cantTell.
• Ni él ni ningún descendiente puede recibir el foco, con otro rol de widget o cursor: pointer: cantTell (CLICK_HANDLER_NOT_FOCUSABLE). Una opción de la lista de un combobox o una celda de un grid se suele operar desde el elemento que conserva el foco, y la acción puede ofrecerla otro control de la página.

Ejemplos

<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>

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

Ver código fuente