2.5.2 Cancelación de puntero
Criterio de éxito oficial
Para la funcionalidad que se puede operar usando un solo puntero, al menos una de las siguientes condiciones es verdadera:
- Sin evento de bajada
- El evento de bajada del puntero no se utiliza para ejecutar ninguna parte de la función.
- Abortar o deshacer
- La finalización de la función está en el evento de subida del puntero, y hay un mecanismo disponible para abortar la función antes de su finalización, o para deshacer la función tras la finalización.
- Reversión al alza
- El evento de subida revierte cualquier resultado del evento de bajada anterior.
- Esencial
- Completar la función en el evento de bajada es esencial.
Nota
Las funciones que emulan la pulsación de una tecla del teclado o del teclado numérico se consideran esenciales. Este requisito se aplica al contenido web que interpreta las acciones del puntero.
Alcance
Este criterio se aplica cuando el propio autor activa funciones mediante eventos del puntero. Si el agente de usuario gestiona el evento, no es responsabilidad del autor.
¿Qué es?
Cuando un usuario toca o hace clic en algo, existen dos momentos clave: el evento de bajada (cuando el dedo o botón toca la superficie) y el evento de subida (cuando se levanta). Este criterio exige que las acciones no se activen únicamente en el evento de bajada, para que los usuarios puedan cancelar acciones accidentales levantando el puntero fuera del objetivo.
Ciclo de vida de un clic/toque
Las 4 condiciones explicadas
La acción se vincula al evento click o pointerup, no al mousedown o pointerdown. La opción más sencilla y recomendada.
La acción se completa al soltar, pero el usuario puede mover el puntero fuera del objetivo antes de soltar para abortar, o deshacer después de completarla.
El evento de bajada activa algo (como mostrar un tooltip), pero el evento de subida lo revierte si el usuario no confirma. El estado final depende del evento de subida.
En casos como un teclado virtual o simulación de instrumento musical, la activación al presionar es esencial para la experiencia esperada.
¿Por qué es importante?
Las personas con temblores, espasmos musculares o destreza reducida pueden tocar accidentalmente un elemento incorrecto. Si la acción se dispara al tocar (evento de bajada), no hay oportunidad de corregir el error. Al activar en el evento de subida y permitir que el usuario cancele moviendo el puntero fuera, se da una segunda oportunidad de corregir.
Esto también beneficia a usuarios sin discapacidad: todos podemos hacer clic en el botón equivocado. La posibilidad de «arrastrar fuera» antes de soltar es una salvaguarda universal.
¿Quién se ve afectado?
Personas con temblores: Los temblores involuntarios pueden provocar toques accidentales. Poder «escapar» moviendo el dedo antes de soltar evita acciones no deseadas.
Personas con discapacidades cognitivas: Pueden cambiar de opinión después de iniciar una acción. La posibilidad de abortar o deshacer reduce el estrés y los errores.
Usuarios en general: Los errores de clic son universales. Los mecanismos de cancelación mejoran la experiencia de todos los usuarios.
Cómo implementar 2.5.2
Usar el evento click o pointerup
La técnica más sencilla es vincular las acciones al evento click nativo del navegador, que ya maneja la cancelación (si el usuario mueve el puntero fuera del elemento antes de soltar, el click no se dispara). Evita usar mousedown o touchstart para activar acciones.
// ✓ Correcto: usar click (o pointerup)
button.addEventListener('click', handleAction);
// ✗ Incorrecto: activa inmediatamente al presionar
button.addEventListener('mousedown', handleAction);
button.addEventListener('pointerdown', handleAction);Drag and drop: abortar con Escape
Para funciones que necesitan activarse en el evento de bajada (como el inicio de un arrastre), proporciona la tecla Escape para cancelar la operación antes de soltarla.
Casos esenciales
Los teclados virtuales en pantalla, los instrumentos musicales virtuales o los juegos que requieren respuesta en tiempo real pueden activarse en el evento de bajada cuando esto es parte esencial de la experiencia.
Ejemplos prácticos
Correcto Botón «Eliminar» con evento click
Al tocar el botón de eliminar, la acción se dispara cuando el usuario levanta el dedo. Si mueve el dedo fuera del botón antes de soltar, la eliminación no ocurre. El usuario puede arrepentirse.
Correcto Drag and drop con cancelación Escape
Al arrastrar un elemento, la reordenación se completa al soltar. El usuario puede presionar Escape durante el arrastre para cancelar sin que el elemento cambie de posición.
Fallo Botón que activa en mousedown
Un botón de «Comprar ahora» se activa en el evento mousedown. Al hacer clic accidentalmente, la compra se procesa antes de que el usuario pueda soltar el botón. No hay forma de cancelar.
Esencial Teclado virtual en pantalla
Un teclado virtual activa teclas al tocarlas (evento de bajada) para simular el comportamiento esperado de un teclado físico. Esto es esencial para la función y está exento.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G210 | Asegurar que las acciones de drag and drop se pueden cancelar | Suficiente |
| G212 | Usar los controles HTML nativos para asegurar funcionalidad del evento nativo | Suficiente |
Errores comunes
- Botones de acción irreversible (comprar, eliminar, enviar) que se activan en
mousedown. - Controles deslizantes que responden en el evento de bajada sin opción de cancelar.
- Menús que se abren al tocar y ejecutan acciones en el mismo evento.