2.5.7 Movimientos de arrastre
Criterio de éxito oficial
Toda funcionalidad que utiliza un movimiento de arrastre para su funcionamiento se puede lograr con un solo puntero sin arrastrar, a menos que arrastrar sea esencial o lo determine el agente de usuario.
Nota importante
Este criterio no aplica al desplazamiento (scroll) del navegador ni a acciones que el propio agente de usuario gestiona. Se centra en las funcionalidades implementadas por el autor de la página.
¿Qué es?
Un movimiento de arrastre es una acción que requiere mantener el puntero pulsado mientras se mueve de un punto a otro. Arrastrar elementos en una lista ordenable, ajustar un control deslizante o mover una ventana flotante son ejemplos típicos. Este criterio exige que cada una de esas acciones tenga una alternativa de puntero simple — sin necesidad de mantener pulsado y mover.
Las cuatro fases del arrastre — todas deben ejecutarse correctamente
Para personas con temblores o movilidad reducida, mantener el botón pulsado mientras se mueve con precisión puede ser imposible.
Arrastre vs. gesto basado en ruta
Es importante no confundir el arrastre (CE 2.5.7) con los gestos basados en ruta (CE 2.5.1). Aunque los dos implican movimiento del puntero, son conceptos distintos con criterios diferentes.
¿Por qué es importante?
El arrastre requiere coordinación motora precisa: hay que mantener el puntero pulsado de forma continua mientras se mueve con exactitud. Para personas con temblores, artritis, parálisis parcial o quienes usan tecnologías de asistencia como switches o teclados, esta acción puede ser extremadamente difícil o imposible.
Al proporcionar alternativas — botones de flecha, menús contextuales, campos de entrada numérica — el contenido se vuelve accesible sin necesidad de eliminar la funcionalidad de arrastre existente.
¿Quién se ve afectado?
Personas con temblores y artritis: Mantener el botón pulsado mientras se mueve con precisión es a menudo imposible. Los botones de flecha o los campos numéricos permiten realizar la misma acción con clics simples.
Usuarios de teclado y switch: No pueden utilizar el ratón o la pantalla táctil. Las alternativas de teclado (flechas, atajos) son indispensables para operar funciones que de otro modo solo estarían disponibles arrastrando.
Cómo implementar 2.5.7
Proporcionar alternativas sin arrastre
Por cada función que usa arrastre, ofrece al menos una alternativa accesible con un solo puntero o con el teclado.
Lista ordenable solo con arrastre
El usuario arrastra elementos para reordenarlos. No hay botones de flecha ni menú contextual. Imposible para usuarios de teclado o personas con movilidad reducida.
Lista ordenable con botones ↑↓
Además del arrastre, cada elemento tiene botones «Subir» y «Bajar». El usuario puede reordenar la lista con clics simples o con el teclado.
Patrones de alternativa por tipo de función
Cada tipo de función arrastrable tiene un patrón alternativo recomendado. Para controles deslizantes, usa entradas numéricas o botones +/−. Para listas ordenables, añade botones de flecha. Para ventanas flotantes, ofrece campos de posición XY o menú de anclado. Para divisores de panel, proporciona controles de porcentaje o botones de ajuste.
Semántica y teclado
Cuando uses ARIA para drag-and-drop, asegúrate de implementar correctamente los roles draggable, los atributos aria-grabbed y aria-dropeffect, y de que toda la operación sea operable con teclado (seleccionar con Enter/Espacio, mover con flechas, soltar con Enter).
Ejemplos prácticos
Correcto Tablero Kanban con teclado
Un tablero de tareas permite arrastrar tarjetas entre columnas. Además, cada tarjeta tiene un menú de tres puntos con opciones «Mover a: En progreso», «Mover a: Hecho». Los usuarios de teclado pueden mover tarjetas sin necesidad de arrastrarlas.
Correcto Control deslizante con entrada numérica
Un slider de precio en un filtro de búsqueda tiene al lado campos numéricos editables. El usuario puede escribir directamente el valor mínimo y máximo en lugar de arrastrar el controlador.
Excepción Editor de gráficos vectoriales
En un editor de dibujo profesional, mover y redimensionar objetos mediante arrastre puede ser esencial para la naturaleza de la herramienta. La excepción de «esencialidad» aplica cuando la alternativa cambiaría fundamentalmente la función.
Fallo Galería con orden solo por arrastre
Una galería de fotos permite reorganizarlas solo arrastrando miniaturas. No hay otra forma de cambiar el orden. Los usuarios que no pueden arrastrar no pueden personalizar la galería.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G219 | Asegurar que una alternativa de puntero simple está disponible para las acciones de arrastre | Suficiente |
Errores comunes
- Listas ordenables (sortable lists) implementadas únicamente con arrastre, sin botones de flecha ni menú contextual.
- Controles deslizantes sin campo de entrada numérica alternativo.
- Ventanas o paneles flotantes que solo se pueden reposicionar arrastrando.
- Divisores de panel ajustables solo con arrastre, sin controles de porcentaje ni botones de ajuste.
- Implementar
draggableen HTML sin proporcionar alternativa de teclado.