Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung
Accessibilità
Come disattivare le animazioni quando si opera?
Effetti parallax durante lo scorrimento, elementi che volano quando si fa clic, pagine che ruotano quando si commuta: Per le persone con disturbi vestibolari, tali movimenti innescano vertigini, nausea e mal di testa. Il criterio 2.3.3 del livello AAA richiede che le animazioni attivate da un'operazione siano spente a meno che l'animazione non sia essenziale per la funzione o le informazioni.
Cosa richiede il criterio
Qualsiasi movimento che si verifica a seguito di un'operazione (scrolling, click, digitando, swiping) può essere spento senza che la funzione venga persa. Una leggera pergamena all'ancora diventa un salto, un menu principale appare immediatamente, uno sfondo parallax rimane fermo. Sono escluse le animazioni essenziali: un indicatore di progresso che mostra una sequenza o una simulazione il cui contenuto è movimento.
L'implementazione tramite l'impostazione del sistema
I sistemi operativi hanno un “ridurre il movimento” impostazione, che il browser passa come una query media preferisce-ridotto-mozione. Un foglio di stile che imposta tutte le transizioni e animazioni a zero sotto questa query soddisfa il criterio per tutto ciò che è animato tramite CSS. Per le animazioni JavaScript, la stessa query viene valutata prima di iniziare. Un interruttore separato sulla pagina è un supplemento per le persone che non conoscono l'impostazione del sistema.
Questo è il modo in cui ci occupiamo
La misurazione può verificare se il foglio di stile contiene una regola per la predisposizione-ridotta-mozione e se le animazioni finiscono sotto di esso; Se le animazioni JavaScript lo ascoltano, un recensore vedrà quando si opera con l'impostazione su. Il criterio appartiene alla categoria AAA nella conoscenza.
Esempi
Parallax senza chiusura
.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; }
}L'impostazione del sistema "Ridurre il movimento" spegne tutti i movimenti che non sono necessari per la funzione.
- Aggiungi un blocco per preferi-ridotta-mozione al foglio di stile che imposta transizioni e animazioni a 0,01 ms di durata e scorrimento-behavior per auto.
- Valutare la query in JavaScript (matchMedia) e iniziare parallax e effetti di volo solo se il movimento è consentito.
- Prova con l'impostazione del sistema su: Non è più consentito scivolare, volare o ruotare.
- Offrire un visibile “Movimento off” pulsante che salva la scelta nel browser.
