TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Todo contenido que se mueva, parpadee o se desplace automáticamente por más de 5 segundos debe poseer un mecanismo para pausarlo o detenerlo. El uso de la etiqueta obsoleta <marquee> viola flagrantemente esta regla, causando barreras cognitivas insalvables.
El secuestro de la atención visual
Para personas con Trastorno por Déficit de Atención (TDAH), autismo o dificultades de lectura, un texto que se mueve constantemente en la periferia de su visión imposibilita su concentración en el contenido principal. La WCAG 2.2.2 (Pausar, Detener, Ocultar) categoriza este fallo como Grave.
El patrón erróneo: Código Accesible Deficiente
Uso de etiquetas obsoletas incontrolables o animaciones CSS infinitas sin soporte para las preferencias del sistema operativo.
<!-- MAL: Uso de elemento prohibido en HTML5 -->
<marquee behavior="scroll" direction="left">
Última hora: Actualización de requisitos para el trámite XYZ.
</marquee>La Solución Accesible: Código Recomendado
Evitar los "carruseles" de texto por completo. Si el diseño lo exige, implementar una pausa en hover/foco o respetar la media query prefers-reduced-motion.
<!-- BIEN: Animación controlada y respetuosa -->
<style>
@media (prefers-reduced-motion: reduce) {
.news-ticker {
animation: none;
}
}
.news-ticker:hover, .news-ticker:focus-within {
animation-play-state: paused;
}
</style>
<div class="news-ticker" tabindex="0">
<p>Última hora: Actualización de requisitos para el trámite XYZ.</p>
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Activar la preferencia de sistema "Reducir movimiento" (en macOS: Ajustes de Accesibilidad → Pantalla → Reducir movimiento; en Windows: Configuración → Accesibilidad → Efectos visuales → Desactivar animaciones). Verificar que las animaciones del sitio se detengan o simplifiquen drásticamente. Comprobar también que exista un mecanismo visible para pausar el contenido en movimiento.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 2.2.2.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 2.2.2. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
