Hozzáférhető mozgás: Előnyben részesített, csökkentett mozgásra tervezve a jelentés elvesztése nélkül
Hogyan tervezzünk olyan mozgást, amely tiszteletben tartja a csökkent mozgási beállításokat és a vesztibuláris rendellenességeket: mire van szüksége a WCAG-nek, mit kell eltávolítani, mit kell megtartani és hogyan kell tesztelni.
Core Takeaway
Amikor a felhasználó bekapcsolja a csökkentett mozgást, tartsa meg minden animáció jelentését, de távolítsa el a mozgást: cserélje le a diákat, a nagyításokat és a parallaxist rövid elhalványításokkal vagy azonnali változtatásokkal, állítsa le az automatikus lejátszást, és soha ne hagyatkozzon csak a mozgásra, hogy közöljön valamit. Az interneten a beállítást a prefers-redduced-motion media lekérdezéssel észlelheti.
Miért számít
Néhány ember számára a képernyőn történő mozgás nem ízlés dolga. A W3C megjegyzi, hogy az animáció vestibularis zavarokat válthat ki, olyan reakciókkal, mint a hányinger, a migrén, és súlyos esetekben az ágynyugalom szükséges a felépüléshez. Az operációs rendszerek lehetővé teszik az emberek számára, hogy kevesebb mozgást kérjenek, és az interneten ez a kérés a preferált-csökkentett mozgású médialekérdezésként jelenik meg. Értéke csökken, ha a felhasználó bekapcsolja a beállítást.
Amit a WCAG kér
Két WCAG sikerkritérium vonatkozik a mozgásra. 2.2.2 A Pause, Stop, Hide (Szünet, leállítás, elrejtés) az automatikusan induló mozgásokra vonatkozik, mint például a körhinták és az ismétlődő animáció, és megköveteli a szüneteltetést, leállítást vagy elrejtést. 2.3.3 Az interakciókból származó animáció (AAA szint) a felhasználói interakció által kiváltott mozgásra vonatkozik, és azt javasolja, hogy kerülje a szükségtelen animációt, kínáljon vezérlőt a kikapcsoláshoz, vagy használja az operációs rendszer mozgáscsökkentési beállítását. Még akkor is, ha az AAA-ra nincs szükség, bevált gyakorlat.
Távolítsa el a mozgást, tartsa meg a jelentést
A csökkent mozgás nem jelenti azt, hogy nincs visszajelzés. Annak a felhasználónak, aki megnyom egy gombot, továbbra is tudnia kell, hogy az működik. A cél az állapotváltozás megőrzése és az utazás elvetése.
- Eltávolítás vagy kicsinyítés: nagy diák, nagyítások, parallaxis, görgetéssel összekapcsolt mozgás, pörgés, automatikusan lejátszott hurkok és háttérvideó.
- Megtartás: szín- és átlátszatlanság-változások, fókuszjelzők, rövid állapotátmenetek, előrehaladási információk.
- Csere: oldal- és panelátmenetek rövid keresztfakítással vagy azonnali változtatással.
- Soha: csak a mozgást használja hiba, változás vagy új elem megjelenítésére.
Megvalósítása
Az interneten a nem lényeges mozgást csomagolja a @media karakterláncba (prefers-redduced-motion: no-preference), vagy írja felül a @media-ban (prefers-redduced-motion: Reduction). A JavaScript fájlban olvassa el a window.matchMedia('(prefers-reduced-motion: Reduction)') olvasást, és figyelje a változásokat. A natív platformok ugyanazt a beállítást teszik ki: a SwiftUI, az UIKit és a Android lehetővé teszi az ellenőrzést. Ha a tervezőrendszer rendelkezik mozgásjogkivonatokkal, határozzon meg mindegyikhez egy csökkentett változatot, hogy minden összetevő ugyanúgy viselkedjen.
Tesztelés
Kapcsolja be a csökkentett mozgást az operációs rendszerben, és járjon végig minden billentyűfolyamon. Ellenőrizze, hogy semmi fontos nem vész el, nem indul el automatikusan a ciklus, és hogy a görgetés nem mozgatja-e túl a tartalmat azon, amit maga a görgetés tesz. A böngésző fejlesztői eszközei is emulálhatják a beállítást.
Gyártási megvalósítási részlet
/* 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; });Kulcs Principle, amit meg kell jegyezni
- A mozgás néhány embert fizikailag megbetegíthet; tartsa tiszteletben a beállítást
- Távolítsa el az utazást, a nagyítást, a parallaxist és az automatikus lejátszást; tartsa az állapotváltozásokat és a visszajelzéseket
- A WCAG 2.2.2 lefedi az automatikus mozgást; A 2.3.3 az interakcióból származó mozgást fedi le
- A beállítás észlelése prefers-redduced-motion funkcióval és minden natív platformon
- Tervezzen meg egy csökkentett változatot minden mozgásjelzőhöz
Gyakran Ismételt Kérdések
Források
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN webdokumentumok
- Motion — Az Apple emberi interfész irányelvei