mouse-only-event-handlers
Los manejadores de eventos exclusivos de puntero deberían tener un equivalente accesible por teclado
Marca elementos con un manejador de eventos exclusivo de puntero (onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onmousemove, onmouseenter, onmouseleave), en línea o, con el hook de listeners, añadido desde un script, y sin un equivalente accesible por teclado (onkeydown/onkeyup/onkeypress/onfocus/onblur), para revisión manual.
Ámbito de aplicación. Elementos que llevan al menos un atributo manejador de eventos en línea exclusivo de puntero (onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onmousemove, onmouseenter, onmouseleave) con un valor no vacío, o, donde la página ejecuta el hook de listeners (listenerHookScript), un listener de uno de esos tipos añadido desde un script (addEventListener o la propiedad on…), y que también son elegibles/alcanzables (no ocultos/aria-hidden/display:none).
Resultado esperado. El elemento también tiene al menos un manejador en línea alcanzable con el teclado: onkeydown, onkeyup, onkeypress (los equivalentes directos de eventos de teclado), u onfocus/onblur (el sustituto estándar del comportamiento activado al pasar el puntero: focus/blur son el análogo navegable con teclado de mouseover/mouseout, según la técnica G90 de WCAG). Un manejador solo es alcanzable si los eventos de teclado pueden llegar a él: onfocus/onblur cuando el propio elemento puede recibir el foco, y un manejador de teclas cuando puede recibirlo el elemento o uno de sus descendientes (los eventos de teclado se propagan hacia arriba, los de foco no). En caso contrario, el comportamiento del elemento dirigido por el ratón (un tooltip al pasar el puntero, un desplegable personalizado, una interacción de arrastre) no puede activarlo un usuario que solo usa el teclado, y se marca con un motivo que indica si faltan los manejadores de teclado o si no pueden ejecutarse. Con el hook de listeners, un listener de teclado, de focus o de blur añadido desde un script en el elemento cuenta como el manejador en línea correspondiente, y también los listeners focusin/focusout, que, como los eventos de teclado, se disparan también para un descendiente con el foco.
Qué informa un hallazgo.
mouseAttrs: los manejadores solo de puntero que tiene el elemento. Cada elemento es un nombre de atributo, comoonmouseover; un listener añadido desde un script se nombra como el atributo de su tipo.keyboardAttrs(manejadores que no pueden ejecutarse,MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE): los atributos de manejador de teclado que lleva el elemento, a los que no pueden llegar los eventos de teclado. Cada elemento es un nombre de atributo, comoonfocus.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<div onmouseover="show()" onmouseout="hide()">Hover-only tooltip trigger</div>
onmouseover/onmouseout no tienen contraparte onfocus/onblur, por lo que un usuario de teclado nunca puede activar este comportamiento.
<div onmouseover="show()" onfocus="show()">Menu</div>
El manejador onfocus nunca se ejecuta: el <div> no puede recibir el foco.
<div onmouseover="show()" onmouseout="hide()" onfocus="show()" onblur="hide()" tabindex="0">Hover + focus pair</div>
Cada manejador de ratón está emparejado con un manejador de foco equivalente para teclado.
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.
MOUSE_ONLY_HANDLER_KEYBOARD_EQUIVALENT_NOT_FOCUSABLE
- Localizar el elemento que indica el informe y anotar lo que hacen sus manejadores de ratón pasando el puntero por encima o haciendo clic en él.
- Recorrer con Tab esa parte de la página y observar si el foco llega alguna vez al elemento o a algo que contiene.
- Si es así, probar Intro, Espacio y las teclas de flecha y compararlo con lo que hizo el ratón.
- Si aquí no se puede hacer con el teclado, comprobar si lo que hace el ratón se puede hacer de otra forma solo con el teclado, por ejemplo con un botón o una opción de menú en otra parte de la página. Solo cuenta si hace todo lo que hace el ratón.
Se cumple. El elemento (o algo dentro de él) recibe el foco del teclado y sus controladores de teclado o de foco dan el mismo resultado que el ratón, o lo que hace el ratón se puede hacer de otra forma solo con el teclado, o la acción del ratón es solo visual.
No se cumple. El foco nunca llega al elemento y lo que hace el ratón no se puede hacer de otra forma con el teclado, lo que incumple WCAG 2.1.1 (F54).
MOUSE_ONLY_HANDLER_NO_KEYBOARD_EQUIVALENT
- Localizar el elemento que indica el informe y anotar sus manejadores de ratón (como onmouseover u ondblclick).
- Pasar el puntero por encima, hacer clic o doble clic en él con el ratón y anotar lo que ocurre (se abre un menú, aparece una información emergente, se mueve un elemento).
- Recargar la página y usar solo el teclado: llegar con Tab al elemento (o al control que lo rodea) y probar Intro, Espacio, las teclas de flecha y Esc.
- Comprobar si ocurre lo mismo, o si otro control al que se llega con el teclado ofrece la misma función.
Se cumple. La acción del ratón solo añade un efecto visual, o el teclado obtiene el mismo resultado al recibir el foco o con una tecla.
No se cumple. Algo que hace el ratón (abrir un menú, mostrar información, mover un elemento) no se puede hacer con el teclado, lo que incumple WCAG 2.1.1 (F54).