WCAG 2.3.3: Animatie door interacties

Wat Deze Regel Betekent

WCAG 2.3.3 — Animatie door interacties is een criterium op niveau AAA onder het principe Bedienbaar. Het vereist dat elke bewegingsanimatie die door interactie wordt geactiveerd door de gebruiker kan worden uitgeschakeld, tenzij die animatie essentieel is voor de functionaliteit of de over te brengen informatie. Het criterium is van toepassing op animaties die worden gestart door gebruikersacties zoals klikken, scrollen, hoveren, focussen of elke andere vorm van interactie — niet op animaties die automatisch worden afgespeeld bij het laden van de pagina (die mogelijk onder andere criteria vallen, zoals 2.2.2 Pauzeren, Stoppen, Verbergen).

Het kernconcept hier is bewegingsanimatie. Dit omvat parallax-scroll-effecten, paginatransitie-animaties, schuivende of inzoomende elementen, draaiende indicatoren en elke andere beweging die optreedt als direct gevolg van een gebruikersactie. Het omvat geen eenvoudige opacity-fades of kleurveranderingen, omdat deze geen ruimtelijke beweging inhouden die vestibulaire reacties kan uitlokken. Het onderscheid is tussen beweging door de ruimte (die schade kan veroorzaken) en veranderingen in uiterlijk zonder ruimtelijke verplaatsing (die dat in het algemeen niet kunnen).

Een voldoende resultaat vereist dat gebruikers een betrouwbaar mechanisme hebben om dergelijke animaties uit te schakelen zonder toegang tot dezelfde inhoud of functionaliteit te verliezen. De meest algemeen aanvaarde techniek is het respecteren van de besturingssysteem-brede prefers-reduced-motion media query, die de systeemvoorkeur van de gebruiker om beweging te verminderen weerspiegelt. Als alternatief kan een sitebrede schakelaar die prominent in de interface is geplaatst — bijvoorbeeld in een instellingenpaneel of toegankelijkheidswidget — aan het criterium voldoen, mits deze voorkeur sessie-overstijgend wordt bewaard en gemakkelijk te vinden is.

Een essentiële uitzondering is beperkt: een animatie is alleen essentieel als het verwijderen ervan de informatie of functionaliteit fundamenteel zou veranderen, en er geen gelijkwaardig niet-geanimeerd alternatief bestaat. Een draaiende laadindicator die de enige visuele aanwijzing is dat er inhoud wordt opgehaald, kan in aanmerking komen; een decoratieve parallax-achtergrondafbeelding die beweegt terwijl de gebruiker scrollt, komt niet in aanmerking, zelfs niet als deze esthetisch centraal staat in het ontwerp.

Het criterium vereist niet dat animaties volledig worden verwijderd — alleen dat er een mechanisme bestaat om ze uit te schakelen. Wanneer het mechanisme is geactiveerd, moet de inhoud nog steeds volledig toegankelijk zijn, wat betekent dat een niet-geanimeerd alternatief dezelfde informatie moet overbrengen of dezelfde functie moet vervullen.

Waarom Het Belangrijk Is

Vestibulaire aandoeningen — aandoeningen die het binnenoor en de hersenen aantasten die balans en oogbewegingen regelen — treffen een aanzienlijk deel van de wereldbevolking. Volgens de Vestibular Disorders Association heeft ongeveer 35% van de volwassenen van 40 jaar en ouder in de Verenigde Staten een vorm van vestibulaire disfunctie ervaren. Wereldwijd treffen aandoeningen zoals benigne paroxismale positieduizeligheid (BPPV), de ziekte van Ménière en vestibulaire migraine tientallen miljoenen mensen. Voor deze personen kan beweging op een scherm onmiddellijke fysieke symptomen uitlokken, waaronder duizeligheid, vertigo, misselijkheid, hoofdpijn en in ernstige gevallen tijdelijke uitval.

Denk aan een gebruiker met vestibulaire migraine die een reisboekingswebsite bezoekt. De site gebruikt een full-page parallax-scroll-effect waarbij de hero-afbeelding met een andere snelheid beweegt dan de paginainhoud terwijl de gebruiker scrollt. Binnen enkele seconden na het begin van het scrollen ervaart de gebruiker intense duizeligheid en misselijkheid. Diegene kan de boeking niet afronden en moet de site volledig verlaten — niet vanwege een cognitieve barrière of een motorische beperking, maar vanwege een fysieke reactie op beweging op het scherm. Dit is de schade in de echte wereld die WCAG 2.3.3 wil voorkomen.

Naast vestibulaire aandoeningen kunnen bewegingsanimaties een negatieve invloed hebben op gebruikers met aandachtsstoornissen, voor wie aanhoudende of geactiveerde beweging afleidend is en moeilijk te negeren, evenals op gebruikers met angststoornissen, voor wie onverwachte beweging stress kan veroorzaken. Mensen die herstellen van hersenschuddingen of traumatisch hersenletsel zijn ook zeer gevoelig voor visuele beweging. Zelfs gebruikers zonder gediagnosticeerde aandoening kunnen zware animatie vermoeiend vinden tijdens langere sessies.

Vanuit gebruiksvriendelijkheid en zakelijk perspectief correleert het respecteren van voorkeuren voor verminderde beweging met verbeterde taakvoltooiingspercentages en sessieduur bij gevoelige gebruikers. Het respecteren van voorkeuren op systeemniveau geeft ook aan dat een product goed is ontwikkeld en aandacht heeft voor de behoeften van gebruikers, wat vertrouwen opbouwt. Voor e-commerce, waar het verlaten van winkelwagens door een slechte ervaring direct invloed heeft op de omzet, is het wegnemen van onnodige animatiebarrières een concreet commercieel voordeel.

Gerelateerde Axe-core-regels

WCAG 2.3.3 vereist handmatig testen. Geen enkele geautomatiseerde axe-core-regel komt direct overeen met dit criterium, en dit is bewust zo ontworpen en geen omissie. De redenen waarom geautomatiseerde tools overtredingen niet betrouwbaar kunnen detecteren, zijn inhoudelijk:

• Waarom automatisering dit niet kan opvangen: Het detecteren van bewegingsanimatie vereist inzicht in de visuele weergave van een pagina in de tijd als reactie op gebruikersinteractie. Geautomatiseerde toegankelijkheidsscanners analyseren statische of licht-gerenderde DOM-snapshots; ze simuleren geen gebruikersinteracties zoals scrollen of klikken en observeren vervolgens niet of CSS-transities of door JavaScript aangestuurde animaties ruimtelijke beweging veroorzaken. Zelfs als een scanner de aanwezigheid van CSS-animatie- of transition-eigenschappen zou kunnen detecteren, kan deze niet bepalen of die animatie ruimtelijke verplaatsing inhoudt (wat vestibulaire reacties kan uitlokken) of een eenvoudige opacity-fade (die dat niet doet). Bovendien kan de scanner niet bepalen of een prefers-reduced-motion media query correct is gekoppeld om de animatie te onderdrukken, of er een sitebrede schakelaar bestaat, of dat de animatie werkelijk essentieel is. Al deze oordelen vereisen een menselijke tester die de gerenderde ervaring kan observeren, met de pagina kan interageren en het resultaat kan evalueren.
• Waar handmatige inspectie zich op moet richten: Testers moeten elke CSS-eigenschap identificeren die ruimtelijke beweging creëert — waaronder transform: translateX/Y/Z, transform: scale, transform: rotate, top/left/margin-transities, animation-keyframes die elementen door de ruimte bewegen — en verifiëren dat elk daarvan wordt afgeschermd door een prefers-reduced-motion: reduce media query of een door de gebruiker bediende schakelaar. Door JavaScript aangestuurde animaties met bibliotheken zoals GSAP, Framer Motion of aangepaste requestAnimationFrame-loops moeten met dezelfde strengheid worden beoordeeld.

Hoe te Testen

1. Schakel Verminderde Beweging in op OS-niveau: Ga op macOS naar Systeeminstellingen > Toegankelijkheid > Beeldscherm en schakel "Beperk beweging" in. Ga op Windows 11 naar Instellingen > Toegankelijkheid > Visuele effecten en schakel "Animatie-effecten" uit. Ga op iOS naar Instellingen > Toegankelijkheid > Beweging en schakel "Beperk beweging" in. Ga op Android naar Instellingen > Toegankelijkheid > Animaties verwijderen. Dit zet de prefers-reduced-motion: reduce media query op actief.
2. Voer een geautomatiseerde scan uit als basislijn: Open axe DevTools of Lighthouse in Chrome DevTools voor de doelpagina. Hoewel geen van beide tools een WCAG 2.3.3-overtreding direct zal markeren, kan de scan gerelateerde problemen aan het licht brengen en bevestigen dat de testomgeving functioneel is. Noteer eventuele animatie-gerelateerde bevindingen ter context.
3. Interageer met de pagina terwijl OS Verminderde Beweging actief is: Scroll langzaam door de pagina, klik op interactieve elementen zoals knoppen, navigatieschakelaars, dropdowns, carrousels en modals. Hover over elementen. Navigeer met het toetsenbord door de pagina. Observeer of er nog ruimtelijke bewegingsanimaties worden afgespeeld. Als animaties worden onderdrukt, is dit een voldoende resultaat voor het OS-voorkeurspad.
4. Schakel OS Verminderde Beweging uit en test opnieuw: Herhaal alle interacties met OS Verminderde Beweging uitgeschakeld. Identificeer elke bewegingsanimatie die wordt geactiveerd door gebruikersinteractie. Documenteer elk ervan met een beschrijving van de activerende handeling en de waargenomen animatie.
5. Controleer op een sitebrede animatieschakelaar: Als OS Verminderde Beweging niet wordt gerespecteerd, zoek dan naar een sitebrede controle — vaak te vinden in een toegankelijkheidswidget, instellingenmenu of footer. Activeer deze en herhaal alle interactietests om te bevestigen dat beweging wordt onderdrukt.
6. Inspecteer CSS en JavaScript op prefers-reduced-motion-implementatie: Open DevTools, ga naar het tabblad Sources of Elements en zoek naar prefers-reduced-motion in stylesheet-bestanden. Verifieer dat alle geïdentificeerde bewegingsanimaties door deze query worden afgeschermd. In Chrome DevTools kun je de media query emuleren: open het tabblad Rendering (More Tools > Rendering) en stel "Emulate CSS media feature prefers-reduced-motion" in op "reduce". Bevestig dat animaties worden onderdrukt zonder de browser opnieuw te starten.
7. Evalueer essentiële uitzonderingen: Beoordeel voor elke resterende animatie wanneer verminderde beweging actief is of deze werkelijk essentieel is — wordt door het verwijderen ervan informatie of functionaliteit geëlimineerd waarvoor geen niet-geanimeerd equivalent bestaat? Documenteer je redenering voor elke beoordeling.
8. Screenreader-verificatie (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): Screenreader-gebruikers zijn niet immuun voor vestibulaire effecten als zij ook gedeeltelijk zicht hebben. Navigeer met alleen het toetsenbord door de pagina terwijl een screenreader actief is en OS Verminderde Beweging is ingeschakeld. Bevestig dat er geen animaties worden geactiveerd door focus-events of toetsenbordgestuurde interacties waarvoor geen voorziening voor verminderde beweging bestaat.

Hoe te Herstellen

Parallax-scroll-effect — Onjuist

<!-- Background moves at a different rate than content on scroll -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Creates parallax on scroll */
    height: 100vh;
  }
</style>
<div class='hero'></div>

Parallax-scroll-effect — Juist

<!-- Parallax is disabled when the user prefers reduced motion -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Parallax by default */
    height: 100vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero {
      background-attachment: scroll; /* Static background; no spatial movement */
    }
  }
</style>
<div class='hero'></div>

CSS-transitie op interactief element — Onjuist

<!-- Button slides and scales on click with no reduced-motion accommodation -->
<style>
  .btn {
    transition: transform 0.4s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }
</style>
<button class='btn'>Submit</button>

CSS-transitie op interactief element — Juist

<!-- Spatial transform is suppressed; a simple opacity shift conveys state without motion -->
<style>
  .btn {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: opacity 0.2s ease; /* Only non-spatial change retained */
    }
    .btn:active {
      transform: none; /* No movement */
      opacity: 0.75;   /* State still communicated visually */
    }
  }
</style>
<button class='btn'>Submit</button>

JavaScript-animatiebibliotheek (GSAP) — Onjuist

<!-- GSAP tween fires on button click regardless of user motion preference -->
<script>
  document.querySelector('#open-modal').addEventListener('click', () => {
    gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
  });
</script>

JavaScript-animatiebibliotheek (GSAP) — Juist

<!-- Check matchMedia before triggering spatial animation; fall back to instant display -->
<script>
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  document.querySelector('#open-modal').addEventListener('click', () => {
    if (prefersReducedMotion) {
      /* Skip spatial movement; just make the modal visible immediately */
      gsap.set('#modal', { opacity: 1, y: 0 });
    } else {
      gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
    }
  });
</script>

Sitebrede animatieschakelaar (toegankelijkheidswidget) — Juiste aanpak

<!-- Persist user preference in localStorage and apply a class to <html> -->
<button id='toggle-motion' aria-pressed='false'>Reduce Motion</button>

<style>
  /* Default: animations active */
  .card { transition: transform 0.3s ease; }
  .card:hover { transform: translateY(-8px); }

  /* When user opts out via widget */
  html.reduce-motion .card {
    transition: none;
  }
  html.reduce-motion .card:hover {
    transform: none;
  }
</style>

<script>
  const btn = document.getElementById('toggle-motion');
  const stored = localStorage.getItem('reduceMotion') === 'true';

  if (stored) {
    document.documentElement.classList.add('reduce-motion');
    btn.setAttribute('aria-pressed', 'true');
  }

  btn.addEventListener('click', () => {
    const isActive = document.documentElement.classList.toggle('reduce-motion');
    btn.setAttribute('aria-pressed', String(isActive));
    localStorage.setItem('reduceMotion', String(isActive));
  });
</script>

Veelvoorkomende Fouten

• prefers-reduced-motion alleen toepassen op CSS-animaties maar niet op CSS-transities: Zowel de animation-shorthand als de transition-eigenschap kunnen ruimtelijke beweging veroorzaken. Teams schrijven vaak een media query voor keyframe-animaties en vergeten dat transition: transform 0.3s bij hover of focus ook beweging triggert die moet worden afgeschermd.
• prefers-reduced-motion: no-preference gebruiken als queryconditie in plaats van reduce: Het juiste patroon plaatst stijlen voor een gereduceerde ervaring in @media (prefers-reduced-motion: reduce), niet het omgekeerde. Het omwikkelen van animatiestijlen in @media (prefers-reduced-motion: no-preference) kan werken, maar is foutgevoeliger en wordt vaak verkeerd toegepast, waardoor animaties actief blijven voor gebruikers die geen expliciete voorkeur hebben ingesteld.
• Het resultaat van matchMedia één keer cachen en nooit opnieuw controleren: Een gebruiker kan zijn OS-voorkeur wijzigen terwijl de pagina open is. Abonneer je op matchMedia(...).addEventListener('change', handler) zodat door JavaScript aangestuurde animaties reageren op live voorkeurwijzigingen zonder dat een herlaad van de pagina nodig is.
• Opacity-only-fades behandelen als bewegingsanimaties die moeten worden onderdrukt: Het criterium richt zich specifiek op ruimtelijke beweging. Het verwijderen van opacity-transities wanneer verminderde beweging actief is, is te agressief en schaadt de bruikbaarheid. Fades die elementen niet door de ruimte verplaatsen, kunnen in het algemeen worden behouden.
• De animatieschakelaar diep in een ontoegankelijk instellingenmenu plaatsen: Als een sitebrede controle wordt gebruikt in plaats van (of naast) de OS-mediaquery, moet deze gemakkelijk te vinden zijn — idealiter in de persistente siteheader, footer of een toegankelijke overlay-widget — en niet drie niveaus diep verborgen in een gebruikersaccountinstellingenpagina waarvoor inloggen vereist is.
• Aannemen dat alle animatiebibliotheken automatisch prefers-reduced-motion respecteren: De meeste JavaScript-animatiebibliotheken, waaronder GSAP, Anime.js en aangepaste requestAnimationFrame-implementaties, respecteren de media query niet automatisch. Elke programmatische animatie moet afzonderlijk worden afgeschermd met een matchMedia-controle in de JavaScript-laag.
• Een animatie als essentieel bestempelen zonder voldoende rechtvaardiging: Teams bestempelen soms complexe decoratieve animaties als essentieel om herstelwerk te vermijden. De essentiële uitzondering is beperkt; een animatie is alleen essentieel als de informatie die zij overbrengt niet op een statische of niet-geanimeerde manier kan worden uitgedrukt. Laadspinners, decoratieve parallax en paginainstaptransities komen bijna nooit in aanmerking als essentieel.
• Niet verder testen dan klikinteracties — vooral scroll en hover vergeten: Parallax-scroll-effecten en door hover geactiveerde transforms behoren tot de meest voorkomende vestibulaire boosdoeners, maar testen wordt vaak beperkt tot klikinteracties. Grondig testen moet alle interactiemodaliteiten omvatten, waaronder scroll, hover, focus, slepen en toetsenbordnavigatie.
• De voorkeur van de sitebrede schakelaar niet sessie-overstijgend bewaren: Als een gebruiker een siteschakelaar instelt om beweging te verminderen en vervolgens naar een andere pagina navigeert of de site de volgende dag opnieuw bezoekt en de instelling is gereset, is de voorziening feitelijk mislukt. Voorkeuren moeten worden opgeslagen in localStorage of een gebruikersprofiel en bij elke paginalaad opnieuw worden toegepast.
• Derdepartij-embeds en -widgets vergeten: Ingesloten social feeds, chatwidgets, kaart-embeds en advertentiescripts kunnen hun eigen bewegingsanimaties introduceren, volledig buiten de CSS-controle van de hostsite. Inhoud van derden moet worden geaudit en leveranciers moeten worden aangespoord om ondersteuning voor verminderde beweging te bieden, of de embeds moeten worden omwikkeld met containers die beweging onderdrukken via CSS-containmentstrategieën waar dat haalbaar is.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidential Circular 2025/10, gepubliceerd in het Staatsblad (Resmî Gazete) nr. 32933 op 21 juni 2025, stelt bindende digitale toegankelijkheidsverplichtingen vast voor een gedefinieerde set entiteitstypen die in Turkije actief zijn. De betrokken entiteiten omvatten overheidsinstellingen en -agentschappen, e-commerceplatforms, banken en aanbieders van financiële diensten, ziekenhuizen en particuliere zorginstellingen, telecomoperators met 200,000 of meer abonnees, erkende reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE).

De circulaire schrijft conformiteit met WCAG 2.1 op niveau AA voor als de basisnorm voor digitale diensten die zijn geproduceerd of substantieel bijgewerkt na de ingangsdatum. WCAG 2.3.3 — Animatie door interacties is een criterium op niveau AAA en is daarom geen verplichte eis onder Presidential Circular 2025/10. Betrokken entiteiten zijn juridisch niet verplicht dit criterium te implementeren om compliant te zijn onder de Turkse wet.

Het behalen van conformiteit op niveau AAA voor criteria zoals 2.3.3 heeft echter aanzienlijke praktische en reputatievoordelen voor Turkse organisaties. Vestibulaire aandoeningen en gevoeligheid voor beweging zijn onzichtbare beperkingen die vaak worden over het hoofd gezien in toegankelijkheidsaudits die zich nauw richten op compatibiliteit met screenreaders. Voor sectoren zoals de gezondheidszorg (ziekenhuizen en particuliere gezondheidsplatforms), waar gebruikers patiënten kunnen zijn met neurologische aandoeningen die de gevoeligheid voor beweging vergroten, en voor e-commerce en reisbureaus, waar intensief scrollen en geanimeerde UI-patronen gebruikelijk zijn, toont de implementatie van 2.3.3 een volwassen, gebruikersgerichte benadering van toegankelijkheid.

Organisaties die streven naar vrijwillige AAA-conformiteit — zoals organisaties die voordelen bij openbare aanbestedingen, toegang tot internationale markten of branchecertificering zoeken — moeten 2.3.3 als een prioritair criterium behandelen, gezien de relatief lage herstelkosten (een goed gestructureerde prefers-reduced-motion-mediaquerystrategie kan systematisch worden toegepast op een designsysteem) en de directe fysieke schade die de afwezigheid ervan kan veroorzaken. Het opnemen van een animatiecontrole binnen een toegankelijkheidsoverlay-widget, zoals Accsible, stelt Turkse organisaties in staat deze voorziening te bieden zonder dat gebruikers hun besturingssysteeminstellingen hoeven te vinden — waardoor het pad naar verminderde beweging vindbaar en bruikbaar wordt voor de breedst mogelijke doelgroep.