Toegankelijke beweging: ontwerpen voor verminderde beweging zonder de betekenis te verliezen
Hoe beweging te ontwerpen die rekening houdt met verminderde bewegingsinstellingen en vestibulaire stoornissen: wat WCAG nodig heeft, wat te verwijderen, wat te behouden en hoe te testen.
Kern afhaalmaaltijd
Wanneer een gebruiker verminderde beweging inschakelt, behoud dan de betekenis van elke animatie, maar verwijder de beweging: vervang dia's, zoomlenzen en parallax door korte fades of onmiddellijke wijzigingen, stop het automatisch afspelen van loops en vertrouw nooit alleen op beweging om iets te communiceren. Op internet kunt u de instelling detecteren met de mediaquery 'voorkeur voor verminderde beweging'.
Waarom het ertoe doet
Voor sommige mensen is beweging op het scherm geen kwestie van smaak. Het W3C merkt op dat animatie vestibulaire stoornissen kan veroorzaken, met reacties zoals misselijkheid, migraine en, in ernstige gevallen, bedrust nodig hebben om te herstellen. Besturingssystemen laten mensen om minder beweging vragen, en op internet wordt dat verzoek getoond als de mediaquery 'voorkeur voor verminderde beweging'. De waarde ervan wordt verlaagd wanneer de gebruiker de instelling heeft ingeschakeld.
Waar WCAG om vraagt
Twee WCAG-succescriteria hebben betrekking op beweging. 2.2.2 Pauzeren, stoppen, verbergen is van toepassing op bewegingen die automatisch starten, zoals carrousels en looping-animaties, en vereist een manier om deze te pauzeren, stoppen of verbergen. 2.3.3 Animatie van interacties (niveau AAA) is van toepassing op beweging veroorzaakt door gebruikersinteractie, en suggereert het vermijden van onnodige animatie, het aanbieden van een optie om deze uit te schakelen, of het gebruik van de bewegingsreductie-instelling van het besturingssysteem. Zelfs als AAA niet vereist is, is het volgen ervan een goede praktijk.
Verwijder beweging, behoud betekenis
Verminderde beweging betekent niet dat er geen feedback is. Een gebruiker die op een knop drukt, moet nog steeds weten dat deze werkt. Het doel is om de staatsverandering te behouden en het reizen te laten vallen.
- Verwijderen of verkleinen: grote dia's, zoomlenzen, parallax, scroll-gekoppelde bewegingen, draaien, automatisch afgespeelde loops en achtergrondvideo.
- Behouden: kleur- en dekkingsveranderingen, focusindicatoren, korte statusovergangen, voortgangsinformatie.
- Vervangen: pagina- en paneelovergangen met een korte cross-fade of een onmiddellijke wijziging.
- Nooit: gebruik beweging als enige manier om een fout, een wijziging of een nieuw item weer te geven.
Het implementeren ervan
Op internet plaatst u niet-essentiële bewegingen in @media (voorkeur voor verminderde beweging: geen voorkeur), of overschrijft u deze binnen @media (voorkeur voor verminderde beweging: verminderen). Lees in JavaScript window.matchMedia('(prefers-reduced-motion: reduce)') en luister naar wijzigingen. Native platforms hebben dezelfde instelling: met SwiftUI, UIKit en Android kunt u deze allemaal controleren. Als uw ontwerpsysteem bewegingstokens heeft, definieer dan voor elk daarvan een kleinere variant, zodat elk onderdeel zich op dezelfde manier gedraagt.
Testen
Schakel verminderde beweging in uw besturingssysteem in en doorloop elke toetsstroom. Controleer of er niets belangrijks verloren gaat, dat er geen loops automatisch starten en dat het scrollen de inhoud niet verder verplaatst dan wat het scrollen zelf doet. Browserontwikkelaarstools kunnen de instelling ook emuleren.
Productie-implementatiefragment
/* 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; });Toets Principles in om te onthouden
- Beweging kan sommige mensen lichamelijk ziek maken; respecteer de instelling
- Verwijder reizen, zoomen, parallax en automatisch afspelen; statuswijzigingen en feedback bijhouden
- WCAG 2.2.2 omvat automatische beweging; 2.3.3 behandelt beweging als gevolg van interactie
- Detecteer de instelling met voorkeur voor verminderde beweging en op elk native platform
- Ontwerp voor elk bewegingsfiche een verkleinde variant
Veelgestelde vragen
Bronnen
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Webdocumenten
- Motion — Richtlijnen voor menselijke interfaces van Apple