Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Por qué el contenido animado en sitios web necesita una función de pausa?
El contenido en movimiento necesita una función de pausa porque el movimiento atrae la vista de manera inevitable: junto a un carrusel de imagen en ejecución, las personas con trastornos de atención o lectura no pueden captar el texto real. Por lo tanto, WCAG requiere: todo lo que se mueve automáticamente, parpadea o se desplaza y dura más de cinco segundos debe poder pausarse, detenerse u ocultarse. Esto también se aplica al contenido que se actualiza automáticamente como tickers.
Carruseles, textos en movimiento y videos de fondo
Los más comunes son carruseles de página de inicio que cambian la imagen cada pocos segundos, videos de fondo detrás del encabezado principal y tickers de noticias. Para muchos visitantes son una prueba de paciencia, para algunos una barrera real: quien lee lentamente pierde la oración cuando la imagen debajo cambia. Quien tiene un trastorno de atención no puede despegar la vista del movimiento. La solución es simple — un botón de pausa visible directamente en el elemento en movimiento, operable por mouse y teclado. Aún mejor: el carrusel no cambia automáticamente sino solo cuando los visitantes lo hacen.
Así verifica el servicio de comprobación los contenidos en movimiento
La ejecución automática reconoce de manera confiable los elementos blink y text-scroll anticuados en el código fuente — se consideran incumplimiento de este criterio. Los carruseles modernos y videos de fondo son, sin embargo, componentes técnicamente normales cuyo comportamiento se muestra solo en la visualización: ¿se ejecuta durante más de cinco segundos, hay un botón de pausa, es accesible por teclado? Un humano juzga estas preguntas. El informe de verificación señala cada criterio WCAG por separado — cumple, incumple, verificar manualmente o no verificable automáticamente — haciendo visible qué parte de la declaración se midió y cuál queda abierta.
Beispiele
Karussell ohne Pause
<div class="slider" data-autoplay="true" data-interval="4000">…</div><div class="slider" data-autoplay="true" data-interval="4000">
<button type="button" aria-pressed="false" class="pause">Anhalten</button>
…
</div>Bewegung, die länger als fünf Sekunden läuft und automatisch startet, braucht Anhalten, Stoppen oder Ausblenden.
- Enumere todo lo que se mueve automáticamente en su página de inicio: carrusel, vídeo, ticker, mosaicos animados.
- Proporcione a cada uno de estos elementos un botón de pausa visible que también sea accesible por teclado.
- Cambie los carruseles al avance manual — los visitantes deciden cuándo viene la siguiente imagen.
- Elimine los elementos Blink y marquesina del código fuente sin reemplazo; provienen de una era web diferente.
- Respete la configuración del sistema operativo ”Reducir movimiento” y desactive las animaciones en consecuencia.