Ridurre movimenti e animazioni per utenti sensibili

Come ridurre in modo sicuro movimenti e animazioni per utenti sensibili?

Quando la preferenza di riduzione è attivata, le animazioni non necessarie e i movimenti legati allo scorrimento vengono rimossi o sostituiti con versioni più fluide. Il contenuto, il feedback di stato e l'usabilità devono essere completamente preservati e nessuna funzione può dipendere dalla fine di un'animazione.

Esempio pratico: "Durata globale zero"

Una homepage sposta sfondi di grandi dimensioni e visualizza le schede in sequenza mentre l'utente scorre. Con il movimento ridotto, gli sfondi rimangono fissi e tutte le schede appaiono immediatamente, mentre un indicatore di caricamento rimane visibile come un cambiamento di stato fluido; nessuna funzione attende il completamento di un'animazione.

Controllo del movimento attivabile tramite trigger

• Proporzione di modelli di movimento inventariati con scopo documentato e una versione funzionalmente completa per il movimento ridotto.

• Numero di attività testate che perdono contenuto, stato o usabilità rispetto allo standard quando la preferenza di riduzione è abilitata.

Accesso alle informazioni

1. Inventariare tutti i movimenti automatici, collegati allo scorrimento e attivati ​​dall'interazione, specificandone scopo, area, durata e ripetizione.

2. Per gli effetti non necessari in `prefers-reduced-motion`, definire un'alternativa silenziosa con informazioni e usabilità identiche.

3. Testare entrambi gli stati di preferenza, dal caricamento iniziale alle transizioni dinamiche dei componenti, e disaccoppiare la logica di fine animazione.

Durata globale impostata a zero

• Durata globale impostata a zero Una regola CSS generica interrompe le transizioni di stato interne al componente o impedisce eventi di transizione che la logica si aspetta erroneamente.

• Contenuto presente solo nell'animazione – Una spiegazione o uno stato essenziale viene trasmesso esclusivamente tramite movimento e manca nella versione ridotta.

• Parallasse permanente – Il movimento legato allo scorrimento e quello su larga scala rimangono attivi nonostante le preferenze di sistema e possono risultare fastidiosi per gli utenti sensibili.

Rispetto delle preferenze di sistema

• Rispetto delle preferenze di sistema – L'opzione prefers-reduced-motion modifica le animazioni non necessarie al caricamento, anziché richiedere un'opzione locale difficile da trovare.

• Accesso alle informazioni La riduzione dei movimenti non elimina il contenuto o il feedback sullo stato, ma li sostituisce con una presentazione più immediata o più tranquilla.

• Controllo del movimento attivabile tramite trigger È possibile interrompere, mettere in pausa o evitare completamente i movimenti che si avviano automaticamente, che durano a lungo o che si ripetono.

Cosa significa "Ridurre i movimenti per gli utenti sensibili" per le attività correlate

Separa "Ridurre i movimenti per gli utenti sensibili" Utilizzo corretto dei punti di riferimento per mantenere la chiarezza strutturale Un'importante domanda di approfondimento: Come si utilizzano i punti di riferimento affinché la struttura di una pagina rimanga comprensibile?

Chi desidera approfondire "Ridurre i movimenti per gli utenti sensibili" dal punto di vista del cluster "Architettura Frontend e CSS" troverà ulteriori informazioni in Sviluppa effetti al passaggio del mouse che non siano invasivi sui dispositivi touch. la classificazione appropriata.

Se si desidera implementare concretamente "Ridurre i movimenti per gli utenti sensibili", è possibile fare riferimento a Sistemi web robusti a cui ricorrere. Lì, l'attenzione si concentra su "tastiera, concentrazione e interazione dinamica" e "preferenze di sistema rispettate".

Conclusione: ridurre i movimenti per gli utenti sensibili

La riduzione del movimento è un'opzione di visualizzazione equivalente e non uno stato residuo di disabilitazione. Le informazioni e l'usabilità devono essere pienamente mantenute.

Fonti e ulteriori informazioni

Queste fonti primarie sono autorevoli per il comportamento della piattaforma, la terminologia e i limiti di test relativi alla "riduzione del movimento per gli utenti sensibili".

• prefers-reduced-motion — Documentazione Web MDNLa documentazione MDN descrive la sintassi, i riferimenti ai sistemi operativi e fornisce esempi pratici di CSS per l'impostazione utente della riduzione del movimento.

• Comprendere le animazioni dalle interazioni — W3C WAILa linea guida WCAG 2.3.3 richiede che le animazioni di movimento non essenziali, attivate dall'interazione, possano essere disattivate.

• Tecnica C39: Riduzione del movimento — W3C WAILa tecnica WCAG dimostra come utilizzare prefers-reduced-motion per fornire agli utenti sensibili al movimento una visualizzazione semplificata.