Risorse · 66
Animazione: verificare il movimento ridotto, la pausa e la comprensione
Inventariare il movimento, offrire un comportamento ridotto e verificare che l'avanzamento, lo stato e la navigazione rimangano comprensibili senza animazione.
Aggiornato · 3 min
Obiettivi di questa guida
- Trigger di inventario
- Definire il comportamento ridotto
- Criteri WCAG separati
- Testare tutte le implementazioni
Verifica rapida
- Il movimento ridotto esclude qualsiasi animazione?
- Il criterio 2.3.3 è di livello AA?
- È sufficiente una regola CSS globale?
Metodo passo passo
- 1
Trigger di inventario
Elenca i movimenti automatici, attivati dall'interazione e collegati allo scorrimento. Separa le informazioni sullo stato dagli elementi decorativi. Ispeziona anche le animazioni JavaScript, i video e gli elementi incorporati.
Risultato: registro degli effetti e delle finalità.
- 2
Definire il comportamento ridotto
prefers-reduced-motion segnala la volontà di ridurre i movimenti non essenziali. Offri un'alternativa statica o più silenziosa, mantenendo informazioni e controlli. Evita di sostituire le traslazioni di grandi dimensioni con un altro effetto che possa distrarre.
Risultato: comportamento ridotto per componente.
- 3
Criteri WCAG separati
Il criterio 2.3.3 per l'animazione di interazione è di livello AAA. Il criterio 2.2.2 di livello A copre, tra gli altri casi, alcuni movimenti automatici della durata superiore a cinque secondi in concomitanza con altri contenuti, a meno che non siano essenziali. Verifica le condizioni del criterio applicabile.
Risultato: criteri e controlli per ciascun effetto.
- 4
Testare tutte le implementazioni
Emula la preferenza prima del caricamento e durante una sessione. Ispeziona stili, script e scorrimento programmatico. Se lo stato dipende dal completamento dell'animazione, garantire una conclusione affidabile anche al termine dell'animazione. Risultato
Risultato: prove di caricamento a freddo, modifica in tempo reale e stato finale.
- 5
Conservare informazioni e controlli.
Eseguire test di lettura, tastiera e feedback di errore in entrambe le modalità. Per i movimenti automatici interessati, testare la pausa, l'arresto o la visualizzazione nascosta e la stabilità durante la lettura. Documentare le eccezioni anziché etichettare ogni animazione come essenziale.
Risultato: prove e limitazioni.
Foglio di lavoro riutilizzabile
Completare con le proprie osservazioni autorizzate. Questi campi costituiscono un modello di lavoro, non risultati osservati.
| Campo | Informazioni da registrare |
|---|---|
| Effetto | Attivazione, durata e informazioni |
| Alternativa | Versione ridotta e stato finale |
| Criterio | Livello, condizioni e controllo |
| Prova | Preferenze, tastiera, risultato e limite |
Esempio pratico fittizio
Situazione illustrativa
Esempio fittizio: un pannello diventa attivo solo al termine della transizione.
Decisione e prove attese
L'accettazione della modalità ridotta rivela l'attesa; il componente completa il cambio di stato senza dipendere dalla durata dell'animazione.
Distinguere i meccanismi
| Meccanismo | Scopo | Verifica o limitazione |
|---|---|---|
| Preferenza movimento ridotto | Adatta alle scelte di sistema | Controlla anche gli script |
| Metti in pausa il controllo | Controlla il movimento automatico interessato | Rendilo utilizzabile tramite tastiera |
| Stato statico | Mantieni le informazioni senza movimento | Non rimuovere il feedback di avanzamento o di errore |
Indicatori di gestione
| Indicatore | Cosa misura | Prima azione |
|---|---|---|
| Effetti adattati | Movimento con alternative verificate | Includi incorporamenti e scorrimento |
| Attività conservate | Percorsi completati in modalità ridotta | Ispeziona gli stati dipendenti dall'animazione |
| Controlli funzionanti | Pausa o arresto effettivamente efficaci | Controlla ripresa e tastiera |
Errori comuni
- Controlla anche gli script
- Rendilo utilizzabile tramite tastiera
- Non rimuovere il feedback di avanzamento o di errore
Domande frequenti
Il movimento ridotto esclude qualsiasi animazione?
No. Esprime una preferenza; scegli un adattamento proporzionato e mantieni le informazioni necessarie.
Il criterio 2.3.3 è di livello AA?
No, è AAA. Altri criteri possono essere applicati al movimento automatico o al lampeggio.
È sufficiente una regola CSS globale?
Può ridurre molti effetti, ma potrebbe non controllare script, video o integrazioni. Testare i componenti reali.
Riferimenti ufficiali
I riferimenti supportano il metodo. Adattare i controlli al proprio contesto; non costituiscono una certificazione. I titoli dei riferimenti originali e i documenti di origine potrebbero essere in un'altra lingua.
Riferimenti consultati il .
