Tillgänglig rörelse: Designar för föredrar-reducerad rörelse utan att förlora mening
Hur man designar rörelser som respekterar inställningar för reducerad rörelse och vestibulära störningar: vad WCAG kräver, vad man ska ta bort, vad man ska behålla och hur man testar.
Core Takeaway
När en användare aktiverar reducerad rörelse, behåll innebörden av varje animation men ta bort rörelsen: ersätt diabilder, zoomningar och parallax med korta toningar eller omedelbara ändringar, sluta spela loopar automatiskt och lita aldrig på enbart rörelse för att kommunicera något. På webben identifierar du inställningen med mediefrågan prefers-reduced-motion.
Varför det spelar roll
För vissa människor är rörelse på skärmen inte en smaksak. W3C noterar att animering kan utlösa vestibulära störningar, med reaktioner som inkluderar illamående, migrän och, i svåra fall, behov av sängläge för att återhämta sig. Operativsystem låter människor begära mindre rörelse, och på webben är denna begäran exponerad som föredrar-reducerad-rörelse-mediefrågan. Dess värde minskas när användaren har aktiverat inställningen.
Vad WCAG frågar efter
Två WCAG framgångskriterier täcker rörelse. 2.2.2 Pausa, Stopp, Dölj gäller rörelse som startar automatiskt, såsom karuseller och loopinganimationer, och kräver ett sätt att pausa, stoppa eller dölja den. 2.3.3 Animering från interaktioner (nivå AAA) gäller för rörelse som utlöses av användarinteraktion, och föreslår att man undviker onödig animering, erbjuder en kontroll för att stänga av den eller använder operativsystemets inställning för reducering av rörelse. Även där AAA inte krävs är det god praxis att följa det.
Ta bort rörelse, behåll mening
Minskad rörelse betyder inte ingen återkoppling. En användare som trycker på en knapp måste fortfarande veta att det fungerade. Målet är att behålla statens förändring och släppa resandet.
- Ta bort eller reducera: stora bilder, zoomningar, parallax, rullningslänkad rörelse, spinning, autospelande loopar och bakgrundsvideo.
- Behåll: färg- och opacitetsändringar, fokusindikatorer, korta tillståndsövergångar, framstegsinformation.
- Byt ut: sida och panelövergångar med en kort övertoning eller en omedelbar förändring.
- Aldrig: använd rörelse som det enda sättet att visa ett fel, en ändring eller ett nytt föremål.
Genomför det
På webben lindar du icke-essentiell rörelse i @media (prefers-reduced-motion: no-preference), eller åsidosätt den inuti @media (prefers-reduced-motion: reduce). I JavaScript, läs window.matchMedia('(prefers-reduced-motion: reduce)') och lyssna efter ändringar. Inbyggda plattformar exponerar samma inställning: SwiftUI, UIKit och Android låter dig kontrollera det. Om ditt designsystem har rörelsesymboler, definiera en reducerad variant för var och en så att varje komponent beter sig på samma sätt.
Testning
Aktivera reducerad rörelse i ditt operativsystem och gå igenom varje tangentflöde. Kontrollera att inget viktigt går förlorat, att inga loopar startar automatiskt och att rullningen inte flyttar innehållet längre än vad själva rullningen gör. Verktyg för webbläsarutvecklare kan också emulera inställningen.
Produktionsimplementeringsutdrag
/* 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; });Nyckel Principles att komma ihåg
- Rörelse kan göra vissa människor fysiskt sjuka; respektera inställningen
- Ta bort resor, zoom, parallax och auto-play; behålla tillståndsändringar och feedback
- WCAG 2.2.2 täcker automatisk rörelse; 2.3.3 täcker rörelse från interaktion
- Upptäck inställningen med prefers-reduced-motion och på varje inbyggd plattform
- Designa en reducerad variant för varje rörelsetoken
Vanliga frågor
Källor
- 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 riktlinjer för mänskligt gränssnitt