Bronnen · 66
Animatie: controleer of de beweging beperkt is, pauzeer en begrijpbaar
Breng beweging in kaart, bied gereduceerd gedrag aan en test of de voortgang, status en navigatie begrijpelijk blijven zonder animatie.
Bijgewerkt · 3 min
Wat deze handleiding helpt bereiken
- Inventaristriggers
- Definieer gereduceerd gedrag
- Aparte WCAG-criteria
- Test alle implementaties
Snelle controle
- Sluit gereduceerde beweging alle animatie uit?
- Is criterium 2.3.3 niveau AA?
- Is een globale CSS-regel voldoende?
Stapsgewijze methode
- 1
Inventaristriggers
Lijst met automatische, interactie-geactiveerde en scroll-gekoppelde bewegingen. Scheid statusinformatie van decoratie. Inspecteer ook JavaScript-animaties, video en ingesloten elementen.
Resultaat: register van effecten en doel.
- 2
Definieer gereduceerd gedrag
prefers-reduced-motion geeft aan dat er behoefte is aan minder onnodige bewegingen. Bied een statisch of stiller alternatief aan, terwijl de informatie en bedieningselementen behouden blijven. Vermijd het vervangen van grote translaties door een ander afleidend effect.
Resultaat: gereduceerd gedrag per component.
- 3
Aparte WCAG-criteria
Interactie-animatiecriterium 2.3.3 is niveau AAA. Niveau A-criterium 2.2.2 dekt onder andere bepaalde automatische bewegingen die langer dan vijf seconden duren, naast andere content, tenzij essentieel. Controleer de voorwaarden van het betreffende criterium.
Resultaat: criteria en bedieningselementen voor elk effect.
- 4
Test alle implementaties
Emuleer voorkeuren vóór het laden en tijdens een sessie. Inspecteer stijlen, scripts en programmatisch scrollen. Als de status afhankelijk is van de voltooiing van een animatie, zorg dan voor een betrouwbare conclusie wanneer de animatie ook wordt verwijderd.
Resultaat: koude-laad-, live-wijzigings- en eindtoestandproeven.
- 5
Informatie en bedieningselementen behouden
Lees-, toetsenbord- en foutfeedback in beide modi testen. Test voor de betreffende automatische beweging het pauzeren, stoppen of verbergen en de stabiliteit tijdens het lezen. Documenteer uitzonderingen in plaats van elke animatie als essentieel te labelen.
Resultaat: bewijs en beperkingen.
Herbruikbaar werkblad
Vul in met uw geautoriseerde observaties. Deze velden zijn een werksjabloon, geen waargenomen resultaten.
| Veld | Informatie om vast te leggen |
|---|---|
| Effect | Trigger, duur en informatie |
| Alternatief | Gereduceerde versie en eindstatus |
| Criterium | Niveau, voorwaarden en besturing |
| Proef | Voorkeur, toetsenbord, resultaat en limiet |
Fictief uitgewerkt voorbeeld
Illustratieve situatie
Fictief voorbeeld: een paneel wordt pas actief nadat de overgang is voltooid.
Beslissing en verwachte bewijs
Acceptatie in de gereduceerde modus onthult de wachttijd; de component voltooit de statuswijziging zonder afhankelijk te zijn van de animatieduur.
Onderscheid de mechanismen
| Mechanisme | Doel | Verificatie of beperking |
|---|---|---|
| Voorkeur voor bewegingsbeperking | Aanpassen aan systeemkeuzes | Scripts ook controleren |
| Pauzebediening | Bediening van beïnvloede automatische beweging | Toetsenbordbediening mogelijk maken |
| Statische status | Informatie behouden zonder beweging | Voortgangs- of foutmeldingen niet verwijderen |
Managementindicatoren
| Indicator | Wat het meet | Eerste actie |
|---|---|---|
| Aangepaste effecten | Beweging met geverifieerde alternatieven | Insluiten en scrollen opnemen |
| Bewaarde taken | Voltooide reizen in beperkte modus | Animatieafhankelijke statussen inspecteren |
| Werkende bedieningselementen | Pauze of stop daadwerkelijk effectief | Hervatten en toetsenbord controleren |
Veelvoorkomende fouten
- Scripts ook controleren
- Toetsenbordbediening mogelijk maken
- Voortgangs- of foutmeldingen niet verwijderen
Veelgestelde vragen
Sluit gereduceerde beweging alle animatie uit?
Nee. Het geeft een voorkeur aan; kies een proportionele aanpassing en behoud de benodigde informatie.
Is criterium 2.3.3 niveau AA?
Nee, het is AAA. Andere criteria kunnen van toepassing zijn op automatische beweging of knipperen.
Is een globale CSS-regel voldoende?
Het kan veel effecten verminderen, maar beheert mogelijk geen scripts, video's of integraties. Test de daadwerkelijke componenten.
Officiële referenties
Referenties ondersteunen de methode. Pas controles aan uw context aan; ze zijn geen certificering. Originele referentietitels en brondocumenten kunnen in een andere taal zijn.
Bronnen geraadpleegd op .
