Moviment, temps i contingut dinàmic (2.2.1, 2.2.2, 2.3.1, 4.1.3)

Les interfícies actuals es mouen: carrusels que avancen sols, avisos que apareixen i desapareixen, animacions en desplaçar-se, sessions que caduquen, resultats que s'actualitzen sense recarregar. Per a moltes persones aquest dinamisme és una barrera: qui llegeix a poc a poc no acaba el text abans que canviï, qui té un trastorn vestibular es mareja amb l'efecte parallax, qui té epilèpsia fotosensible pot patir una crisi i qui fa servir lector de pantalla no s'assabenta d'un avís que ningú no li anuncia. Aquesta lliçó recorre les decisions de disseny sobre moviment, temps i missatges dinàmics. La seva implementació tècnica (per exemple, amb prefers-reduced-motion) es treballa al curs N3-C6, i el vídeo i l'àudio que es reprodueixen sols, a N2-C5.

El que es mou sol: 2.2.2 Posar en pausa, aturar, amagar (A)

El criteri distingeix dos casos:

• Contingut en moviment, intermitent o amb desplaçament que comença automàticament, dura més de cinc segons i es presenta al costat d'un altre contingut: hi ha d'haver un mecanisme per posar-lo en pausa, aturar-lo o amagar-lo, tret que el moviment sigui essencial. Exemples (vegeu l'explicació oficial): carrusels automàtics, teletips de notícies, bàners animats, fons de vídeo decoratius, animacions en bucle.
• Contingut que s'actualitza automàticament (cotitzacions, marcadors esportius, un tauler d'arribades de trens) i es presenta al costat d'un altre contingut: s'ha de poder posar en pausa, aturar, amagar o controlar-ne la freqüència d'actualització, tret que sigui essencial.

Decisions de disseny que funcionen:

• Evita l'avanç automàtic als carrusels. Si el client l'exigeix, el botó «Pausa» va visible, amb text o amb nom accessible, i és el primer control del carrusel en l'ordre de focus. Aturar-lo en passar-hi el ratolí o en rebre el focus ajuda, però no substitueix un botó que la persona controla.
• Animacions decoratives curtes: si duren menys de cinc segons i s'aturen soles, no necessiten control, però pensa si aporten alguna cosa.
• Dades en temps real: ofereix «Posa en pausa les actualitzacions» o una actualització a petició («Actualitza les arribades»).

Llampades i animacions que marejen

2.3.1 Llindar de tres flaixos o menys (A)

Res no ha de fer més de tres llampades en un segon, tret que la llampada sigui per sota dels llindars generals de llampada i de llampada vermella. Afecta vídeos, animacions de producte, efectes de transició i bàners «d'impacte». En disseny, la regla pràctica és simple: no dissenyis llampades, i encara menys en vermell saturat o en àrees grans de la pantalla.

2.3.3 Animació a partir d'interaccions (AAA) i la preferència de moviment reduït

El criteri AAA demana que les animacions de moviment provocades per una interacció (el contingut que llisca en desplaçar-se, l'efecte parallax, el zoom en obrir una targeta) es puguin desactivar, tret que siguin essencials. Tot i que és AAA, és una bona pràctica fàcil de dissenyar, perquè els sistemes operatius ja ofereixen l'ajust «Redueix el moviment» i el web el pot llegir amb la consulta prefers-reduced-motion. El que el disseny ha de lliurar és la versió reduïda de cada animació: una fosa en lloc d'un desplaçament, un canvi instantani en lloc d'un zoom, cap parallax.

/* Incorrecte: parallax i transicions llargues per a tothom */
.hero { background-attachment: fixed; }
.tarjeta { transition: transform 1.2s; }

/* Correcte: la versió reduïda definida en el disseny s'aplica
   quan la persona ha activat «Redueix el moviment» */
@media (prefers-reduced-motion: reduce) {
  .hero { background-attachment: scroll; }
  .tarjeta { transition: opacity 0.2s; }
}

Límits de temps: 2.2.1 Temps ajustable (A)

Si el contingut imposa un límit de temps (una sessió que caduca, un formulari que s'ha d'emplenar en deu minuts, un missatge que desapareix), s'ha de complir almenys una d'aquestes opcions:

• Desactivar: la persona pot treure el límit abans de trobar-lo.
• Ajustar: el pot ampliar abans de trobar-lo, almenys fins a deu vegades la durada per defecte.
• Ampliar: se l'avisa abans que expiri i disposa d'almenys 20 segons per ampliar-lo amb una acció simple («prem qualsevol tecla», un botó), i el pot ampliar almenys deu vegades.

Hi ha excepcions, detallades a l'explicació oficial del criteri: els esdeveniments en temps real (una subhasta), els casos en què el límit és essencial i ampliar-lo invalidaria l'activitat (un examen cronometrat, si el temps forma part del que s'avalua), i els límits de més de 20 hores.

L'opció més habitual és avisar i ampliar, i el seu disseny importa. L'avís és un diàleg modal amb un títol clar («La teva sessió caducarà»), el temps restant en text, un botó principal «Continua connectat» i un de secundari «Tanca la sessió». No cal un compte enrere que canviï cada segon i que el lector de pantalla anunciï sense parar: n'hi ha prou de dir el temps en obrir l'avís. El criteri 2.2.6 Temps d'espera (AAA) hi afegeix una bona pràctica: avisar de quant de temps d'inactivitat provoca la pèrdua de dades, tret que es conservin més de 20 hores. En formularis llargs, com una declaració o una sol·licitud de subvenció, desar esborranys automàticament evita el problema d'arrel.

Missatges que apareixen: 4.1.3 Missatges d'estat (AA)

Un missatge d'estat informa del resultat d'una acció, del progrés o d'un error sense canviar de context: «Producte afegit al carretó», «12 resultats», «S'està desant…», «Desat», «No s'ha pogut connectar». El criteri exigeix que aquests missatges es puguin comunicar a la tecnologia de suport sense moure el focus de la persona. El disseny no escriu el codi, però sí que decideix:

Situació	Què especifica el disseny	Com s'anotarà
Producte afegit, filtre aplicat, nombre de resultats	Text exacte del missatge i on apareix	Regió d'estat (role="status"), anunci no intrusiu
Error que impedeix continuar o pèrdua imminent de dades	Text exacte, icona i no només color	Alerta (role="alert"), anunci immediat
Procés llarg (pujada de fitxers, pagament)	Estats «S'està pujant 2 de 5», «Completat» i què passa si falla	Regió d'estat i focus només si canvia la tasca
Diàleg de sessió a punt de caducar	Títol, temps restant i botons	Diàleg modal; aquí sí que es mou el focus

Reserva les alertes per al que és urgent: si tot s'anuncia com a alerta, el lector interromp constantment i la persona deixa de parar-hi atenció.

Canvis que ningú no ha demanat

A la lliçó sobre layout i coherència vam veure 3.2.1 i 3.2.2: res no canvia de context per rebre el focus o per canviar un valor. Afegeix a la teva llista dues pràctiques més. Primera, el criteri 3.2.5 Canvi a petició (AAA): les redireccions automàtiques, les finestres noves sense avís o les recàrregues periòdiques de la pàgina només s'han de produir quan la persona les demana. Segona, evita inserir contingut per sobre d'on llegeix la persona (un bàner que apareix tard i empeny tot cap avall): qui fa servir ampliació perd la posició i qui és a punt de prémer un botó en prem un altre.

Resum

• 2.2.2 Posar en pausa, aturar, amagar (A): tot el que es mou més de cinc segons o s'actualitza sol, al costat d'un altre contingut, necessita control; millor sense avanç automàtic.
• 2.3.1 Llindar de tres flaixos o menys (A) i 2.3.3 Animació a partir d'interaccions (AAA): sense llampades i amb una versió reduïda de cada animació per a qui activa «Redueix el moviment».
• 2.2.1 Temps ajustable (A): desactivar, ajustar fins a deu vegades o avisar amb almenys 20 segons per ampliar; desa esborranys en formularis llargs.
• 4.1.3 Missatges d'estat (AA): el disseny fixa el text de cada missatge i si és estat o alerta; cap acció important no viu només en un avís que desapareix.
• Sense canvis de context ni salts de contingut que la persona no hagi demanat (3.2.1, 3.2.2, 3.2.5).