Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung
Accesibilidad
¿Cómo se apagan las animaciones cuando se opera?
Efectos de paralaje al desplazarse, elementos que vuelan al hacer clic, páginas que giran al cambiar: Para personas con trastornos vestibulares, tales movimientos desencadenan mareos, náuseas y dolor de cabeza. Criterio 2.3.3 del nivel AAA requiere que las animaciones activadas por una operación sean apagadas a menos que la animación sea esencial para la función o la información.
Lo que el Criterio requiere
Cualquier movimiento que se produce como resultado de una operación (scrolling, clicking, typing, swiping) se puede apagar sin perder la función. Un pergamino suave al ancla se convierte en un salto, un menú líder aparece inmediatamente, un fondo paralaje se mantiene. Se excluyen las animaciones esenciales: un indicador de progreso que muestra una secuencia o una simulación cuyo contenido es movimiento.
La implementación a través del sistema
Los sistemas operativos tienen un entorno de “reducir movimiento”, que el navegador pasa como una consulta mediática prefiere-reduced-motion. Una hoja de estilo que establece todas las transiciones y animaciones a cero bajo esta consulta cumple con el criterio de todo lo que se anima a través de CSS. Para animaciones JavaScript, la misma consulta se evalúa antes de comenzar. Un interruptor separado en la página es un suplemento para las personas que no conocen la configuración del sistema.
Así es como nos ocupamos de ello
La medición puede comprobar si la hoja de estilo contiene una regla para la promoción reducida de preferencias y si las animaciones terminan bajo ella; Si las animaciones de JavaScript lo escuchan, un revisor verá al operar con el ajuste. El criterio pertenece a la categoría AAA en conocimiento.
Ejemplos
Parallax sin cierre
.held { background-attachment: fixed; }
.karte { transition: transform 0.6s; }
.karte:hover { transform: translateY(-20px) rotate(2deg); }@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.held { background-attachment: scroll; }
}El sistema de configuración “Reducir movimiento” apaga todos los movimientos que no son necesarios para la función.
- Agregue un bloque para la promoción de preferencias a la hoja de estilo que establece transiciones y animaciones a 0,01 ms de duración y el comportamiento de desplazamiento a auto.
- Evaluar la consulta en JavaScript (matchMedia) y comenzar el paralaje y los efectos de vuelo sólo si se permite el movimiento.
- Prueba con la configuración del sistema en: Nada se permite deslizar, volar o girar más.
- Ofrezca un botón visible “Movement off” que guarde la opción en el navegador.
