Movimientos de arrastre

Qué exige este criterio

Si una función puede ejecutarse arrastrando — reordenar elementos, ajustar un control deslizante, desplazarse por un mapa, firmar en un panel de firma, deslizar un interruptor de desbloqueo — debe existir también una forma de realizar la misma función mediante una acción de puntero simple que no sea un arrastre. Pulsar un botón, hacer clic en una flecha, escribir un valor o seleccionar desde un menú: cualquiera de estas opciones satisface el criterio de conformidad.

La regla se aplica tanto si el arrastre es horizontal, vertical o libre. La exención se produce cuando el arrastre es esencial para la función — dibujar en una aplicación de pintura, arrastrar el joystick analógico de un mando virtual.

Cómo cumplirlo

• Listas ordenables: añadir botones de flecha arriba/abajo junto a cada elemento o un menú «Mover a la posición…». El arrastre sigue funcionando para los usuarios de ratón; los botones cubren al resto.
• Controles deslizantes: utilizar <input type="range"> (o role="slider" con soporte para teclas de flecha) de modo que los valores puedan establecerse con el teclado o escribiendo un número en un campo de entrada asociado.
• Panorámica/zoom de mapas: añadir controles visibles de acercar/alejar y desplazamiento direccional, o admitir un campo de búsqueda para la navegación directa.
• Carruseles: proporcionar botones de Anterior y Siguiente además del gesto de deslizamiento.
• Filtros de rango y precio con control deslizante de doble manija: complementarlos con dos campos numéricos.
• Banners y modales que se descartan arrastrando: añadir un botón de cerrar visible.
• Captura de firma: ofrecer una alternativa de «escribir el nombre».

Fallos habituales

• Tableros kanban al estilo Trello donde la única forma de mover una tarjeta entre columnas es arrastrarla.
• Controladores de reordenación en ajustes o listas de reproducción sin alternativa de teclado ni de botón.
• Controles deslizantes de rango con dos manijas que exigen arrastrar ambos extremos y no disponen de campos de mínimo y máximo.
• Controles de comparación de imágenes (antes/después) sin botones para desplazar el divisor.
• Selectores de color en los que el único modo de ajustar el tono y la saturación es arrastrar dentro del selector.
• Controles «deslizar para confirmar» o «deslizar para desbloquear» sin alternativa de toque.
• Selectores de rango de fechas personalizados que requieren seleccionar por arrastre a través de las celdas del calendario.

Por qué es importante

Arrastrar resulta difícil o imposible para los usuarios con control motor limitado, temblor, uso del teléfono con una sola mano, puntero de boca o cabeza, y para quienes utilizan un trackpad y les produce calambres tras varios arrastres. También representa un problema para muchos usuarios de control mediante pulsador y de control por voz: no existe un comando de voz obvio para «arrastrar la tercera tarjeta a la segunda columna». El criterio 2.5.7 es nuevo en WCAG 2.2 y ha reconfigurado la forma en que los equipos de producto diseñan la interfaz de reordenación: la mayoría de los sistemas de diseño modernos ahora incluyen alternativas de botones de flecha por defecto. Cabe esperar que este criterio de conformidad sea un hallazgo frecuente en auditorías de paneles de control, herramientas de gestión de proyectos y cualquier interfaz construida en torno a listas ordenables.