Accessible Motion: Navrhování pro preferovaný omezený pohyb bez ztráty smyslu
Jak navrhnout pohyb, který respektuje nastavení omezeného pohybu a vestibulární poruchy: co WCAG vyžaduje, co odstranit, co ponechat a jak testovat.
Core Takeaway
Když uživatel zapne omezený pohyb, ponechte význam každé animace, ale odstraňte pohyb: nahraďte snímky, přiblížení a paralaxu krátkými prolínáními nebo okamžitými změnami, zastavte automatické přehrávání smyček a nikdy se nespoléhejte na to, že něco sdělujete pouze pohybem. Na webu zjistěte nastavení pomocí dotazu na média s preferovaným omezením pohybu.
Proč na tom záleží
Pro některé lidi není pohyb na obrazovce věcí vkusu. W3C poznamenává, že animace může vyvolat vestibulární poruchy s reakcemi, které zahrnují nevolnost, migrénu a ve vážných případech i potřebu odpočinku na lůžku, aby se zotavil. Operační systémy umožňují lidem žádat o méně pohybu a na webu je tento požadavek vystaven jako dotaz na média s preferovaným redukovaným pohybem. Jeho hodnota se sníží, když uživatel nastavení zapne.
Co požaduje WCAG
Dvě kritéria úspěchu WCAG zahrnují pohyb. 2.2.2 Pozastavit, zastavit, skrýt se vztahuje na pohyb, který se spouští automaticky, jako jsou karusely a opakující se animace, a vyžaduje způsob, jak jej pozastavit, zastavit nebo skrýt. 2.3.3 Animace z interakcí (úroveň AAA) se vztahuje na pohyb spouštěný interakcí uživatele a navrhuje vyhnout se zbytečné animaci, nabízí ovládací prvek pro její vypnutí nebo použití nastavení omezení pohybu operačního systému. I tam, kde AAA není vyžadováno, je dobré ho dodržovat.
Odstraňte pohyb, ponechte smysl
Snížený pohyb neznamená žádnou zpětnou vazbu. Uživatel, který stiskne tlačítko, musí stále vědět, že funguje. Cílem je udržet změnu stavu a upustit od cestování.
- Odstraňte nebo zmenšete: velké snímky, přiblížení, paralaxu, rolovací pohyb, otáčení, automatické přehrávání smyček a videa na pozadí.
- Keep: změny barvy a krytí, indikátory zaostření, krátké přechody stavů, informace o průběhu.
- Nahradit: přechody stránek a panelů krátkým prolínáním nebo okamžitou změnou.
- Nikdy: použijte pohyb jako jediný způsob, jak zobrazit chybu, změnu nebo novou položku.
Jeho implementace
Na webu zabalte nepodstatný pohyb do @media (prefers-reduced-motion: no-preference) nebo jej přepište uvnitř @media (prefers-reduced-motion: reduction). V JavaScript si přečtěte window.matchMedia('(prefers-reduced-motion: reduction)') a poslouchejte změny. Nativní platformy nabízejí stejné nastavení: SwiftUI, UIKit a Android vám to umožní zkontrolovat. Pokud má váš návrhový systém tokeny pohybu, definujte pro každý z nich zmenšenou variantu, aby se každá komponenta chovala stejně.
Testování
Zapněte v operačním systému omezený pohyb a projděte si každý tok kláves. Zkontrolujte, že se nic důležitého neztratilo, že se automaticky nespouštějí žádné smyčky a že posouvání neposouvá obsah nad rámec toho, co dělá samotné posouvání. Nástroje pro vývojáře prohlížeče mohou toto nastavení také emulovat.
Fragment implementace 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; });Klíč Principle k zapamatování
- Pohyb může u některých lidí způsobit fyzické onemocnění; respektovat nastavení
- Odstraňte cestování, zoom, paralaxu a automatické přehrávání; zachovat změny stavu a zpětnou vazbu
- WCAG 2.2.2 pokrývá automatický pohyb; 2.3.3 pokrývá pohyb z interakce
- Zjistěte nastavení pomocí preferencí s omezeným pohybem a na každé nativní platformě
- Navrhněte zmenšenou variantu pro každý žeton pohybu
Č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 pro lidské rozhraní Apple