Vuorovaikutuksesta käynnistyvä animaatio

Mitä vaaditaan

Käyttäjän vuorovaikutuksesta käynnistyvät liikeanimaatiot — parallaksivieritys, sivusiirtymät, hover-laukaistavat zoomaukset, vierityksen mukaan paljastuvat efektit — on poistettava käytöstä, kun käyttäjä pyytää vähennettyä liikettä, ellei animaatio ole toiminnon tai välitetyn tiedon kannalta välttämätön.

Vakiomekanismi on CSS:n prefers-reduced-motion: reduce -mediatyylikysely, joka heijastaa käyttöjärjestelmätason liikkeenvähentämisasetusta, jonka macOS, Windows, iOS ja Android kaikki tarjoavat.

Kuinka vaatimus täytetään

• Kääri kaikki merkityksellinen liike (transformaatiot, suuret siirrot, parallaksi, sivusiirtymät, vieritykseen sidotut animaatiot) @media (prefers-reduced-motion: no-preference) -sääntöön.
• JavaScript-ohjatuissa animaatioissa (GSAP, Framer Motion, Lottie) tarkista window.matchMedia('(prefers-reduced-motion: reduce)').matches ja joko ohita animaatio tai korvaa se välittömällä tilanmuutoksella.
• Salli kriittisten palauteanimaatioiden (latausikoni, raahauksen esikatselu) jatkua hiljaisemmalla amplitudilla myös silloin, kun vähennetty liike on päällä — ne välittävät toiminnallisuuden, eivät pelkkää visuaalisuutta.
• Testaa macOS:n asetuksissa Järjestelmäasetukset → Saavutettavuus → Näyttö → Vähennä liikettä -toiminnolla sekä vastaavilla asetuksilla Windowsissa, iOS:ssä ja Androidissa.

Yleisiä virheitä

• Markkinointisivut, joilla on parallaksivieritys ja jotka sivuuttavat käyttöjärjestelmän liikkeenvähentämisasetuksen.
• Sivujenväliset siirtymäkirjastot (Barba.js, Astro-näkymäsiirtymät vanhemmissa konfiguraatioissa), jotka animoivat suuria siirtoja käyttäjän asetuksesta riippumatta.
• Kortti-hover-nostovaikutukset, joissa on pitkiä translateY-siirtymiä ja jotka aiheuttavat epämukavuutta vestibulaarivaikeuksista kärsiville käyttäjille.
• Vierityksen käynnistämät animaatiot pitkillä sivuilla, jotka laukaisevat kymmeniä liikeefektejä käyttäjän vierittäessä — erityisen hämmentäviä laajassa mittakaavassa.
• Lottie-animaatiot perehdytysvirroissa, jotka toistavat koko näytön liikettä tarkistamatta asetusta.

axe ja Lighthouse eivät luotettavasti havaitse liikkeenvähentämisvirheitä, mutta Lighthouseen on uudemmissa versioissa lisätty prefers-reduced-motion -tarkistus, ja monet suunnittelujärjestelmien linttaustyökalut pakottavat sen nykyisin.

Miksi tämä on tärkeää

Vestibulaarijärjestelmän häiriöt — Ménièren tauti, vestibulaarinen migreeni, aivotärähdyksen jälkitila, krooninen subjektiivinen huimaus — voivat pahentua näytöllä esiintyvästä suuresta tai odottamattomasta liikkeestä. Seurauksena on todellinen, fyysinen pahoinvointi tai huimaus, ei pelkkä epämukavuus. prefers-reduced-motion-kyselyn noudattaminen on yksi edullisimmista ja vaikuttavimmista saavutettavuusparannuksista, ja käyttöjärjestelmätason asetus tarkoittaa, että käyttäjä on jo kertonut tarpeensa.