Técnica General G4 de WCAG 2.1: Permitir pausar el contenido y reiniciarlo desde donde se pausó

Jano Llorca Lis

La accesibilidad web es crucial para garantizar una experiencia de usuario óptima para todas las personas, incluidas aquellas con discapacidades. Un problema común en muchos sitios web es la presencia de contenido en movimiento o desplazamiento automático sin un mecanismo claro para pausarlo y reiniciarlo. Esto puede dificultar la lectura y generar distracción para los usuarios, especialmente aquellos con discapacidades cognitivas o visuales.

La Técnica G4 de WCAG 2.1 aborda este problema al proporcionar una opción para que los usuarios pausen y reinicien el contenido en movimiento desde el punto en el que se detuvo. Esta técnica ayuda a cumplir con los criterios de éxito 2.2.1 Timing Adjustable (Tiempo ajsutable) y 2.2.2 Pause, Stop, Hide (Pausar, Parar, Ocultar) de WCAG 2.1.

Acerca de esta técnica

El objetivo de esta técnica es permitir a los usuarios detener el movimiento o desplazamiento de contenido cuando lo necesiten y reiniciarlo desde donde se pausó. Esto es particularmente útil para aquellos que necesitan más tiempo para leer o procesar la información sin distracciones.

Esta funcionalidad se puede proporcionar mediante:

Controles interactivos accesibles.
Atajos de teclado documentados.

Esta técnica es fundamental en:

Noticias en cintillos o banners en movimiento.
Animaciones interactivas.
Carruseles de imágenes o contenido.
Actualizaciones de contenido en tiempo real.

Ejemplos

Ejemplo incorrecto 1: Banner de noticias sin opción de pausa

<marquee behavior="scroll" direction="left">Últimas noticias: Actualización de seguridad en nuestro sistema.</marquee>

🔴 Problema: El texto se desplaza constantemente sin opción de pausa, lo que dificulta su lectura para algunos usuarios.

Solución correcta: Incluir un botón de pausa y reinicio

<div id="news-banner">
    <p id="news-text">Últimas noticias: Actualización de seguridad en nuestro sistema.</p>
    <button onclick="pauseBanner()">Pausar</button>
    <button onclick="resumeBanner()">Reanudar</button>
</div>
<script>
    let scrolling = true;
    function pauseBanner() {
        if (scrolling) {
            document.getElementById("news-text").style.animationPlayState = "paused";
            scrolling = false;
        }
    }
    function resumeBanner() {
        if (!scrolling) {
            document.getElementById("news-text").style.animationPlayState = "running";
            scrolling = true;
        }
    }
</script>

✅ ¿Qué mejora?:

Los usuarios pueden pausar y reanudar el contenido en movimiento según sus necesidades.
Se cumple con el criterio 2.2.2 (Pause, Stop, Hide).

Ejemplo incorrecto 2: Animación sin atajo de teclado documentado

<video autoplay loop>
    <source src="animacion.mp4" type="video/mp4">
</video>

🔴 Problema: No hay una opción clara para pausar la animación mediante el teclado, lo que excluye a usuarios con movilidad reducida.

Solución correcta: Incluir control de pausa con la barra espaciadora

<video id="animacion" autoplay>
    <source src="animacion.mp4" type="video/mp4">
</video>
<p>Presiona la barra espaciadora para pausar/reanudar la animación.</p>
<script>
    let video = document.getElementById("animacion");
    document.addEventListener("keydown", function(event) {
        if (event.code === "Space") {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
    });
</script>

✅ ¿Qué mejora?:

Permite a los usuarios pausar y reanudar el video con un atajo de teclado accesible.
Se documenta el uso de la barra espaciadora como control de pausa.

Errores comunes y cómo evitarlos

Errores frecuentes:

No proporcionar una opción de pausa y reanudación para contenido en movimiento.
Usar solo controles de ratón sin alternativa para teclado.
No documentar los atajos de teclado disponibles.

Cómo evitar estos errores:

Siempre incluir botones de pausa y reanudación visibles y accesibles.
Habilitar alternativas de control mediante teclado, como la barra espaciadora o la tecla Escape.
Informar a los usuarios sobre los atajos disponibles, ya sea mediante texto visible o en la documentación del sitio.

Preguntas frecuentes sobre la técnica general G4

¿Es obligatorio ofrecer una opción de pausa para todo el contenido en movimiento?

Sí, si el movimiento dura más de 5 segundos y afecta la usabilidad.

¿Los controles de pausa deben ser visibles en todo momento?

Deben ser fácilmente accesibles, pero pueden ocultarse hasta que el usuario los necesite.

¿Los atajos de teclado son obligatorios?

No siempre, pero son altamente recomendables para mejorar la accesibilidad.

¿Cómo puedo probar si mi sitio cumple con esta técnica?

Usa solo el teclado y verifica que puedas pausar y reanudar el contenido en movimiento.

¿Afecta al SEO implementar esta técnica?

No, pero puede mejorar la experiencia del usuario y reducir tasas de rebote.

Recursos relacionados

Pruebas y validación de la técnica

Procedimiento

Verificar que haya un mecanismo en la página para pausar el contenido en movimiento.
Asegurar que al pausar, el contenido se detiene completamente y no se reanuda automáticamente.
Comprobar que al reiniciar, el contenido continúa desde donde se pausó.

Resultados esperados

✅ Si el contenido puede pausarse y reanudarse correctamente, la implementación es válida.
❌ Si el contenido no puede pausarse o se reinicia desde el principio, la técnica no está bien aplicada

Implementar la técnica G4 mejora significativamente la accesibilidad al proporcionar a los usuarios control sobre el contenido en movimiento. Esto facilita la lectura y evita distracciones, garantizando conformidad con WCAG 2.1.

📢 ¡Si necesitas ayuda con la accesibilidad de tu sitio web, contáctanos!

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.