Prefers reduced motion: animation som alla kan använda

Prefers reduced motion, skrivet prefers-reduced-motion i CSS, är en mediafunktion som talar om för din webbplats att en besökare har bett sin enhet minimera icke nödvändig rörelse. När den rapporterar reduce bör du lugna ner sidan: stoppa automatiskt spelande loopar, ersätt glidningar, zoomar och parallax med mjuka toningar eller ingenting och visa stilla versioner av animerade bakgrunder. Det är lite arbete som gör en sajt användbar för människor som annars lämnar den med en känsla av illamående.

Vem minskad rörelse är till för

Vissa har vestibulära besvär, som påverkar innerörat och hjärnans känsla för balans och rörelse. För dem kan stor rörelse på skärmen, särskilt parallax, zoomar och element som glider över stora ytor, utlösa yrsel, illamående, huvudvärk eller desorientering. Andra tycker att ständig rörelse distraherar, har migrän eller föredrar helt enkelt en lugnare skärm. Alla använder samma reglage i enhetens inställningar, och de ska inte behöva förklara varför.

Vad du ska minska och vad som kan vara kvar

Minskad rörelse är inte detsamma som ingen rörelse. Målet är att ta bort rörelse som simulerar färd genom rummet eller fyller stora delar av skärmen, och att stoppa allt som spelas av sig självt. Små, snabba återkopplingar och enkla toningar är oftast lugnt att behålla och hjälper ofta människor att förstå vad som ändrats.

Ersätt hellre än ta bort där du kan. Om en panel vanligtvis glider in från sidan, låt den tona in i stället. Om hero-ytan spelar en loop, visa en stillbild ur den. Designen förblir hel, det är bara färden som försvinner.

Så följer du prefers-reduced-motion i CSS

Det robustaste sättet är att behandla rörelse som en förbättring. Skriv den stilla designen först och lägg sedan till rörelse i en mediafråga som bara gäller när besökaren inte har någon preferens. Om frågan inte stöds eller inställningen är på blir sidan helt enkelt stilla. MDN:s sida om prefers-reduced-motion dokumenterar funktionen.

/* 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%; }
}

Minskad rörelse i JavaScript, video och canvas

Rörelse som styrs av skript, som rullningseffekter, canvas- eller WebGL-bakgrunder och video, behöver en kontroll i JavaScript. Läs inställningen med matchMedia och lyssna efter ändringar, eftersom folk kan slå om den medan din sida är öppen.

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()

Bakgrundsvideor och levande gradienter är de vanligaste syndarna eftersom de spelas av sig själva. Videobakgrunder på webbplatser och shader-gradienter visar båda var kontrollen hör hemma.

Vad WCAG säger om rörelse

Tre framgångskriterier i Web Content Accessibility Guidelines handlar om rörelse. Stöd för minskad rörelse är det praktiska sättet att uppfylla det första, en pausknapp tar hand om det andra.

Stilla versioner som ändå ser bra ut

Den stilla versionen ska inte kännas trasig. För animerade bakgrunder, välj den bild som ser bäst ut för sig själv, inte den bild som råkar komma först. För intoningar, se till att den slutliga layouten är komplett utan dem. För loopar gjorda av ett varumärkesmaterial håller en väl vald stillbild av samma material identiteten intakt. Principer för rörelsedesign föreslår att du testar varje animation med en enda pausad bild av just det skälet.

Gradiently följer samma regel: levande Marks i appen ligger stilla när din enhet ber om minskad rörelse, och varje design du exporterar som loop kan också exporteras som en PNG-stillbild av samma Mark, för platser där rörelse inte är välkommen. För sociala inlägg, där du inte kan känna av inställningen, är det vänligaste en långsam, mjuk rörelse. Se animerad gradientbakgrund.

1. 1

   Slå på inställningen

   Aktivera minskad rörelse i ditt operativsystem och ladda om sajten.

2. 2

   Kontrollera allt som rör sig

   Hero-ytor, karuseller, rullningseffekter, videor, canvas och laddningslägen ska alla vara lugna.

3. 3

   Slå om den medan sidan är öppen

   Dina skript ska följa ändringen utan omladdning.

4. 4

   Emulera den i utvecklarverktygen

   Chrome och Firefox kan emulera mediafunktionen, vilket går snabbare medan du arbetar.

5. 5

   Titta på den stilla designen

   Se till att den minskade versionen ser avsedd och komplett ut, inte som om något misslyckats med att laddas.