Mișcare accesibilă: proiectare pentru preferințe-mișcare redusă fără a pierde sensul
Cum să proiectați mișcare care respectă setările de mișcare redusă și tulburările vestibulare: ce necesită WCAG, ce să eliminați, ce să păstrați și cum să testați.
Core Takeaway
Când un utilizator activează mișcarea redusă, păstrați sensul fiecărei animații, dar eliminați mișcarea: înlocuiți diapozitivele, zoomurile și paralaxa cu fade scurte sau modificări instantanee, opriți redarea automată a buclelor și nu vă bazați niciodată doar pe mișcare pentru a comunica ceva. Pe web, detectați setarea cu interogarea media preferințe cu mișcare redusă.
De ce contează
Pentru unii oameni, mișcarea pe ecran nu este o chestiune de gust. W3C notează că animația poate declanșa tulburări vestibulare, cu reacții care includ greață, migrenă și, în cazuri severe, nevoie de repaus la pat pentru a se recupera. Sistemele de operare permit oamenilor să solicite mai puțină mișcare, iar pe web această solicitare este expusă ca interogare media cu mișcare redusă. Valoarea sa este redusă atunci când utilizatorul a activat setarea.
Ce cere WCAG
Două criterii de succes WCAG acoperă mișcarea. 2.2.2 Pauză, Oprire, Ascundere se aplică mișcării care pornește automat, cum ar fi carusele și animații în buclă, și necesită o modalitate de a o întrerupe, de a opri sau de a o ascunde. 2.3.3 Animația din interacțiuni (nivel AAA) se aplică mișcării declanșate de interacțiunea utilizatorului și sugerează evitarea animației inutile, oferirea unui control pentru dezactivarea acesteia sau utilizarea setarii de reducere a mișcării a sistemului de operare. Chiar și acolo unde AAA nu este necesar, respectarea acestuia este o bună practică.
Eliminați mișcarea, păstrați sensul
Mișcarea redusă nu înseamnă că nu există feedback. Un utilizator care apasă un buton trebuie să știe că a funcționat. Scopul este de a menține schimbarea de stat și de a renunța la călătorie.
- Eliminați sau reduceți: diapozitive mari, zoom, paralaxă, mișcare legată de defilare, rotire, bucle de redare automată și videoclip de fundal.
- Păstrați: modificări de culoare și opacitate, indicatori de focalizare, tranziții scurte de stare, informații despre progres.
- Înlocuiți: tranziții de pagină și panou cu o scurtă decolorare încrucișată sau o schimbare instantanee.
- Niciodată: utilizați mișcarea ca singura modalitate de a afișa o eroare, o modificare sau un element nou.
Implementarea acestuia
Pe web, includeți mișcarea neesențială în @media (prefers-reduced-motion: no-preference) sau înlocuiți-o în @media (prefers-reduced-motion: reduce). În JavaScript, citiți window.matchMedia('(prefers-reduced-motion: reduce)') și ascultați modificările. Platformele native expun aceeași setare: SwiftUI, UIKit și Android vă permit să o verificați. Dacă sistemul dvs. de proiectare are jetoane de mișcare, definiți o variantă redusă pentru fiecare, astfel încât fiecare componentă să se comporte la fel.
Testare
Activați mișcarea redusă în sistemul dvs. de operare și parcurgeți fiecare flux de taste. Verificați dacă nu se pierde nimic important, că nicio buclă nu începe automat și că derularea nu mută conținutul dincolo de ceea ce face derularea în sine. Instrumentele pentru dezvoltatori de browser pot, de asemenea, emula setarea.
Fragment de implementare a producției
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Cheie Principles de reținut
- Mișcarea îi poate îmbolnăvi fizic pe unii oameni; respecta decorul
- Eliminați călătoria, zoomul, paralaxa și redarea automată; păstrați schimbările de stare și feedback-ul
- WCAG 2.2.2 acoperă mișcarea automată; 2.3.3 acoperă mișcarea din interacțiune
- Detectați setarea cu preferințe-reducere-mișcare și pe fiecare platformă nativă
- Proiectați o variantă redusă pentru fiecare jeton de mișcare
Întrebări frecvente
Surse
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Web Docs
- Motion — Ghid Apple pentru interfața umană