La accesibilidad web es clave para garantizar que todos los usuarios, incluidos aquellos con discapacidades motoras, puedan interactuar con interfaces digitales sin barreras. Uno de los problemas recurrentes en el diseño de interfaces es el uso exclusivo de movimientos de arrastre para realizar funciones sin ofrecer una alternativa accesible con un solo puntero, lo que incumple el criterio 2.5.7: Movimientos de arrastre de las WCAG 2.1.
Este criterio requiere que cualquier función que pueda activarse mediante un movimiento de arrastre también pueda operarse con una interacción de puntero único, como hacer clic en botones o seleccionar opciones en un menú. La ausencia de una alternativa dificulta el uso de interfaces para personas con movilidad reducida, que pueden no ser capaces de realizar gestos precisos como arrastrar elementos en una pantalla táctil o con un mouse.
Según la Organización Mundial de la Salud (OMS), alrededor de 75 millones de personas en el mundo necesitan un dispositivo de asistencia para la movilidad. Diseñar interfaces accesibles evita exclusión y mejora la usabilidad para todos los usuarios.
Acerca de este fallo
Este fallo ocurre cuando una función en una interfaz requiere forzosamente un movimiento de arrastre y no ofrece una alternativa accesible con un solo puntero. Esto impacta negativamente a personas con movilidad reducida o aquellas que utilizan tecnologías asistivas como interruptores, teclados o sistemas de seguimiento ocular.
Situaciones donde ocurre este fallo:
- Ordenar listas: Una lista de elementos solo puede reordenarse arrastrando los ítems y soltándolos en la posición deseada.
- Tableros Kanban: Un tablero de gestión de tareas que requiere arrastrar las tarjetas de una columna a otra sin opción de moverlas mediante un clic o menú alternativo.
- Controles deslizantes: Un control de volumen que solo se puede ajustar arrastrando el control deslizante, sin opción de incremento mediante botones.
Ejemplos
Ejemplo incorrecto 1: Ordenar una lista con arrastre obligatorio
<ul id="sortable-list">
<li draggable="true">Elemento 1</li>
<li draggable="true">Elemento 2</li>
<li draggable="true">Elemento 3</li>
</ul>🔴 Problema: Los elementos solo pueden ser movidos mediante el atributo draggable, lo que excluye a usuarios que no pueden arrastrar elementos.
Solución correcta: Incluir una alternativa con botones
<ul id="sortable-list">
<li>
<button onclick="moveUp(this)">⬆</button>
<button onclick="moveDown(this)">⬇</button>
Elemento 1
</li>
<li>
<button onclick="moveUp(this)">⬆</button>
<button onclick="moveDown(this)">⬇</button>
Elemento 2
</li>
<li>
<button onclick="moveUp(this)">⬆</button>
<button onclick="moveDown(this)">⬇</button>
Elemento 3
</li>
</ul>✅ ¿Qué mejora?: Se añaden botones de «subir» y «bajar» para que los usuarios puedan reordenar la lista sin necesidad de arrastrar elementos.
Ejemplo incorrecto 2: Mover tareas en un tablero Kanban solo con arrastre
<div class="kanban">
<div class="columna" id="pendientes">
<div class="tarea" draggable="true">Tarea 1</div>
</div>
<div class="columna" id="proceso">
<div class="tarea" draggable="true">Tarea 2</div>
</div>
</div>🔴 Problema: Los usuarios solo pueden mover tareas arrastrándolas.
Solución correcta: Incluir un menú de selección
<div class="kanban">
<div class="columna" id="pendientes">
<div class="tarea">
Tarea 1
<select onchange="moverTarea(this)">
<option value="pendientes">Pendientes</option>
<option value="proceso">En proceso</option>
</select>
</div>
</div>
</div>✅ ¿Qué mejora?: Se agrega un menú desplegable para cambiar el estado de una tarea sin necesidad de arrastrarla.
Ejemplo correcto: Solución ideal
<div class=»kanban»>
<div class=»columna» id=»pendientes»>
<div class=»tarea»>
Tarea 1
<button onclick=»moverTarea(‘pendientes’, ‘proceso’)»>Mover a En proceso</button>
<button onclick=»moverTarea(‘pendientes’, ‘completado’)»>Mover a Completado</button>
</div>
</div>
<div class=»columna» id=»proceso»>
<div class=»tarea»>
Tarea 2
<button onclick=»moverTarea(‘proceso’, ‘pendientes’)»>Mover a Pendientes</button>
<button onclick=»moverTarea(‘proceso’, ‘completado’)»>Mover a Completado</button>
</div>
</div>
<div class=»columna» id=»completado»>
<div class=»tarea»>
Tarea 3
<button onclick=»moverTarea(‘completado’, ‘pendientes’)»>Mover a Pendientes</button>
<button onclick=»moverTarea(‘completado’, ‘proceso’)»>Mover a En proceso</button>
</div>
</div>
</div>
<script>
function moverTarea(origen, destino) {
const tarea = document.querySelector(`#${origen} .tarea`);
if (tarea) {
document.getElementById(destino).appendChild(tarea);
}
}
</script>
✅ ¿Qué mejora?:
- Accesibilidad mejorada: No requiere arrastrar tareas, permitiendo su gestión con clics o teclado.
- Usabilidad universal: Funciona con tecnologías de asistencia y dispositivos sin capacidades táctiles.
- Simplicidad y eficiencia: Permite gestionar tareas de forma intuitiva con botones accesibles.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Diseñar funciones que solo se pueden operar con movimientos de arrastre.
- No ofrecer botones o menús desplegables como alternativa.
- No probar la interfaz con usuarios que tienen movilidad reducida.
Cómo evitar estos errores:
- Implementar siempre una alternativa de puntero único.
- Realizar pruebas con tecnologías de asistencia y usuarios con diferentes necesidades.
- Utilizar elementos estándar de accesibilidad como botones y listas desplegables.
Preguntas frecuentes sobre el fallo común F108
¿Por qué es problemático depender solo de arrastres?
Porque las personas con movilidad reducida pueden no ser capaces de realizar estos gestos.
¿Cuál es la mejor alternativa al arrastre?
Botones para mover elementos o menús desplegables para seleccionar posiciones.
¿Esto solo aplica a pantallas táctiles?
No, también afecta a usuarios con ratón o dispositivos alternativos.
¿Es obligatorio ofrecer una alternativa?
Sí, según WCAG 2.1, criterio 2.5.7.
¿Cómo puedo probar si mi interfaz cumple con este criterio?
Intentar operar la función sin usar arrastre y verificar que sea posible.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F108: Incumplimiento del Criterio de Conformidad 2.5.7 Movimientos de arrastre debido a que no se proporciona un método de puntero único para que el usuario opere una función que no requiere un movimiento de arrastre
- Comprender el criterio de éxito 2.5.7 Movimientos de arrastre
- MDN Web Docs – Eventos de arrastre
Pruebas y validación
Procedimiento
- Identificar todas las funciones de la interfaz que requieren arrastrar elementos.
- Comprobar si hay una alternativa de puntero único, como botones o menús desplegables.
- Probar la funcionalidad con tecnologías de asistencia y sin utilizar el ratón.
Resultados esperados
- ✅ Si la función puede operarse sin arrastre, cumple con WCAG 2.1.
- ❌ Si no hay alternativa accesible, el contenido no es conforme y debe corregirse.
Eliminar la dependencia de movimientos de arrastre es esencial para la accesibilidad web. Asegúrate de incluir siempre una alternativa para que todos los usuarios puedan interactuar con tu contenido sin barreras.
🚀 ¡Haz que tu web sea más accesible! Si necesitas ayuda, contáctanos.