This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Jak se animace vypnou při provozu?
Paralax efekty při rolování, prvky, které létají nahoru při kliknutí, stránky, které otáčí při přepínání: U lidí s vestibulárními poruchami tyto pohyby vyvolávají závratě, nevolnost a bolest hlavy. Kritérium 2.3.3 úrovně AAA vyžaduje, aby animace vyvolaná operací byla vypnuta, pokud animace není nezbytná pro funkci nebo informace.
Co kritérium vyžaduje
Jakýkoli pohyb, ke kterému dojde v důsledku operace (rolování, klikání, psaní, přepínání), lze vypnout, aniž by došlo ke ztrátě funkce. Jemný svitek ke kotvě se stane skokem, okamžitě se objeví přední menu, pozadí paralaxy se zastaví. Základní animace jsou vyloučeny: ukazatel pokroku ukazující posloupnost nebo simulaci, jehož obsahem je pohyb.
Implementace prostřednictvím nastavení systému
Operační systémy mají nastavení "redukce pohybu", které prohlížeč předává jako mediální dotaz prefers- reduced- motion. Stylesheet, který nastavuje všechny přechody a animace na nulu v rámci tohoto dotazu splňuje kritérium pro vše, co je animované prostřednictvím CSS. Pro JavaScript animace, stejný dotaz se vyhodnotí před zahájením. Samostatný přepínač na stránce je doplněk pro lidi, kteří neznají nastavení systému.
Takhle se s tím vypořádáváme
Měření může zkontrolovat, zda stylesheet obsahuje pravidlo prefers- reduced- motion a zda animace končí pod ním; Pokud JavaScript animace poslouchat, recenzent uvidí, když pracuje s nastavením zapnuto. Kritérium patří do kategorie AAA ve znalosti.
Příklady
Paralax bez vypnutí
.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; }
}Nastavení systému "Snižte pohyb" vypne všechny pohyby, které nejsou potřebné pro funkci.
- Přidat blok pro preferens- reduced- pohyb do stylesheet, který nastavuje přechody a animace na 0.01 ms trvání a scroll- chování do auta.
- Vyhodnoťte dotaz v JavaScriptu (matchMedia) a spusťte paralaxy a letové efekty pouze v případě, že je povolen pohyb.
- Test s nastavením systému na: Nic není dovoleno klouzat, létat nebo otáčet.
- Nabídněte viditelné tlačítko "Vypnout pohyb", které ušetří volbu v prohlížeči.
