Tilgjengelige animasjoner med prefers-reduced-motion
Ta hensyn til tilgjengelighetsbehov ved å deaktivere eller redusere animasjoner for brukere som er følsomme for bevegelse.
Tilgjengelige animasjoner med prefers-reduced-motion er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hvorfor redusere bevegelse?
Noen brukere har vestibulære lidelser, epilepsi eller andre tilstander som gjør animasjoner skadelige. CSS tilbyr mediespørringen prefers-reduced-motion for å oppdage og respektere systeminnstillingen deres.
Mediespørringen prefers-reduced-motion
Mulige verdier:
no-preference— brukeren har ikke angitt noen preferansereduce— brukeren har aktivert redusert bevegelse i operativsystemets innstillinger
<div class="box"></div>
Den nukleære løsningen (ikke anbefalt)
En vanlig, men grov implementering som stopper alle animasjoner. Den fjerner også nyttige bevegelsessignaler som ikke virker desorienterende:
<div class="box"></div>
Bedre: opt-in for bevegelse
Et tryggere mønster er å definere animasjoner bare for brukere uten bevegelsespreferanser, slik at standardtilstanden er uten bevegelse:
<button class="btn">Button</button>
<div class="card">Card</div>
Bytt animasjonstyper
Erstatt desorienterende bevegelser (translate, scale, rotate) med tilgjengelige alternativer (opacity, color) for brukere som foretrekker redusert bevegelse:
<div class="card demo-hover">Hover me</div>
Uendelige animasjoner
Uendelige animasjoner (spinnere, pulsering) er spesielt problematiske. Sørg for et statisk reservealternativ:
<div class="spinner"></div>
Parallakseeffekter
Parallakse under rulling kan føre til alvorlig reisesyke. Deaktiver det alltid for brukere som foretrekker redusert bevegelse:
<div class="parallax">Parallax section</div>
Tilgang fra JavaScript
Kontroller preferansen i JavaScript når De bruker Web Animations API eller rullebiblioteker:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG og bevegelse
WCAG 2.3.3 (AAA) krever at animasjoner som utløses av interaksjon, kan deaktiveres. Å bruke prefers-reduced-motion er den anbefalte CSS-tilnærmingen for å oppfylle dette kriteriet.
Testing av redusert bevegelse
I Chrome DevTools → fanen Rendering aktiverer De «Emulate CSS prefers-reduced-motion: reduce» for å teste uten å endre operativsystemets innstillinger. I macOS: System Preferences → Accessibility → Reduce Motion.
Dokumenter hensikten
Kommenter animasjoner for å forklare om de er funksjonelle eller bare dekorative. Funksjonelle animasjoner (som viser en prosess eller fremdrift) bør ha tilgjengelige alternativer, mens dekorative animasjoner ganske enkelt kan fjernes.
Kort kontroll
Hvilken tilnærming håndterer best prefers-reduced-motion for en kortanimasjon som løfter kortet ved hover?
Oppsummering
Bruk prefers-reduced-motion: reduce for å oppdage bevegelsesfølsomhet. I stedet for å stoppe alle animasjoner bør De ha en standardtilstand uten bevegelse og bare aktivere bevegelse i no-preference-spørringer. Erstatt desorienterende transform-animasjoner med overganger for opacity eller color for brukere som foretrekker redusert bevegelse. Test med emuleringen i DevTools.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Tilgjengelige animasjoner med prefers-reduced-motion» gratis?
Ja – hele teksten i «Tilgjengelige animasjoner med prefers-reduced-motion» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tilgjengelige animasjoner med prefers-reduced-motion»?
Ta hensyn til tilgjengelighetsbehov ved å deaktivere eller redusere animasjoner for brukere som er følsomme for bevegelse. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Tilgjengelige animasjoner med prefers-reduced-motion»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Syntaks for @keyframes og animation-egenskapen
- Animasjonsretning, fill-mode og iterasjon
- Kjeding og sekvensering av animasjoner
- Tilgjengelige animasjoner med prefers-reduced-motion