WCAG 2.5.7: Movimientos de arrastre

Qué significa esta regla

WCAG 2.5.7 — Movimientos de arrastre (Nivel AA, introducido en WCAG 2.2) establece que toda funcionalidad que utilice un movimiento de arrastre para su operación debe poder lograrse mediante una única acción de puntero sin arrastre, excepto cuando el movimiento de arrastre sea esencial para la funcionalidad y no exista ningún mecanismo alternativo.

Un movimiento de arrastre se define como una interacción en la que el puntero se presiona, se mantiene y se mueve a una nueva posición antes de soltarse. Ejemplos comunes incluyen: ordenar elementos de una lista mediante arrastrar y soltar, redimensionar paneles arrastrando un asa divisoria, usar un control deslizante agarrando y tirando del pulgar, dibujar en un lienzo y reordenar tarjetas de kanban. Todos estos patrones deben tener una alternativa equivalente de un solo puntero: un mecanismo que la persona usuaria pueda activar sin necesidad de mantener pulsado el botón del puntero mientras se mueve.

La restricción de un solo puntero es importante. La alternativa no tiene por qué ser un atajo de teclado; puede ser un clic de ratón, un toque o cualquier otra acción que implique solo un punto de contacto y no requiera un movimiento sostenido mientras está presionado. Por ejemplo, un control deslizante que permite a las personas usuarias hacer clic directamente en la pista para saltar a un valor cumple el criterio porque hacer clic en la pista es una acción de un solo puntero sin arrastre.

Qué se considera un cumplimiento: Una lista arrastrable que también ofrece botones de flecha arriba/abajo o un cuadro de diálogo de mover a posición; un control deslizante de rango que acepta clics en cualquier parte de la pista; un panel redimensionable que también tiene una entrada numérica o una función de doble clic para contraer; un mapa que se puede desplazar haciendo clic en flechas de navegación además de arrastrar.

Qué se considera un incumplimiento: Una lista ordenable donde la única forma de reordenar elementos es arrastrarlos; un redimensionador de panel dividido sin alternativa; una carga de archivos que solo acepta arrastrar y soltar sin botón de respaldo; un selector de color donde la única forma de seleccionar un tono es arrastrar a lo largo de una franja de degradado sin alternativa de entrada numérica o de texto.

Excepción oficial: El criterio permite explícitamente interfaces solo de arrastre cuando el arrastre es esencial, es decir, cuando eliminarlo cambiaría o invalidaría fundamentalmente la actividad. Una aplicación de dibujo por gestos o un widget de captura de firma son ejemplos canónicos. Sin embargo, esta excepción es intencionalmente estrecha; la mayoría de los patrones de interfaz de usuario cotidianos (controles deslizantes, listas ordenables, columnas redimensionables) no se consideran escenarios de arrastre esencial.

Por qué es importante

Las discapacidades motoras afectan a una parte significativa de la población mundial. Según la Organización Mundial de la Salud, más de 1.3 mil millones de personas en todo el mundo — aproximadamente el 16% de la población mundial — viven con algún tipo de discapacidad, y las discapacidades motoras o físicas se encuentran entre las categorías más comunes. Afecciones como el temblor esencial, la enfermedad de Parkinson, las lesiones por esfuerzo repetitivo, la hemiplejía, las lesiones medulares y las diferencias en las extremidades hacen que sea difícil o imposible mantener pulsado un botón de puntero mientras se mueve el puntero con precisión al mismo tiempo.

Para una persona usuaria con temblores en las manos, arrastrar el pulgar de un control deslizante de un extremo de la pista al otro no solo es inconveniente, sino que puede ser totalmente poco fiable. El puntero puede resbalar, el arrastre puede cancelarse a mitad de la operación o la precisión requerida simplemente superar lo que unas manos afectadas por temblores pueden ofrecer. Estas personas suelen depender de alternativas basadas en clics, navegación por teclado o dispositivos de acceso por interruptor. Si el único camino hacia una función es un gesto de arrastre, toda la función es efectivamente inaccesible para ellas.

Escenario concreto: Considere una página de producto de comercio electrónico con un filtro de rango de precios implementado como un control deslizante de rango de doble asa. Una persona usuaria con control motor fino limitado intenta acotar el rango de precios pero no puede arrastrar de forma fiable ninguna de las asas a la posición objetivo: el puntero se desvía, el asa salta a valores incorrectos y la frustración le lleva a abandonar la tarea. Si el mismo filtro expusiera un par de campos de texto numéricos junto al control deslizante, esa persona podría simplemente escribir los precios mínimo y máximo deseados y enviar. Esa única adición transforma una función inaccesible en una totalmente accesible con un coste de desarrollo mínimo.

Más allá de las discapacidades motoras, las personas usuarias en pantallas táctiles en entornos difíciles — sujetando una barandilla en el transporte público, usando guantes o utilizando un lápiz óptico — se benefician de alternativas de un solo puntero. La accesibilidad cognitiva también desempeña un papel: las interacciones más simples basadas en clics reducen la carga cognitiva en comparación con las operaciones de arrastrar y soltar que requieren comprender una metáfora espacial mientras se mantiene la precisión física.

Desde el punto de vista de la usabilidad y el SEO, garantizar que los controles interactivos sean accesibles mediante acciones simples de puntero tiende a producir una arquitectura de componentes más limpia con un marcado semántico mejor, lo que a su vez mejora la capacidad de descubrimiento por parte de las tecnologías de asistencia y de los rastreadores de motores de búsqueda.

Reglas relacionadas de Axe-core

WCAG 2.5.7 es un criterio de prueba manual. En el momento de redactar este texto, axe-core no incluye una regla automatizada que pueda señalar de forma definitiva las infracciones de este criterio. La razón es fundamental para el funcionamiento del criterio: las herramientas automatizadas pueden detectar que existe un detector de eventos de arrastre en un elemento, pero no pueden determinar con certeza si hay disponible una alternativa sin arrastre, si esa alternativa cubre la misma funcionalidad o si el arrastre es esencial. Ese juicio requiere una evaluación humana del diseño de la interacción.

• Auditoría manual — elementos de arrastrar y soltar: Las personas evaluadoras deben identificar todos los componentes de la página que respondan a secuencias de mousedown/mousemove/mouseup o equivalentes táctiles (touchstart/touchmove/touchend) y verificar que cada uno expone un mecanismo alternativo operable mediante una única pulsación de puntero sin arrastre. También deben comprobar el atributo HTML5 draggable y los detectores de eventos asociados dragstart/drop como señales de funcionalidad dependiente del arrastre.
• Auditoría manual — inspección de eventos de puntero: Utilizando la inspección de detectores de eventos de las DevTools del navegador o herramientas de auditoría de accesibilidad como Accessibility Insights for Web (que incluye una lista de verificación manual para 2.5.7), las personas evaluadoras deben inspeccionar los componentes en busca de controladores de eventos de puntero y confirmar que el rango completo de valores del componente o su capacidad de reposicionamiento sea accesible sin movimiento sostenido del puntero.
• Por qué la automatización no puede detectar esto: Un escáner automatizado puede señalar que un <div> tiene un detector dragstart, pero no puede saber si hacer clic en un botón cercano etiquetado como "Move up" proporciona una alternativa conforme. Esto requiere comprender la relación entre los elementos de la interfaz de usuario y su equivalencia funcional, una tarea que actualmente excede la capacidad de las herramientas de análisis del DOM estático o en tiempo de ejecución.

Cómo probar

1. Línea base de análisis automatizado: Ejecute axe DevTools o Lighthouse en la página para detectar cualquier problema relacionado con el puntero o la modalidad de entrada. Aunque ninguna regla de axe se asigna directamente a 2.5.7, revisar los problemas señalados bajo las reglas 2.5.x proporciona un contexto útil. Tome nota de cualquier componente que axe señale como con soporte de teclado insuficiente, ya que estos a menudo se superponen con patrones solo de arrastre.
2. Identificar todos los componentes arrastrables: Abra Chrome DevTools, vaya al panel Elements y use la pestaña Event Listeners para buscar controladores dragstart, drag, drop, pointermove, mousemove y touchmove. Alternativamente, busque en el código fuente de la página el atributo draggable y patrones de JavaScript como .addEventListener('dragstart'. Enumere todos los componentes que requieran arrastre.
3. Probar cada componente arrastrable en busca de alternativas: Para cada componente identificado, intente lograr el mismo resultado utilizando solo clics o toques de un solo puntero, sin arrastre. Para un control deslizante, haga clic directamente en la pista en la posición deseada. Para una lista ordenable, busque botones de mover o opciones en el menú contextual. Para un panel redimensionable, busque controles basados en doble clic o clic. Si no existe ninguna alternativa, el criterio se incumple.
4. Comprobación de navegación por teclado (señal secundaria): Pruebe todos los componentes arrastrables solo con el teclado (Tab para enfocar, teclas de flecha, Enter/Espacio). Aunque el soporte de teclado está cubierto por WCAG 2.1.1, la presencia de un soporte sólido de teclado suele correlacionarse con la existencia de alternativas sin arrastre, lo que convierte esto en un paso confirmatorio útil. Use NVDA + Firefox, VoiceOver + Safari (macOS/iOS) o JAWS + Chrome y verifique que la funcionalidad completa del componente sea operable sin un dispositivo apuntador.
5. Verificación en dispositivos táctiles: En un dispositivo móvil o utilizando la emulación de dispositivo en modo táctil de Chrome DevTools, intente completar las mismas tareas utilizando gestos de toque (sin deslizar y mantener). Confirme que los toques simples o las interacciones de tocar el objetivo sean suficientes para toda la funcionalidad.
6. Documentar los resultados: Para cada componente probado, registre si existe una alternativa conforme de un solo puntero, si cubre toda la gama de funcionalidad y si la operación de arrastre podría considerarse esencial. Use la lista de verificación de pruebas manuales de Accessibility Insights for Web para WCAG 2.5.7 como guía estructurada.

Cómo corregir

Control deslizante de rango sin soporte de clic en la pista — Incorrecto

<!-- Slider that only responds to drag on the thumb;
     clicking the track does nothing -->
<div class='slider-container'>
  <div class='slider-track'>
    <div class='slider-thumb'
         id='priceSlider'
         onmousedown='startDrag(event)'>
    </div>
  </div>
</div>

Control deslizante de rango con clic en la pista y entrada numérica — Correcto

<!-- Native <input type='range'> provides drag, click-on-track,
     and keyboard support natively. A numeric input offers an
     additional single-pointer alternative. -->
<label for='priceRange'>Maximum price: <span id='priceValue'>500</span> TL</label>
<input type='range'
       id='priceRange'
       name='priceRange'
       min='0'
       max='1000'
       value='500'
       step='10'
       aria-valuemin='0'
       aria-valuemax='1000'
       aria-valuenow='500'
       oninput='document.getElementById("priceValue").textContent = this.value;
                document.getElementById("priceNumber").value = this.value;'>
<label for='priceNumber'>Or enter a value:</label>
<input type='number'
       id='priceNumber'
       name='priceNumber'
       min='0'
       max='1000'
       value='500'>

Lista ordenable de arrastrar y soltar sin alternativa — Incorrecto

<!-- Items can only be reordered by dragging.
     No move buttons or keyboard reordering exist. -->
<ul id='taskList'>
  <li draggable='true' ondragstart='handleDrag(event)' id='item1'>Task One</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item2'>Task Two</li>
  <li draggable='true' ondragstart='handleDrag(event)' id='item3'>Task Three</li>
</ul>

Lista ordenable de arrastrar y soltar con botones de mover — Correcto

<!-- Drag-and-drop is preserved for users who can use it.
     Move Up / Move Down buttons provide a single-pointer
     (and keyboard-accessible) alternative for every item. -->
<ul id='taskList' aria-label='Sortable task list'>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item1'>
    <span>Task One</span>
    <button type='button'
            onclick='moveItem("item1", -1)'
            aria-label='Move Task One up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item1", 1)'
            aria-label='Move Task One down'>
      &darr; Move Down
    </button>
  </li>
  <li draggable='true'
      ondragstart='handleDrag(event)'
      id='item2'>
    <span>Task Two</span>
    <button type='button'
            onclick='moveItem("item2", -1)'
            aria-label='Move Task Two up'>
      &uarr; Move Up
    </button>
    <button type='button'
            onclick='moveItem("item2", 1)'
            aria-label='Move Task Two down'>
      &darr; Move Down
    </button>
  </li>
</ul>

Panel dividido redimensionable sin alternativa — Incorrecto

<!-- The divider can only be repositioned by dragging.
     No percentage input or preset-size buttons exist. -->
<div class='split-pane'>
  <div class='pane pane-left' id='leftPane'>Content A</div>
  <div class='divider'
       onmousedown='startResize(event)'
       aria-hidden='true'></div>
  <div class='pane pane-right' id='rightPane'>Content B</div>
</div>

Panel dividido redimensionable con botones de tamaño preestablecido — Correcto

<!-- The divider still supports dragging, but preset-layout
     buttons allow single-pointer repositioning. The divider
     is also keyboard-focusable with arrow-key support. -->
<div class='split-pane-wrapper'>
  <div class='split-controls' role='group' aria-label='Panel size presets'>
    <button type='button' onclick='setSplit(25)'>25 / 75</button>
    <button type='button' onclick='setsplit(50)'>50 / 50</button>
    <button type='button' onclick='setSplit(75)'>75 / 25</button>
  </div>
  <div class='split-pane'>
    <div class='pane pane-left' id='leftPane'>Content A</div>
    <div class='divider'
         role='separator'
         tabindex='0'
         aria-label='Resize panels'
         aria-valuenow='50'
         aria-valuemin='10'
         aria-valuemax='90'
         onmousedown='startResize(event)'
         onkeydown='resizeWithKeys(event)'>
    </div>
    <div class='pane pane-right' id='rightPane'>Content B</div>
  </div>
</div>

Errores comunes

• Implementar controles deslizantes como componentes personalizados basados en <div> sin soporte de clic en la pista, confiando por completo en arrastrar el elemento pulgar y sin manejar eventos de click en la propia pista para saltar el valor a la posición clicada.
• Suponer que la carga de archivos mediante arrastrar y soltar es el único mecanismo de carga necesario, sin proporcionar un botón visible y clicable de exploración de archivos (<input type='file'>) como respaldo obligatorio junto a la zona de suelta.
• Aplicar la excepción de esencialidad de forma demasiado amplia, por ejemplo, tratar una lista de tareas ordenable o un tablero kanban como "arrastre esencial" cuando los botones de Mover arriba/abajo satisfarían completamente las necesidades de las personas usuarias sin pérdida de funcionalidad.
• Proporcionar alternativas de teclado pero no alternativas de un solo puntero, interpretando erróneamente que WCAG 2.5.7 se cumple solo con el soporte de teclado. El criterio exige específicamente una vía de un solo puntero; las soluciones solo de teclado abordan 2.1.1, no 2.5.7.
• Ocultar botones de mover o entradas numéricas detrás de estados de hover o menús secundarios que a su vez requieren interacciones de arrastre o secuencias complejas de puntero para mostrarse, lo que en la práctica anula la accesibilidad de la alternativa.
• Descuidar los dispositivos táctiles al probar las alternativas al arrastre solo con un ratón de escritorio y luego desplegar para personas usuarias en pantallas táctiles donde el comportamiento del gesto de arrastre y sus alternativas pueden diferir significativamente de la implementación de escritorio.
• Usar pointer-events: none en la pista del control deslizante en CSS para evitar clics accidentales durante el arrastre, lo que bloquea inadvertidamente la alternativa de clic en la pista que exige 2.5.7.
• No proporcionar una alternativa para las interacciones de desplazamiento/arrastre del mapa en mapas incrustados o visualizaciones personalizadas basadas en lienzo, donde hacer clic en botones de flechas direccionales o introducir coordenadas sería una alternativa suficiente de un solo puntero.
• Implementar la alternativa de un solo puntero como un objetivo de arrastrar y soltar en sí mismo, por ejemplo, creando una zona de "soltar aquí" que aún requiere un arrastre para usarse, en lugar de un modelo de interacción genuinamente diferente como un botón o una entrada de texto.
• Olvidar probar las alternativas en todo el rango de valores de un componente arrastrable. Un control deslizante que permite a las personas usuarias hacer clic solo en unas pocas posiciones preestablecidas de la pista, pero no en cualquier posición arbitraria, no ofrece una alternativa completa si la versión con arrastre admite valores continuos.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece un marco nacional integral de accesibilidad para los servicios digitales. La circular exige que las entidades cubiertas se ajusten a las Pautas de Accesibilidad para el Contenido Web y hace referencia específica a la conformidad de Nivel AA como el estándar para obtener el Erişilebilirlik Logosu (Logotipo de Accesibilidad), la marca oficial de certificación emitida por el Ministerio de Familia y Servicios Sociales (Aile ve Sosyal Hizmetler Bakanlığı).

WCAG 2.5.7, como criterio de Nivel AA introducido en WCAG 2.2, entra dentro del alcance de los requisitos necesarios para obtener y mantener el Logotipo de Accesibilidad. Para las organizaciones que dependen de interacciones de arrastrar y soltar — como plataformas de comercio electrónico con controles deslizantes de filtrado de productos o listas de deseos ordenables, aplicaciones bancarias con paneles de gestión de carteras o herramientas de reserva de agencias de viajes con selectores de rango de fechas — el incumplimiento de 2.5.7 constituiría una barrera directa para la certificación.

Las entidades cubiertas por la Circular Presidencial 2025/10 incluyen una amplia sección transversal de la economía digital turca: instituciones públicas y organismos gubernamentales a nivel central y local; bancos y proveedores de servicios financieros regulados por la Agencia de Regulación y Supervisión Bancaria (BDDK); plataformas de comercio electrónico que operan en Turquía; hospitales y proveedores privados de servicios de salud; operadores de telecomunicaciones con 200,000 o más abonados; agencias de viajes y empresas de transporte privado; y escuelas privadas autorizadas por el Ministerio de Educación Nacional (Milli Eğitim Bakanlığı — MoNE).

Para estas organizaciones, no proporcionar alternativas de un solo puntero a las interacciones de arrastre no es simplemente una deficiencia técnica: es una brecha de cumplimiento que puede impedir la certificación, exponer a la organización a un escrutinio regulatorio y excluir a un segmento significativo de personas usuarias con discapacidades motoras. Las estadísticas de discapacidad de Turquía reflejan las tendencias mundiales: millones de residentes viven con afecciones que afectan al control motor fino, y los servicios digitales que dependen exclusivamente de gestos de arrastre levantan barreras innecesarias para esta población.

En la práctica, las organizaciones que persiguen el Erişilebilirlik Logosu deberían incluir WCAG 2.5.7 en sus listas de verificación de auditoría de accesibilidad, asegurarse de que todos los componentes interactivos construidos con funcionalidad de arrastre se revisen en busca de alternativas conformes y documentar sus decisiones de conformidad — incluidas las posibles alegaciones de la excepción de esencialidad — como parte de su Declaración de Accesibilidad (Erişilebilirlik Beyanı), que la circular exige que las entidades cubiertas publiquen y mantengan actualizada.