Prefers reduced motion: animasjon alle kan bruke

Prefers reduced motion, skrevet prefers-reduced-motion i CSS, er en mediefunksjon som forteller nettstedet ditt at en besøkende har bedt enheten sin om å minimere ikke-nødvendig bevegelse. Når den rapporterer reduce, bør du roe ned siden: stopp løkker som spilles av automatisk, bytt ut skyv, zoom og parallakse med myke uttoninger eller ingenting, og vis stillestående versjoner av animerte bakgrunner. Det er en liten mengde arbeid som gjør et nettsted brukbart for folk som ellers ville forlatt det med en følelse av uvelhet.

Hvem redusert bevegelse er for

Noen har vestibulære lidelser, som påvirker det indre øret og hjernens sans for balanse og bevegelse. For dem kan stor bevegelse på skjermen, særlig parallakse, zooming og elementer som glir over store områder, utløse svimmelhet, kvalme, hodepine eller desorientering. Andre synes konstant bevegelse er forstyrrende, har migrene eller foretrekker rett og slett en roligere skjerm. Alle bruker den samme bryteren i enhetsinnstillingene sine, og de skal ikke måtte forklare hvorfor.

Hva du reduserer, og hva som kan bli

Redusert bevegelse er ikke det samme som ingen bevegelse. Målet er å fjerne bevegelse som simulerer en reise gjennom rommet eller fyller store deler av skjermen, og å stoppe alt som spilles av på egen hånd. Små, raske tilbakemeldinger og enkle uttoninger er som regel greit, og hjelper ofte folk med å forstå hva som endret seg.

Bytt ut i stedet for å slette der du kan. Hvis et panel vanligvis glir inn fra siden, lar du det tone inn i stedet. Hvis heroen spiller en løkke, viser du et stillbilde fra den. Designet forblir intakt, og bare reisen forsvinner.

Slik respekterer du prefers-reduced-motion i CSS

Den mest robuste tilnærmingen er å behandle bevegelse som en forbedring. Skriv det stillestående designet først, og legg så til bevegelse inne i en mediespørring som bare gjelder når den besøkende ikke har noen preferanse. Hvis spørringen ikke støttes eller innstillingen er på, står siden ganske enkelt stille. MDN-siden om prefers-reduced-motion dokumenterer funksjonen.

/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}

Redusert bevegelse i JavaScript, video og canvas

Bevegelse som drives av skript, som rulleeffekter, bakgrunner i canvas eller WebGL og video, trenger en sjekk i JavaScript. Les innstillingen med matchMedia, og lytt etter endringer, for folk kan bytte den mens siden din er åpen.

const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()

Bakgrunnsvideoer og levende gradienter er de vanligste synderne fordi de spilles av på egen hånd. Videobakgrunner på nettsteder og shadergradienter viser begge hvor sjekken hører hjemme.

Hva WCAG sier om bevegelse

Tre suksesskriterier i Web Content Accessibility Guidelines handler om bevegelse. Støtte for redusert bevegelse er den praktiske måten å oppfylle det første på, og en pausekontroll tar seg av det andre.

Designe stillestående versjoner som fortsatt ser bra ut

Den stillestående versjonen skal ikke føles som en ødelagt versjon. For animerte bakgrunner velger du bildet som ser best ut alene, ikke det som tilfeldigvis kommer først. For inntog sørger du for at det endelige oppsettet er komplett uten dem. For løkker laget av et merkevaremateriale holder et godt valgt stillbilde av det samme materialet identiteten intakt. Prinsipper for bevegelsesdesign foreslår av den grunn å teste hver animasjon med ett enkelt pauset bilde.

Gradiently følger samme regel: levende Marks i appen står stille når enheten din ber om redusert bevegelse, og ethvert design du eksporterer som en løkke, kan også eksporteres som et PNG-stillbilde av den samme Marken, til steder der bevegelse ikke er velkommen. For innlegg i sosiale medier, der du ikke kan oppdage innstillingen, er den vennligste tilnærmingen langsom, myk bevegelse. Se animerte gradientbakgrunner.

1. 1

   Slå på innstillingen

   Aktiver redusert bevegelse i operativsystemet ditt og last nettstedet på nytt.

2. 2

   Sjekk alt som beveger seg

   Heroer, karuseller, rulleeffekter, videoer, canvaser og lastetilstander skal alle være rolige.

3. 3

   Bytt den mens siden er åpen

   Skriptene dine skal følge endringen uten at siden lastes på nytt.

4. 4

   Emuler den i utviklerverktøyene

   Chrome og Firefox kan emulere mediefunksjonen, noe som går raskere mens du jobber.

5. 5

   Se på det stillestående designet

   Sørg for at den reduserte versjonen ser tilsiktet og komplett ut, ikke som noe som ikke ble lastet.