Moviment i animació: prefers-reduced-motion, 2.2.2 i 2.3.3

Les animacions venen: donen sensació de qualitat, guien l'atenció i fan que una interfície sembli viva. Però per a una part de la població són un problema real. Les persones amb trastorns vestibulars poden patir marejos, nàusees i desorientació amb desplaçaments de parallax, zooms i transicions àmplies; les persones amb epilèpsia fotosensible poden patir crisis amb flaixos; les persones amb TDAH o amb dificultats d'atenció perden el fil quan alguna cosa es mou a la perifèria; i qualsevol persona amb lector de pantalla pot veure com un element es mou abans que l'hagi acabat de llegir. Aquesta lliçó cobreix tres criteris i una media query que els fa fàcils de complir.

Els criteris

• 2.2.2 Posar en pausa, aturar, amagar (A): per a qualsevol contingut que es mogui, parpellegi o es desplaci automàticament, duri més de 5 segons i es presenti al costat d'un altre contingut, hi ha d'haver un mecanisme per posar-lo en pausa, aturar-lo o amagar-lo. El mateix per a la informació que s'actualitza automàticament (tickers, resultats en directe), que s'ha de poder posar en pausa o se n'ha de poder controlar la freqüència. Afecta carrusels, vídeos de fons, animacions de càrrega que continuen movent-se quan la pàgina ja es pot fer servir, textos en marquesina i fons animats.
• 2.3.1 Llindar de tres flaixos o menys (A): res no pot fer flaixos més de tres vegades per segon, tret que l'àrea o el contrast estiguin per sota dels llindars definits. És un criteri de seguretat, no de comoditat: es tracta d'evitar crisis epilèptiques.
• 2.3.3 Animació a partir d'interaccions (AAA): les animacions de moviment provocades per una interacció (en fer scroll, en prémer, en passar el punter) s'han de poder desactivar, tret que siguin essencials. Encara que sigui AAA, la manera de complir-lo costa tan poc que hauria de ser la norma.

prefers-reduced-motion

Els sistemes operatius tenen des de fa anys un ajust de «reduir el moviment» (a Windows, Configuració, Accessibilitat, Efectes visuals; a macOS, Accessibilitat, Pantalla; a iOS, Accessibilitat, Moviment; a Android, Suprimeix les animacions). La media query prefers-reduced-motion exposa aquesta preferència al web, amb compatibilitat en tots els navegadors actuals.

.tarjeta { transition: none; }

@media (prefers-reduced-motion: no-preference) {
  .tarjeta { transition: transform 300ms ease; }
  .tarjeta:hover { transform: translateY(-4px); }
  .hero { animation: paralaje 20s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

«Reduir» no vol dir necessàriament «eliminar». Una fosa suau (canvi d'opacitat) rarament molesta; el que causa malestar és el moviment espacial: desplaçaments grans, zoom, rotació, parallax, elements que entren volant. Una bona estratègia és substituir les transformacions per foses quan la preferència està activa, en lloc de treure tota la retroacció.

En JavaScript pots llegir la mateixa preferència per aturar carrusels, vídeos de fons i animacions per scroll:

const reducir = window.matchMedia('(prefers-reduced-motion: reduce)');
if (reducir.matches) {
  carrusel.detenerRotacion();
  videoFondo.pause();
}
reducir.addEventListener('change', (e) => {
  if (e.matches) carrusel.detenerRotacion(); else carrusel.iniciarRotacion();
});

Controls de pausa visibles

Per complir 2.2.2 amb qualsevol contingut que es mogui sol durant més de 5 segons, cal un control que:

• Sigui visible, estigui a prop del contingut en moviment i sigui dels primers elements enfocables d'aquest bloc.
• Tingui un nom i un estat clars («Posa en pausa l'animació» / «Reprèn l'animació» o aria-pressed).
• Aturi el moviment de debò (no només l'amagui darrere d'una capa) i recordi l'elecció durant la sessió o, millor, a localStorage.

Els vídeos de fons sense so són el cas més freqüent d'incompliment en portades corporatives: duren més de 5 segons, es reprodueixen sols i no tenen controls. Solucions: botó de pausa superposat, no reproduir-los si prefers-reduced-motion està actiu, o substituir-los per una imatge fixa en mòbil i en connexions lentes (cosa que a més millora el rendiment).

<video autoplay loop muted playsinline src="fondo.mp4"></video>

Animacions per scroll i parallax

Els efectes que mouen elements segons el desplaçament (parallax, elements que apareixen lliscant, encapçalaments que s'encongeixen) són els que produeixen més malestar vestibular, i entren directament a 2.3.3. Aplica la mateixa recepta: embolcalla'ls a prefers-reduced-motion: no-preference, i considera un interruptor «Redueix les animacions» al mateix web per a qui no conegui l'ajust del sistema. Les biblioteques d'animació per scroll (AOS, GSAP ScrollTrigger, Framer Motion) tenen opcions per respectar la preferència; activa-les.

Flaixos i parpelleigs

2.3.1 es mesura: més de tres flaixos per segon en una àrea significativa és un error, amb independència de les preferències de l'usuari. Afecta GIF animats, efectes de «flaix» en notificacions, vídeos amb llums estroboscòpiques i transicions ràpides entre colors molt contrastats. Eines com PEAT (Photosensitive Epilepsy Analysis Tool) analitzen vídeos i animacions. La regla pràctica: res que parpellegi ràpid, i si un vídeo conté escenes amb flaixos, avís previ i possibilitat de saltar-les.

Com comprovar-ho

• Activa «reduir el moviment» al teu sistema operatiu i recarrega: el que continuï movent-se en interactuar (en fer scroll o passar el punter) incompleix 2.3.3, i el que es mogui sol és candidat a fallar 2.2.2 si no té control de pausa.
• Carrega la pàgina i cronometra: qualsevol cosa que es mogui més de 5 segons necessita un control de pausa accessible amb el teclat.
• Cerca al codi autoplay, animation, transition, setInterval i biblioteques de scroll, i comprova cada cas.
• Passa els vídeos i els GIF amb flaixos per un analitzador de fotosensibilitat.

Resum

• 2.2.2 exigeix posar en pausa, aturar o amagar tot moviment automàtic que duri més de 5 segons; 2.3.1 prohibeix més de tres flaixos per segon; 2.3.3 (AAA) demana poder desactivar les animacions per interacció.
• Defineix les animacions dins de @media (prefers-reduced-motion: no-preference) o apaga-les amb reduce; substitueix el moviment espacial per foses.
• Llegeix la preferència en JavaScript amb matchMedia per aturar carrusels i vídeos de fons.
• La preferència del sistema no substitueix el control de pausa visible que exigeix 2.2.2.
• Prova-ho amb «reduir el moviment» activat i amb un cronòmetre.