Frontend Academy · Oppitunti

prefers-reduced-motion-asetuksen huomioiminen

Tunnista prefers-reduced-motion-media query ja poista animaatiot käytöstä tai vähennä niitä käyttäjillä, jotka ovat pyytäneet vähemmän liikettä

Oppitunti 4/413 vaihetta

prefers-reduced-motion-asetuksen huomioiminen on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

prefers-reduced-motion-mediaominaisuus

Jotkut käyttäjät kokevat käyttöliittymien liikkeestä pahoinvointia, huimausta tai kohtauksia. He asettavat käyttöjärjestelmänsä vähentämään liikettä. prefers-reduced-motion-mediaominaisuus tunnistaa tämän asetuksen, jotta CSS voi reagoida siihen.

Vähäisemmän liikkeen tunnistaminen CSS:ssä

Ympäröikää animaatiot vastakkaisella kyselyllä: käyttäkää animaatioita normaalisti ja ohittakaa tai poistakaa ne käytöstä käyttäjiltä, jotka suosivat vähäisempää liikettä.

/* Apply animation by default */
.spinner {
  animation: spin 1s linear infinite;
}

/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

Periaate: vähennetty, ei poistettu

prefers-reduced-motion: reduce ei tarkoita, ettei liikettä saa olla lainkaan. Osa liikkeestä välittää tärkeitä käyttöliittymän tilamuutoksia. Älkää poistako animaatioita kokonaan, vaan hidastakaa niitä tai yksinkertaistakaa ne ristihäivytyksiksi.

@media (prefers-reduced-motion: reduce) {
  .modal {
    /* Replace scale + fade with just fade */
    animation: fadeOnly 0.1s linear;
  }
  @keyframes fadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

Järeä vaihtoehto: poistakaa kaikki animaatiot käytöstä

Yleinen toimintatapa on poistaa kaikki siirtymät ja animaatiot käytöstä vähäisempää liikettä suosiville käyttäjille. Tämä on turvallinen perusratkaisu, vaikka kaikkia animaatioita ei olisi säädetty erikseen.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Vähäisemmän liikkeen tunnistaminen JavaScriptissä

Tunnistakaa asetus JavaScriptissä matchMedia-rajapinnan avulla — se on hyödyllinen canvas-animaatioiden, JavaScriptillä ohjattavan liikkeen tai videoiden automaattisen toiston hallintaan.

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReduced.matches) {
  // skip gsap or canvas animations
} else {
  startAnimation();
}

// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
  if (e.matches) stopAnimations();
  else startAnimations();
});

Vierityksen toiminta ja automaattinen toisto

Poistakaa vähäisempää liikettä suosivilta käyttäjiltä myös sulava vieritys käytöstä: scroll-behavior: auto. Pysäyttäkää videoiden automaattinen toisto. Älkää välkyttäkö tai strobotko sisältöä.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

// In JS:
if (!prefersReduced.matches) {
  element.scrollIntoView({ behavior: 'smooth' });
} else {
  element.scrollIntoView(); // instant
}

WCAG 2.3.3 — vuorovaikutuksesta käynnistyvä animaatio

WCAG 2.3.3 (taso AAA) edellyttää, että käyttäjän vuorovaikutuksesta käynnistyvä liike voidaan poistaa käytöstä. Noudattamalla prefers-reduced-motion-asetusta täytätte tämän kriteerin ja parannatte vestibulaarisista häiriöistä kärsivien käyttäjien saavutettavuutta.

Vähäisemmän liikkeen testaaminen

Chrome DevToolsissa avatkaa renderöintipaneeli (kolmen pisteen valikko → Lisää työkaluja → Rendering) ja ottakaa käyttöön asetus ”Emulate CSS media feature prefers-reduced-motion”. Testatkaa käyttöliittymänne tässä tilassa ennen julkaisua.

Käytännössä: turvallinen animaatiomalli

Liikkeen huomioiva animaatio otetaan oletusarvoisesti käyttöön ja ympäröidään siten, että se on helppo poistaa käytöstä maailmanlaajuisesti.

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .alert {
    animation: slideIn 0.3s ease;
  }
}

Kohdistusanimaation tulee säilyä

Kohdistuksen ilmaisimia (rengasta, joka osoittaa kohdistetun elementin) EI pidä poistaa edes vähäisempää liikettä suosivilta käyttäjiltä. Ne ovat välttämättömiä näppäimistönavigoinnissa eivätkä yleensä laukaise vestibulaarisia oireita.

Kirjastot ja prefers-reduced-motion

Suosituissa animaatiokirjastoissa (Framer Motion, GSAP, Anime.js) on sisäänrakennettu tuki vähäisemmälle liikkeelle. Framer Motionin useReducedMotion()-hookin avulla monimutkaiset animaatiot on helppo poistaa ehdollisesti käytöstä Reactissa.

Pikatesti

Mikä CSS-mediaominaisuus tunnistaa käyttäjän asetuksen nähdä käyttöliittymässä vähemmän liikettä?

Vastaa interaktiivisessa oppitunnissa

Kertaus: prefers-reduced-motion

Jotkut käyttäjät tarvitsevat vähemmän liikettä vestibulaarisen ja neurologisen terveytensä vuoksi. Poistakaa animaatiot käytöstä tai yksinkertaistakaa niitä komennolla @media (prefers-reduced-motion: reduce). Tunnistakaa asetus JavaScriptissä matchMedia-funktiolla. Järeä vaihtoehto: asettakaa animation/transition-duration-arvoksi kaikkialla 0.01ms. WCAG 2.3.3 suosittelee tätä. Testatkaa toiminta DevToolsin renderöintipaneelissa.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”prefers-reduced-motion-asetuksen huomioiminen” ilmainen?

Kyllä – oppitunnin ”prefers-reduced-motion-asetuksen huomioiminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”prefers-reduced-motion-asetuksen huomioiminen”?

Tunnista prefers-reduced-motion-media query ja poista animaatiot käytöstä tai vähennä niitä käyttäjillä, jotka ovat pyytäneet vähemmän liikettä Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”prefers-reduced-motion-asetuksen huomioiminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

CSS:n mukautetut ominaisuudet: määrittäminen ja päivittäminen
Siirtymät: ominaisuus, kesto ja ajoitus
@keyframes-animaatiot
prefers-reduced-motion-asetuksen huomioiminen

← Takaisin: Frontend Academy