Técnica Técnicas generales WCAG 2.2

G215Añadir botones que hagan lo mismo que un gesto de deslizar

Nombre oficial en el W3C: Proporcionar controles para lograr la misma funcionalidad que un gesto basado en trayectoria

En pocas palabras

Un carrusel de noticias o de fotos suele avanzar deslizando el dedo hacia un lado. Esta técnica pide añadir controles, como flechas «Anterior» y «Siguiente», que hagan lo mismo con un simple toque o clic. Así nadie depende de saber o poder hacer el gesto.

Por qué es importante

Deslizar exige mover el dedo o el ratón en una dirección concreta. Para personas con temblores, poca fuerza o que usan un puntero en la cabeza es difícil o imposible.
Con el lector de pantalla del móvil activado, deslizar sirve para pasar de un elemento a otro. El gesto no llega al carrusel y el contenido queda inaccesible.
Muchas personas ni siquiera saben que el carrusel se puede deslizar.

Cómo se hace

Localice los gestos de trayectoria (gestos que exigen mover el dedo o el ratón en un recorrido o dirección) programados en la web: deslizar en carruseles, galerías, pestañas, etc.
Para cada uno, añada botones visibles que hagan lo mismo con un toque o clic, como «Anterior» y «Siguiente».
Use elementos <button> con un nombre claro, para que también funcionen con teclado y lector de pantalla.
Mantenga el gesto si quiere: es una vía más, no hace falta eliminarlo.

Cómo comprobarlo

Busque partes de la página que respondan a deslizar, como carruseles o galerías.
Compruebe que hay controles visibles para hacer lo mismo con un toque o un clic.
Use solo esos controles y verifique que llega a todo el contenido.
Active el lector de pantalla del móvil y confirme que los controles se pueden usar.

Ejemplo

Un carrusel de noticias con botones para avanzar y retroceder sin deslizar.

<section aria-label="Noticias destacadas">
  <button type="button">Anterior</button>
  <div class="diapositivas">...</div>
  <button type="button">Siguiente</button>
</section>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G215 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Cualquier tecnología que admita la entrada mediante puntero (por ejemplo, que admita alguno o todos los siguientes: puntero del ratón, toque en pantalla táctil o panel táctil, entrada con lápiz o entrada con puntero láser).

Descripción

El objetivo de esta técnica es garantizar que los usuarios con dificultades para realizar gestos basados en trayectoria puedan manejar un deslizador de contenido con un puntero único (por ejemplo, un solo toque en una pantalla táctil o un solo clic de ratón). Un deslizador de contenido contiene bloques de contenido dispuestos en fila. Normalmente varios bloques de contenido están ocultos y solo uno es visible en cada momento. Deslizar horizontalmente a izquierda y derecha sobre la parte visible del deslizador hace aparecer los bloques de contenido ocultos adyacentes. Proporcionar controles (por ejemplo, botones con flechas) como medio de entrada alternativo permite avanzar por el deslizador con una entrada de puntero único.

En los dispositivos con pantalla táctil, los gestos basados en trayectoria implementados por quien desarrolla no suelen funcionar cuando están activadas tecnologías de asistencia (TA) del sistema operativo, como el lector de pantalla integrado. Esto se debe a que la TA, por lo general, consume los gestos basados en trayectoria, de modo que no llegan al contenido desarrollado. Por ejemplo, un gesto de deslizamiento horizontal sobre el deslizador de contenido no funcionará como pretendía quien lo desarrolló, sino que moverá el foco del lector de pantalla al elemento siguiente o anterior. Algunos gestos pueden funcionar si el usuario emplea «gestos de paso directo», que a menudo son poco fiables porque pueden depender de factores como el hardware, el sistema operativo, la «capa de personalización» del sistema operativo, la configuración del sistema operativo o el agente de usuario.

Esta técnica aborda los gestos cuya compatibilidad ha sido implementada por quien desarrolla el contenido, no los gestos que proporciona el agente de usuario (como el deslizamiento horizontal para moverse por el historial del navegador o el deslizamiento vertical para desplazarse por el contenido de la página) ni los del sistema operativo (por ejemplo, gestos para cambiar entre aplicaciones abiertas o para abrir menús contextuales de las tecnologías de asistencia cuando están activadas).

Ejemplo

Un deslizador de contenido permite a los usuarios deslizar a izquierda y derecha para mostrar los bloques de contenido adyacentes. También hay botones de siguiente y anterior que permiten a los usuarios avanzar al bloque de contenido siguiente o anterior.

Pruebas

Procedimiento

Para los deslizadores de contenido que responden a gestos basados en trayectoria:

Comprobar que existen controles operables con un puntero único, sobre el deslizador de contenido o junto a él, que permiten avanzar a los bloques de contenido adyacentes.

Resultados esperados

La comprobación n.º 1 es verdadera.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G215 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.