Helppokäyttöinen liike: Suunnittelu mieluiten-vähennettyyn liikkeeseen menettämättä merkitystä
Kuinka suunnitella liikettä, joka kunnioittaa rajoittunutta liikettä ja vestibulaarihäiriöitä: mitä WCAG vaatii, mitä poistaa, mitä säilyttää ja miten testata.
Core Takeaway
Kun käyttäjä ottaa käyttöön pienennetyn liikkeen, säilytä jokaisen animaation merkitys, mutta poista liike: vaihda diat, zoomaukset ja parallaksi lyhyillä häivytyksillä tai välittömillä muutoksilla, lopeta automaattinen toisto äläkä koskaan luota pelkkään liikkeen viestimiseen. Tunnista asetus verkossa etusija-alennusmediakyselyllä.
Miksi sillä on väliä
Joillekin ihmisille liike näytöllä ei ole makuasia. W3C huomauttaa, että animaatio voi laukaista vestibulaarihäiriöitä, joihin voi liittyä pahoinvointia, migreeniä ja vaikeissa tapauksissa vuodelepoa toipuakseen. Käyttöjärjestelmät antavat ihmisten pyytää vähemmän liikettä, ja verkossa tämä pyyntö paljastetaan mieluiten-vähennetty-mediakyselynä. Sen arvo pienenee, kun käyttäjä on ottanut asetuksen käyttöön.
Mitä WCAG pyytää
Kaksi WCAG menestyskriteeriä kattaa liikkeen. 2.2.2 Pause, Stop, Hide koskee liikettä, joka alkaa automaattisesti, kuten karusellit ja silmukkaanimaatiot, ja vaatii tavan keskeyttää, pysäyttää tai piilottaa se. 2.3.3 Animaatio vuorovaikutuksista (taso AAA) koskee käyttäjän vuorovaikutuksen laukaisemaa liikettä, ja se ehdottaa tarpeettoman animaation välttämistä, ohjauksen tarjoamista sen sammuttamiseksi tai käyttöjärjestelmän liikkeen vähennysasetuksen käyttämistä. Vaikka AAA:ta ei vaadita, sen noudattaminen on hyvä käytäntö.
Poista liike, säilytä merkitys
Vähentynyt liike ei tarkoita, ettei palautetta ole. Painiketta painavan käyttäjän on silti tiedettävä, että se toimii. Tavoitteena on pitää tilanmuutos ja jättää matkustaminen pois.
- Poista tai pienennä: suuret diat, zoomaukset, parallaksi, vieritysliike, pyöriminen, automaattisesti toistuvat silmukat ja taustavideo.
- Säilytä: värin ja peittävyyden muutokset, tarkennusilmaisimet, lyhyet tilasiirtymät, edistymistiedot.
- Korvaa: sivun ja paneelin siirtymät lyhyellä ristihäivytyksellä tai välittömällä muutoksella.
- Ei koskaan: käytä liikettä ainoana tapana näyttää virhe, muutos tai uusi kohde.
Sen toteuttaminen
Kääri ei-olennainen liike verkossa @mediaan (prefers-reduced-motion: no-preference) tai ohita se @median sisällä (prefers-reduced-motion: vähennä). Lue JavaScript:ssä window.matchMedia('(prefers-reduced-motion: vähentää)') ja kuuntele muutoksia. Alkuperäiset alustat paljastavat saman asetuksen: SwiftUI, UIKit ja Android antavat sinun tarkistaa sen. Jos suunnittelujärjestelmässäsi on liiketokeneja, määritä jokaiselle supistettu muunnelma, jotta jokainen komponentti käyttäytyy samalla tavalla.
Testaus
Ota käyttöön käyttöjärjestelmäsi alennettu liike ja käy läpi jokaisen näppäinvirran. Tarkista, ettei mitään tärkeää menetetä, ettei mikään silmukka ala automaattisesti ja että vieritys ei siirrä sisältöä pidemmälle kuin itse vieritys tekee. Selaimen kehittäjätyökalut voivat myös emuloida asetusta.
Tuotannon toteutuskatkelma
/* 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; });Avain Principles muistettavat
- Liike voi saada jotkut ihmiset fyysisesti sairaaksi; kunnioittaa asetusta
- Poista matka, zoomaus, parallaksi ja automaattinen toisto; säilytä tilan muutokset ja palaute
- WCAG 2.2.2 kattaa automaattisen liikkeen; 2.3.3 kattaa vuorovaikutuksesta johtuvan liikkeen
- Tunnista asetus mieluiten vähennetyllä liikkeellä ja jokaisella alkuperäisellä alustalla
- Suunnittele alennettu variantti jokaiselle liiketunnisteelle
Usein kysytyt kysymykset
Lähteet
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Web Docs
- Motion — Applen käyttöliittymäohjeet