WCAG 2.2.2: Pauzeren, stoppen, verbergen

Wat Deze Regel Betekent

WCAG 2.2.2 (Pauzeren, Stoppen, Verbergen) is een succescriterium op Niveau A onder het principe Bedienbaar. Het heeft betrekking op alle content die beweegt, knippert, scrolt of automatisch wordt bijgewerkt op een pagina. De regel stelt twee afzonderlijke vereisten vast, afhankelijk van hoe de content zich gedraagt:

Voor bewegende, knipperende of scrollende content die automatisch start, langer dan vijf seconden duurt en naast andere content wordt gepresenteerd, moet gebruikers een mechanisme worden geboden om deze te pauzeren, te stoppen of te verbergen. Dit omvat CSS-animaties, door JavaScript aangestuurde carrousels, lopende tekst (marquee), knipperende elementen, scrollende tickers en geanimeerde banners.

Voor automatisch bijgewerkte content — zoals live scoreborden, aandelen­tickers, socialmediafeeds of nieuws­koppen die met tussenpozen verversen — moeten gebruikers de updates kunnen pauzeren, stoppen, verbergen of de frequentie van de updates kunnen regelen.

Een voldoende resultaat vereist dat er een duidelijk bedienbare bediening (een knop, toetsenbord­snelkoppeling of vergelijkbaar mechanisme) beschikbaar is vóór of naast de geanimeerde content, zodat gebruikers deze kunnen bevriezen of verwijderen zonder hulp nodig te hebben. De bediening zelf moet toegankelijk zijn — via het toetsenbord bereikbaar, correct gelabeld en bruikbaar zonder muis.

Er is sprake van een onvoldoende resultaat wanneer een van de volgende situaties voorkomt: een <blink>-element of CSS text-decoration: blink dat niet kan worden gestopt; een <marquee>-element zonder pauzemechanisme; een geanimeerde carrousel die oneindig blijft afspelen zonder pauzeknop; een automatisch verversende nieuwswidget die niet kan worden bediend; of een lusvormige achtergrondvideo zonder mogelijkheid om deze te stoppen.

WCAG definieert twee expliciete uitzonderingen. Ten eerste is de regel niet van toepassing op animaties die vijf seconden of korter duren, omdat korte beweging die vanzelf eindigt geen langdurige afleiding veroorzaakt. Ten tweede is de regel niet van toepassing wanneer de animatie essentieel is voor de activiteit — bijvoorbeeld een realtime aandelenhandels­interface waarbij live prijzen het hele doel van de pagina vormen, en het pauzeren ervan de aard van de content fundamenteel zou veranderen. Deze uitzonderingen zijn beperkt en mogen niet worden gebruikt als algemene smoes om implementatie over te slaan.

Waarom Het Belangrijk Is

Bewegende en knipperende content creëert ernstige barrières voor verschillende groepen mensen met een beperking, en de gevolgen variëren van lichte afleiding tot daadwerkelijke medische schade.

Mensen met aandachtsdeficiëntie-/hyperactiviteitsstoornis (ADHD) of andere cognitieve beperkingen vinden het vaak onmogelijk om zich te concentreren op de primaire content van een pagina wanneer geanimeerde elementen in hun perifere zicht aanwezig zijn. Het menselijk brein is neurologisch geprogrammeerd om aandacht te besteden aan beweging als overlevingsmechanisme, en mensen met ADHD ervaren deze aantrekkingskracht veel intenser dan neurotypische gebruikers. Een scrollende ticker onderaan een nieuwspagina of een geanimeerde banneradvertentie in een zijbalk kan het effectief onmogelijk maken om het hoofdartikel te lezen.

Mensen met vestibulaire stoornissen — waaronder labyrinthitis, benigne paroxismale positieduizeligheid (BPPV) en de ziekte van Ménière — kunnen misselijkheid, duizeligheid en desoriëntatie ervaren wanneer zij worden blootgesteld aan bepaalde soorten beweging op het scherm. Voor deze gebruikers is een carrousel in een lus of een parallax-scroll­effect niet alleen irritant; het kan fysieke klachten veroorzaken waardoor zij de pagina volledig moeten verlaten. Vestibulaire stoornissen treffen naar schatting 35% van de volwassenen ouder dan 40 jaar alleen al in de Verenigde Staten.

Mensen met fotosensitieve epilepsie lopen risico op aanvallen door content die met bepaalde frequenties flitst of knippert. Hoewel flitsende content directer wordt behandeld door WCAG 2.3.1, kan knipperende content die onder 2.2.2 valt ook een triggerende factor zijn. De Wereldgezondheidsorganisatie schat dat epilepsie ongeveer 50 miljoen mensen wereldwijd treft.

Voor schermlezergebruikers zorgt automatisch bijgewerkte content voor een even verstorend probleem. Wanneer een live-regio wordt ververst, kondigen schermlezers de nieuwe content aan, wat de gebruiker midden in een zin onderbreekt terwijl die naar iets anders luistert. Zonder de mogelijkheid om updates te pauzeren, wordt het navigeren op een pagina met live content uiterst moeilijk.

Beschouw dit scenario uit de praktijk: een gebruiker met ADHD voltooit een online bankoverschrijving op een Turks e-commercebankportaal. Een roterende promotiebanner doorloopt elke drie seconden vier aanbiedingen in de header. De gebruiker kan zich niet concentreren op het correct invoeren van het rekeningnummer. Er wordt een overschrijffout gemaakt, de transactie mislukt en de gebruiker moet het hele proces herhalen. Als de banner een pauzeknop had gehad, zou de taak eenvoudig zijn geweest. Dit is geen hypothetische situatie — het is een gedocumenteerde categorie interactiefouten die toegankelijkheidsauditors regelmatig tegenkomen.

Naast toegang voor mensen met een beperking verbetert het elimineren van onbeheersbare beweging de bruikbaarheid voor iedereen, vermindert het de cognitieve belasting en kan het SEO-signalen zoals Core Web Vitals-scores verbeteren door lay-outverschuivingen en onnodige JavaScript-uitvoering te verminderen.

Gerelateerde Axe-core-regels

• blink: Deze regel controleert op de aanwezigheid van het verouderde <blink>-HTML-element en op CSS-eigenschappen die knipperende tekst produceren (historisch text-decoration: blink). Het <blink>-element zorgt ervoor dat tekst continu aan en uit flitst zonder een ingebouwd mechanisme waarmee de gebruiker dit kan stoppen. Axe markeert elke instantie van dit element als een overtreding omdat het direct niet voldoet aan 2.2.2 — er is geen conforme gebruikscasus voor <blink>. De regel waarschuwt ook voor door CSS aangestuurde knipper­effecten waarbij de animatie niet kan worden gepauzeerd. Geautomatiseerde detectie is hier betrouwbaar omdat het element en de eigenschap syntactisch identificeerbaar zijn in de DOM en berekende stijlen.
• marquee: Deze regel controleert op de aanwezigheid van het <marquee>-HTML-element, dat tekst of content horizontaal of verticaal over het scherm laat scrollen in een continue lus. Het <marquee>-element heeft geen ingebouwd, toegankelijk pauzemechanisme en is verouderd in HTML5. Axe markeert elke instantie als een overtreding. Net als <blink> is detectie eenvoudig omdat het element syntactisch identificeerbaar is. Geautomatiseerde tools kunnen echter niet alle 2.2.2-overtredingen detecteren — CSS-animaties, JavaScript-carrousels, automatisch bijgewerkte AJAX-widgets en lusvormige HTML5-video’s vereisen allemaal handmatige beoordeling, omdat het mechanisme voor pauzeren (of het ontbreken daarvan) alleen kan worden vastgesteld door een menselijke tester die de volledige interactieve ervaring evalueert.

Hoe te Testen

1. Geautomatiseerde scan met axe DevTools of Lighthouse: Open de pagina in Chrome of Firefox. Open DevTools (F12), ga naar het axe DevTools-paneel of de Lighthouse Accessibility-audit en voer een volledige scan uit. Let specifiek op overtredingen die in de resultaten zijn gemarkeerd als blink of marquee. Elke overtreding bevat de DOM-node, het impactniveau (ernstig of kritiek) en een link naar richtlijnen voor herstel. Let op dat een schone geautomatiseerde scan geen volledige naleving betekent — ga verder met de handmatige stappen.
2. Handmatige inspectie van CSS- en JavaScript-animatie: Bekijk de pagina visueel op alle content die beweegt, scrolt, knippert of automatisch wordt bijgewerkt. Controleer voor elk geval of er een pauze-, stop- of verberg­bediening aanwezig en zichtbaar is vóór of naast de geanimeerde content. Controleer of de bediening via het toetsenbord bereikbaar is (erheen tabben) en dat het indrukken van Enter of Spatie deze activeert. Controleer of het activeren van de bediening de beweging daadwerkelijk stopt en niet alleen de snelheid vermindert.
3. Alleen-toetsenbordtest: Koppel uw muis los. Gebruik de Tab-toets om door de hele pagina te navigeren. Bevestig dat u de pauze-/stopbediening voor elk geanimeerd element uitsluitend met het toetsenbord kunt bereiken, en dat de bediening een zichtbare focusindicator heeft. Als u de bediening niet kunt bereiken, of als u er pas bij kunt komen nadat u eerst door de geanimeerde content hebt getabt (wat desoriënterend kan zijn), is dat een fout.
4. Schermlezertest met NVDA en Firefox: Start NVDA, open de pagina in Firefox en luister naar eventuele aankondigingen van live-regio’s die het lezen onderbreken. Navigeer naar automatisch bijgewerkte content en controleer of het gebruik van de pauzeknop de NVDA-aankondigingen stillegt. Test met JAWS en Chrome, en VoiceOver en Safari op macOS volgens dezelfde procedure.
5. Controle van automatisch bijgewerkte content: Noteer voor content die op een timer ververst (nieuwsfeeds, dashboards, scoreborden) het verversingsinterval. Bevestig dat er een mechanisme is om de updates te pauzeren of de frequentie te regelen. Trigger de update indien mogelijk handmatig en controleer of schermlezers deze alleen aankondigen wanneer de gebruiker daarvoor kiest, niet onvrijwillig.
6. Test van voorkeur voor verminderde beweging: Schakel in uw besturingssysteem de toegankelijkheidsinstelling "Beweging verminderen" in. Herlaad de pagina en controleer of animaties de CSS-mediaquery prefers-reduced-motion respecteren. Hoewel dit niet strikt vereist is door WCAG 2.2.2, is het een sterke aanvullende techniek en wordt het in toenemende mate verwacht door auditors.

Hoe te Herstellen

Verouderd <marquee>-element — Onjuist

<!-- Scrolling text with no pause control; fails 2.2.2 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

Verouderd <marquee>-element — Juist

<!-- Replaced with a CSS animation that respects prefers-reduced-motion
     and includes an accessible pause button -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- The CSS should define .ticker-content with animation,
     and a .paused class that sets animation-play-state: paused.
     The JS toggleTicker() function adds/removes .paused
     and updates aria-pressed and aria-label accordingly. -->

Verouderd <blink>-element — Onjuist

<!-- Blink element causes continuous unstoppable flashing; fails 2.2.2 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

Verouderd <blink>-element — Juist

<!-- Static, high-contrast warning with role='alert' for screen readers.
     No blinking required to communicate urgency. -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

Automatisch afspelende carrousel zonder pauzeknop — Onjuist

<!-- Carousel advances every 4 seconds with no way to stop it; fails 2.2.2 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

Automatisch afspelende carrousel zonder pauzeknop — Juist

<!-- Carousel includes a visible, keyboard-accessible pause button.
     The aria-label updates dynamically to reflect current state.
     Autoplay also stops on focus/hover (WCAG best practice). -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG pause icon or text label -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

Automatisch bijgewerkte live-datawidget — Onjuist

<!-- Widget refreshes every 10 seconds via JS with no user control; fails 2.2.2 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

Automatisch bijgewerkte live-datawidget — Juist

<!-- Widget includes a pause button; aria-live is set to 'off' when paused
     so screen readers are not interrupted during paused state. -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS should toggle aria-live between 'polite' and 'off',
     stop the setInterval timer when paused, and update
     aria-pressed and aria-label on the button accordingly. -->

Veelvoorkomende Fouten

• Het gebruik van <marquee>- of <blink>-elementen in productie-HTML, zelfs voor "retro" of decoratieve stijlen — beide elementen zijn verouderd, semantisch betekenisloos en falen altijd 2.2.2 zonder andere hersteloptie dan verwijdering.
• Een pauzeknop toevoegen die alleen zichtbaar is bij muis-hover, waardoor deze ontoegankelijk wordt voor toetsenbord­gebruikers die deze het hardst nodig hebben en die doorgaans met Tab navigeren in plaats van met hover.
• Een pauzeknop implementeren die niet met de Tab-toets bereikbaar is vóór de geanimeerde content in de DOM, waardoor gebruikers door de desoriënterende beweging moeten navigeren voordat zij deze kunnen stoppen.
• animation-play-state: paused in CSS gebruiken om de animatie visueel te stoppen, maar nalaten ook de JavaScript-lus setInterval of requestAnimationFrame uit te schakelen die de contentupdates aanstuurt — het visuele uiterlijk stopt, maar de DOM blijft veranderen en onderbreekt nog steeds schermlezers.
• aria-live='polite' instellen op een carrousel of ticker en dit actief laten, zelfs wanneer de gebruiker op pauze heeft gedrukt — de live-regio blijft DOM-wijzigingen aankondigen aan schermlezergebruikers, ook al is de visuele animatie bevroren.
• Vertrouwen op autoplay=false op een <video>-element zonder het gedrag in verschillende browsers te verifiëren; sommige browser- en plug-incombinaties negeren dit attribuut, waardoor video’s automatisch worden afgespeeld tegen de bedoeling van de auteur en de verwachting van de gebruiker in.
• De uitzondering van vijf seconden behandelen als een algemene respijtperiode en een carrousel bouwen die elke slide vier seconden toont in de veronderstelling dat elke afzonderlijke slideovergang korter is dan vijf seconden — de animatie als geheel is continu en duurt veel langer dan vijf seconden, dus de uitzondering is niet van toepassing.
• Een pauzeknop aanbieden die de animatie stopt maar de gepauzeerde status niet visueel aangeeft, waardoor gebruikers onzeker zijn of hun actie effect heeft gehad — de knop moet de huidige status weergeven, idealiter met gebruik van aria-pressed en door het label tussen "Pause" en "Play" te wisselen.
• prefers-reduced-motion alleen toepassen op CSS-transities en JavaScript-gestuurde animaties negeren die onafhankelijk van CSS draaien, waardoor gebruikers die de systeeminstelling voor verminderde beweging hebben ingeschakeld nog steeds beweging op de pagina ervaren.
• De pauzeknop buiten de toetsenbord-tabvolgorde plaatsen door tabindex='-1' in te stellen of door deze in een container met display:none op te nemen die alleen voor muisinteractie voorwaardelijk wordt getoond — de bediening moet altijd via toetsenbordnavigatie bereikbaar zijn.

Relatie met de Toegankelijkheidsregelgeving van Turkije

Het Presidentieel Circulair nr. 2025/10 van Turkije, gepubliceerd in het Staatsblad (Resmî Gazete) met nummer 32933 op 21 juni 2025, stelt verplichte toegankelijkheidsvereisten voor web en mobiel vast die zijn afgestemd op WCAG 2.2. WCAG 2.2.2 Pauzeren, Stoppen, Verbergen is een criterium op Niveau A, wat betekent dat het zich op het meest fundamentele niveau van naleving bevindt en zonder uitzondering verplicht is voor alle entiteiten die onder het circulair vallen.

Het circulair stelt gefaseerde nalevingstermijnen vast: publieke instellingen en organen moeten binnen één jaar na de publicatiedatum van het circulair volledige conformiteit op Niveau A bereiken, en entiteiten in de private sector moeten dit binnen twee jaar doen. Er is geen vrijwillige opt-in — het circulair legt een wettelijke verplichting op, en niet-conforme digitale eigendommen zijn onderworpen aan administratief toezicht en mogelijke handhavingsmaatregelen.

De entiteiten die onder het circulair vallen, omvatten een brede dwarsdoorsnede van Turkse digitale diensten: alle publieke instellingen en overheidsorganen; e-commerceplatforms die in Turkije actief zijn; banken en financiële dienstverleners; ziekenhuizen en particuliere zorgaanbieders; telecomoperators met 200,000 of meer abonnees; reisbureaus; particuliere vervoersbedrijven; en particuliere scholen met een vergunning van het Ministerie van Nationaal Onderwijs (Millî Eğitim Bakanlığı, MoNE).

Voor deze entiteiten heeft WCAG 2.2.2 directe en praktische implicaties. Een e-commercesite met een automatisch afspelende productcarrousel zonder pauzeknop is in overtreding. Een internetbankierportaal van een bank dat een scrollende ticker met beveiligingsmeldingen gebruikt zonder stopknop is niet conform. Een afsprakenpagina van een ziekenhuis die geanimeerde waarschuwingen gebruikt die niet kunnen worden gestopt, voldoet niet aan de eis. De homepage van een telecombedrijf met een lusvormige achtergrondvideo zonder zichtbare stopknop moet vóór de deadline worden hersteld.

Naast de wettelijke verplichting sluit de Turkse toegankelijkheidswetgeving aan bij de bredere Europese trend, zoals blijkt uit de EU-richtlijn webtoegankelijkheid en de European Accessibility Act (EAA). Wanneer Turkse bedrijven uitbreiden naar Europese markten of Europese gebruikers bedienen, wordt conformiteit met WCAG 2.2 Niveau A — inclusief criterium 2.2.2 — een dubbele nalevingsvereiste. Het correct implementeren van Pauzeren, Stoppen, Verbergen is daarom zowel een binnenlandse juridische noodzaak als een strategisch voordeel voor Turkse organisaties met een internationale digitale aanwezigheid.