Ejemplos prácticos de cómo cumplir con el criterio "2.5.7 Movimiento de arrastre"
Este año se publicará la nueva versión de la EN 301 549 que obligará al cumplimiento de los criterios añadidos en la versión 2.2 de las WCAG, los cuales ya he explicado anteriormente en otros artículos y webinars (consultar apartado referencias sobre las WCAG 2.2). Uno de los nuevos criterios es el 2.5.7 Movimiento de arrastre.
El criterio 2.5.7 AA indica que toda funcionalidad que implique un movimiento de arrastre se tiene que poder realizar mediante un puntero sencillo sin arrastrar. Por ejemplo, mediante un solo clic o un solo toque.
El objetivo de este artículo es ilustrar un incumplimiento concreto del criterio 2.5.7 y mostrar varias alternativas de solución.
Ejemplo incorrecto
El ejemplo incorrecto que propongo es el siguiente:
Esta pantalla tiene un deslizador para aumentar o disminuir la claridad de la imagen. Para mover este deslizador debes pulsar, arrastrar y soltar, de tal manera que en el evento de bajada hay un elemento que sigue al puntero hasta el evento de subida.
Hay personas que no van a poder realizar este gesto o les va a resultar complicado, por eso, es necesario ofrecer una alternativa con un solo puntero.
Opciones de solución
A continuación indico tres posibles soluciones. Os adelanto que la solución ideal es aquella que tiene en cuenta las tres.
Incluir botones
En esta solución se ha incluido un botón a cada lado del control con la etiqueta visible "Más" y "Menos". Estos botones permiten mover el deslizador. De esta manera, no se depende solo del gesto de arrastrar, sino que se ofrece la alternativa de usar un puntero sencillo.
Pulsar en la barra para avanzar
En esta solución se permite que la persona pueda pulsar en cualquier parte del deslizador para moverlo. Esta opción es mucho menos precisa que los botones, por lo que se recomienda que sea una opción adicional a la de los botones.
Poder introducir el dato concreto
En esta solución se incluye un campo para indicar directamente el porcentaje de luminosidad que se desea. Esta opción proporciona una forma de incluir de manera sencilla y rápida el valor exacto de luminosidad que se desea, sin depender además del gesto de arrastre.
¿Cuál es la solución ideal?
La solución ideal es implementar las tres.
- Los botones facilitan un ajuste fino y controlado.
- Deslizarlo con toques permite un ajuste rápido, útil para comparar de forma ágil cambios drásticos de luminosidad.
- El campo numérico asegura una precisión absoluta y fácil de replicar. Desde mi punto de vista, es la más cómoda en el acceso por voz y, seguramente, la más útil si accedes con un lector de pantalla.
Estaremos no solo cumpliendo con un criterio de accesibilidad que permite la interacción a muchas personas con discapacidad, sino que, además, mejoraremos la experiencia de usuario para todas las personas, ofreciendo un control que se adapta a sus necesidades y preferencias.
No es lo mismo "deslizar" que "arrastrar"
Por último, recuerdo que "arrastrar" no es lo mismo que "deslizar". En el criterio 2.5.7 revisamos el movimiento de arrastre, mientras que en el criterio "2.5.1 Gestos del puntero (A)" revisamos el gesto de deslizar, que también se tiene que poder realizar mediante un solo puntero.
En la siguiente captura se observa un carrusel.
Para consultar los diferentes elementos del carrusel se utiliza el gesto de deslizar, es decir, desplazas el dedo en una dirección determinada.
El carrusel de esta captura cumple el criterio "2.5.1 Gestos del puntero" porque permite deslizarlo mediante un puntero simple a través de los botones de flecha o los botones de punto bajo el carrusel.
Referencias sobre las novedades de las WCAG 2.2
- Libro "Accesibilidad Web. WCAG 2.2 de forma sencilla". Descarga gratuita, 2024
- WCAG 2.2 (recomendación - octubre 2023) Todas las novedades de la nueva versión de las WCAG, 2023
Webinar Olga Carreras "Novedades de las WCAG 2.2"
Enlace a la presentación: Explorando las novedades de la WCAG 2.2. Olga Carreras Montoto.
Nota. El artículo ha sido desarrollado y escrito por Olga Carreras sin herramientas IA salvo para la corrección ortográfica. Las capturas han sido tomadas por Olga Carreras con su móvil, pero la modificación de las capturas para ilustrar las soluciones sí se ha realizado mediante una aplicación IA.
Nota 1: como todos los artículos de este blog, este artículo NO está promocionado.
Nota 2: como todos los artículos de este blog, este artículo se ha ideado y elaborado sin el uso de herramientas IA, solo se han usado para la revisión final de la ortografía.
Autor: Olga Carreras Montoto
Etiquetas: WCAG 2.2
