Tilgjengelig bevegelse: Design for foretrekker-redusert bevegelse uten å miste mening
Hvordan designe bevegelser som respekterer reduserte bevegelsesinnstillinger og vestibulære lidelser: hva WCAG krever, hva du skal fjerne, hva du skal beholde og hvordan du tester.
Kjerne takeaway
Når en bruker slår på redusert bevegelse, behold betydningen av hver animasjon, men fjern bevegelsen: erstatt lysbilder, zoomer og parallakse med korte fades eller umiddelbare endringer, stopp automatisk avspilling av looper, og stol aldri på bevegelse alene for å kommunisere noe. På nettet oppdager du innstillingen med foretrekker-redusert bevegelse mediesøk.
Hvorfor det betyr noe
For noen mennesker er ikke bevegelse på skjermen en smakssak. W3C bemerker at animasjon kan utløse vestibulære lidelser, med reaksjoner som inkluderer kvalme, migrene og, i alvorlige tilfeller, behov for sengeleie for å komme seg. Operativsystemer lar folk be om mindre bevegelse, og på nettet blir denne forespørselen eksponert som foretrekker-redusert bevegelse mediesøk. Verdien reduseres når brukeren har slått på innstillingen.
Hva WCAG ber om
To WCAG suksesskriterier dekker bevegelse. 2.2.2 Pause, Stopp, Skjul gjelder bevegelse som starter automatisk, for eksempel karuseller og sløyfeanimasjoner, og krever en måte å stoppe, stoppe eller skjule den på. 2.3.3 Animasjon fra interaksjoner (nivå AAA) gjelder bevegelse utløst av brukerinteraksjon, og foreslår å unngå unødvendig animasjon, tilby en kontroll for å slå den av, eller bruke operativsystemets innstilling for redusert bevegelse. Selv der AAA ikke er påkrevd, er det god praksis å følge det.
Fjern bevegelse, behold mening
Redusert bevegelse betyr ikke ingen tilbakemelding. En bruker som trykker på en knapp må fortsatt vite at det fungerte. Målet er å beholde statsskiftet og droppe reisen.
- Fjern eller reduser: store lysbilder, zoomer, parallakse, rullelenket bevegelse, spinning, automatisk avspilling av looper og bakgrunnsvideo.
- Behold: farge- og opasitetsendringer, fokusindikatorer, korte tilstandsoverganger, fremdriftsinformasjon.
- Erstatt: side- og paneloverganger med en kort krysstoning eller en umiddelbar endring.
- Aldri: bruk bevegelse som den eneste måten å vise en feil, en endring eller et nytt element.
Implementere det
På nettet, pakk inn ikke-essensielle bevegelser i @media (foretrekker-redusert-bevegelse: ingen-preferanse), eller overstyr den i @media (foretrekker-redusert-bevegelse: redusere). I JavaScript, les window.matchMedia('(prefers-reduced-motion: reduce)') og lytt etter endringer. Innfødte plattformer viser den samme innstillingen: SwiftUI, UIKit og Android lar deg alle sjekke det. Hvis designsystemet ditt har bevegelsessymboler, definer en redusert variant for hver enkelt slik at hver komponent oppfører seg på samme måte.
Testing
Slå på redusert bevegelse i operativsystemet ditt og gå gjennom hver tasteflyt. Sjekk at ingenting viktig går tapt, at ingen løkker starter automatisk, og at rulling ikke flytter innhold utover det selve rullingen gjør. Nettleserutviklerverktøy kan også emulere innstillingen.
Snippet for produksjonsimplementering
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Tast Principles å huske
- Bevegelse kan gjøre noen mennesker fysisk syke; respekter innstillingen
- Fjern reise, zoom, parallakse og auto-play; holde tilstandsendringer og tilbakemeldinger
- WCAG 2.2.2 dekker automatisk bevegelse; 2.3.3 dekker bevegelse fra interaksjon
- Oppdag innstillingen med foretrekker-redusert bevegelse og på hver innfødt plattform
- Design en redusert variant for hvert bevegelsestoken
Ofte stilte spørsmål
Kilder
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Web Docs
- Motion — Apples retningslinjer for menneskelig grensesnitt