Accessible Motion: Navrhovanie pre preferencie-redukovaný pohyb bez straty významu
Ako navrhnúť pohyb, ktorý rešpektuje nastavenia zníženého pohybu a vestibulárne poruchy: čo WCAG vyžaduje, čo odstrániť, čo ponechať a ako testovať.
Core Takeaway
Keď používateľ zapne redukovaný pohyb, ponechajte význam každej animácie, ale odstráňte pohyb: nahraďte snímky, priblíženie a paralaxu krátkymi zoslabeniami alebo okamžitými zmenami, zastavte automatické prehrávanie slučiek a nikdy sa nespoliehajte na to, že niečo oznámi iba pohybom. Na webe zistite nastavenie pomocou dopytu na médiá s preferovaným zníženým pohybom.
Prečo na tom záleží
Pre niektorých ľudí nie je pohyb na obrazovke vecou vkusu. W3C poznamenáva, že animácia môže vyvolať vestibulárne poruchy s reakciami, ktoré zahŕňajú nevoľnosť, migrénu a v závažných prípadoch aj potrebu odpočinku na lôžku na zotavenie. Operačné systémy umožňujú ľuďom požiadať o menej pohybu a na webe sa táto požiadavka zobrazí ako dopyt na médiá s preferenciou so zníženým pohybom. Jeho hodnota sa zníži, keď používateľ toto nastavenie zapne.
Čo požaduje WCAG
Dve kritériá úspechu WCAG pokrývajú pohyb. 2.2.2 Pozastaviť, zastaviť, skryť sa vzťahuje na pohyb, ktorý sa spúšťa automaticky, ako sú kolotoče a cyklické animácie, a vyžaduje spôsob, ako ho pozastaviť, zastaviť alebo skryť. 2.3.3 Animácia z interakcií (úroveň AAA) sa vzťahuje na pohyb spúšťaný interakciou používateľa a navrhuje vyhnúť sa nepotrebnej animácii, ponúkať ovládací prvok na jej vypnutie alebo použiť nastavenie zníženia pohybu operačného systému. Aj keď sa AAA nevyžaduje, je dobré ho dodržiavať.
Odstráňte pohyb, ponechajte zmysel
Znížený pohyb neznamená žiadnu spätnú väzbu. Používateľ, ktorý stlačí tlačidlo, musí stále vedieť, že funguje. Cieľom je udržať zmenu stavu a upustiť od cestovania.
- Odstráňte alebo zmenšite: veľké snímky, zoomy, paralaxu, rolovanie, otáčanie, automatické prehrávanie slučky a video na pozadí.
- Keep: zmeny farby a nepriehľadnosti, indikátory zaostrenia, krátke prechody stavov, informácie o pokroku.
- Nahradiť: prechody strán a panelov krátkym prelínaním alebo okamžitou zmenou.
- Nikdy: použite pohyb ako jediný spôsob, ako zobraziť chybu, zmenu alebo novú položku.
Jeho implementácia
Na webe zabaľte nepodstatný pohyb do @media (prefers-reduced-motion: no-preferencia) alebo ho prepíšte do @media (prefers-reduced-motion: reduction). V JavaScript si prečítajte window.matchMedia('(preferuje-redukovaný-pohyb: znížiť)') a počúvajte zmeny. Natívne platformy ponúkajú rovnaké nastavenie: SwiftUI, UIKit a Android vám to umožnia skontrolovať. Ak má váš návrhový systém tokeny pohybu, definujte pre každý zmenšený variant, aby sa každý komponent správal rovnako.
Testovanie
Zapnite vo svojom operačnom systéme znížený pohyb a prechádzajte každým kľúčom. Skontrolujte, či sa nič dôležité nestratilo, či sa automaticky nespúšťajú žiadne slučky a či posúvanie neposúva obsah nad rámec toho, čo robí samotný posúvač. Toto nastavenie môžu emulovať aj nástroje pre vývojárov prehliadača.
Snippet implementácie výroby
/* 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; });Kľúč Principle na zapamätanie
- Pohyb môže spôsobiť, že niektorí ľudia budú fyzicky chorí; rešpektovať nastavenie
- Odstráňte cestovanie, zoom, paralaxu a automatické prehrávanie; uchovávať zmeny stavu a spätnú väzbu
- WCAG 2.2.2 pokrýva automatický pohyb; 2.3.3 zahŕňa pohyb z interakcie
- Detekujte nastavenie pomocou preferencií so zníženým pohybom a na každej natívnej platforme
- Navrhnite zmenšený variant pre každý pohybový žetón
Často kladené otázky
Zdroje
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — Webové dokumenty MDN
- Motion — Pokyny pre ľudské rozhranie Apple