This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Prístupnosť
Ako sa pri prevádzkovaní vypnú animácie?
Paralaxné efekty pri posúvaní, prvky, ktoré lietajú hore pri kliknutí, stránky, ktoré sa otáčajú pri prepínaní: Pre ľudí s vestibulárnymi poruchami takéto pohyby vyvolávajú závraty, nevoľnosť a bolesť hlavy. Kritérium 2.3.3 úrovne AAA vyžaduje, aby sa vypnúť animácie spustené operáciou, pokiaľ animácia nie je pre funkciu alebo informácie nevyhnutná.
Čo vyžaduje kritérium
Akýkoľvek pohyb, ktorý sa vyskytne v dôsledku operácie (rolovanie, klikanie, písanie, potiahnutie) môže byť vypnutý bez straty funkcie. Jemný zvitok k kotve sa stane skokom, okamžite sa objaví predné menu, paralaxné pozadie stojí. Základné animácie sú vylúčené: ukazovateľ pokroku zobrazujúci sekvenciu alebo simuláciu, ktorej obsahom je pohyb.
Implementácia prostredníctvom nastavenia systému
Operačné systémy majú nastavenie zredukovať pohyb, ktoré prehliadač prechádza ako mediálne dotaz preferuje-znížená-pohyb. Štýl, ktorý nastaví všetky prechody a animácie na nulu podľa tohto dotazu spĺňa kritérium pre všetko, čo je animované cez CSS. Pre animácie JavaScriptu sa pred začiatkom vyhodnocuje rovnaká otázka. Samostatný prepínač na stránke je doplnkom pre ľudí, ktorí nepoznajú nastavenie systému.
Takto sa s tým vysporiadame
Meranie môže skontrolovať, či stylesheet obsahuje pravidlo pre preferencie-zníženie pohybu a či animácie končia pod ním; Ak si to vypočujú animácie JavaScriptu, recenzent uvidí, kedy pracuje s nastavením. Kritérium patrí do kategórie AAA v poznatkoch.
Príklady
Paralax bez vypnutia
.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; }
}Systém nastavenia.
- Pridať blok preferuje-zníženie-motion do štýlu, ktorý nastaví prechody a animácie na 0.01 ms trvanie a rolovanie-behavior auto.
- Vyhodnotiť dotaz v JavaScript (matchMedia) a začať paralax a letové efekty, len ak je pohyb povolený.
- Test s nastavením systému na: Nič nie je dovolené klziť, lietať alebo otáčať.
- Ponuka viditeľného tlačidla vypnutie pohybu, ktorý ukladá voľbu v prehliadači.
