This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Akadálymentesség
Hogyan kapcsol ki animáció, ha operál?
Parallax hatások görgetés közben, elemek, amelyek felrepülnek, amikor kattint, oldalak, amelyek elforgatják kapcsoláskor: A vestibularis rendellenességekben szenvedő betegeknél az ilyen mozgások szédülést, hányingert és fejfájást váltanak ki. Az AAA szint 2.3.3. kritériuma előírja, hogy a művelet által kiváltott animációkat ki kell kapcsolni, kivéve, ha az animáció elengedhetetlen a funkció vagy információ szempontjából.
Mit igényel a kritérium
A művelet eredményeként bekövetkező bármilyen mozgás (görgetés, kattintás, gépelés, lapozás) kikapcsolható anélkül, hogy a függvény elveszne. Egy szelíd tekercs a horgonyhoz lesz egy ugrás, egy vezető menü jelenik meg azonnal, egy parallax háttér áll még. Az alapvető animációk nem tartoznak ide: egy folyamat- vagy szimuláció- mutató, amelynek tartalma a mozgás.
A végrehajtás a rendszer kialakításával
Az operációs rendszerek "csökkentik a mozgást", amit a böngésző továbbít médialekérdezésként prefers- reduced- motion. Egy stilesheet, amely az összes átmenetet és animációt nullára állítja e lekérdezés alatt megfelel a kritériumnak minden, ami animált keresztül CSS. A JavaScript animációk, ugyanaz a lekérdezés előtt értékelik. Egy külön kapcsoló az oldalon egy kiegészítő azoknak, akik nem ismerik a rendszer beállítását.
Így kell ezt kezelni
A mérés ellenőrizheti, hogy a stilesheet tartalmaz-e a prefers- reduced- motion szabályát, és hogy az animációk alatta végződnek-e; Ha a JavaScript animációk meghallgatják, a bíráló látni fogja, ha a beállítás be van kapcsolva. A kritérium a tudás AAA kategóriájába tartozik.
Példák
Parallax leállás nélkül
.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; }
}A rendszer beállítás "Csökkentése mozgás" kikapcsolja az összes mozgás, amelyek nem szükségesek a funkció.
- Adjon egy blokkot a prefers- reduced- motion a stilesheet, amely beállítja az átmenetek és animációk 0,01 ms időtartam és görgős viselkedés automatikus.
- Értékelje a lekérdezés JavaScript (matchMedia), és indítsa parallax és repülési hatások csak akkor, ha a mozgás megengedett.
- Vizsgálat a rendszer beállításával: Semmi sem megengedett többé siklani, repülni vagy forgatni.
- Kínáljon fel egy látható "Mozgalom le" gombot, amely megspórolja a választást a böngészőben.
