Tilgængelig bevægelse: Design til foretrækker-reduceret bevægelse uden at miste mening
Sådan designes bevægelse, der respekterer indstillinger for reduceret bevægelse og vestibulære lidelser: hvad WCAG kræver, hvad skal fjernes, hvad skal beholdes, og hvordan man tester.
Core Takeaway
Når en bruger aktiverer reduceret bevægelse, behold betydningen af hver animation, men fjern bevægelsen: Erstat dias, zoom og parallakse med korte udtoninger eller øjeblikkelige ændringer, stop automatisk afspilning af loops, og stol aldrig på bevægelse alene for at kommunikere noget. På nettet kan du registrere indstillingen med medieforespørgslen foretrukket-reduceret bevægelse.
Hvorfor det betyder noget
For nogle mennesker er bevægelse på skærmen ikke en smagssag. W3C bemærker, at animation kan udløse vestibulære lidelser, med reaktioner, der inkluderer kvalme, migræne og, i alvorlige tilfælde, behov for sengeleje for at komme sig. Operativsystemer lader folk bede om mindre bevægelse, og på nettet afsløres denne anmodning som medieforespørgslen foretrækker-reduceret bevægelse. Dens værdi reduceres, når brugeren har slået indstillingen til.
Hvad WCAG beder om
To WCAG succeskriterier dækker bevægelse. 2.2.2 Pause, Stop, Hide gælder for bevægelse, der starter automatisk, såsom karruseller og looping-animation, og kræver en måde at sætte den på pause, stoppe eller skjule. 2.3.3 Animation fra interaktioner (niveau AAA) gælder for bevægelse udløst af brugerinteraktion og foreslår, at man undgår unødvendig animation, tilbyder en kontrol til at slå den fra eller bruger operativsystemets indstilling for reducere bevægelse. Selv hvor AAA ikke er påkrævet, er det god praksis at følge det.
Fjern bevægelse, bevar mening
Reduceret bevægelse betyder ikke ingen feedback. En bruger, der trykker på en knap, skal stadig vide, at det virkede. Målet er at holde tilstandsskiftet og droppe rejserne.
- Fjern eller reducer: store dias, zoom, parallakse, scroll-linked bevægelse, spinning, auto-playing loops og baggrundsvideo.
- Behold: farve- og opacitetsændringer, fokusindikatorer, korte tilstandsovergange, fremskridtsinformation.
- Erstat: side- og panelovergange med en kort udtoning eller en øjeblikkelig ændring.
- Aldrig: brug bevægelse som den eneste måde at vise en fejl, en ændring eller et nyt emne.
Implementering af det
På nettet skal du pakke ikke-essentielle bevægelser ind i @media (preferers-reduced-motion: no-preference), eller tilsidesætte det inde i @media (prefers-reduced-motion: reduce). I JavaScript, læs window.matchMedia('(prefers-reduced-motion: reduce)') og lyt efter ændringer. Native platforme afslører den samme indstilling: SwiftUI, UIKit og Android lader dig alle kontrollere det. Hvis dit designsystem har bevægelsestokens, skal du definere en reduceret variant for hver enkelt, så hver komponent opfører sig på samme måde.
Afprøvning
Slå reduceret bevægelse til i dit operativsystem, og gå gennem hvert tasteflow. Tjek, at intet vigtigt går tabt, at ingen loops starter automatisk, og at scrollning ikke flytter indholdet ud over, hvad scrollen selv gør. Browserudviklerværktøjer kan også efterligne indstillingen.
Snippet til produktionsimplementering
/* 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 for at huske
- Bevægelse kan gøre nogle mennesker fysisk syge; respektere indstillingen
- Fjern rejse, zoom, parallakse og auto-play; holde tilstandsændringer og feedback
- WCAG 2.2.2 dækker automatisk bevægelse; 2.3.3 dækker bevægelse fra interaktion
- Registrer indstillingen med foretrækker-reduceret bevægelse og på hver indbygget platform
- Design en reduceret variant for hver bevægelsestoken
Ofte stillede spørgsmå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 grænseflade