WCAG 2.3.1: Drie flitsen of onder de drempel

Wat Deze Regel Betekent

WCAG 2.3.1 — Drie Flitsen of Onder Drempelwaarde — is een succescriterium op niveau A onder het principe Bedienbaar. Het schrijft voor dat webpagina’s geen content mogen bevatten die meer dan drie keer flitst in een periode van één seconde, tenzij die flitsende content klein genoeg of zwak genoeg is om onder de gedefinieerde algemene flitsdrempel of rode flitsdrempel te vallen.

Een flits wordt gedefinieerd als een paar tegengestelde veranderingen in relatieve luminantie die bij gevoelige personen aanvallen kunnen veroorzaken. Concreet definieert WCAG twee soorten gevaarlijke flitsen:

• Algemene flits: Een paar tegengestelde veranderingen waarbij de hogere luminantie ten minste 10% van de maximale relatieve luminantie (0,80) is, en het luminantieverschil ten minste 10% van het maximum bedraagt. In de praktijk betekent dit content die snel genoeg tussen een heldere en een donkere toestand wisselt om een stroboscopisch effect te veroorzaken.
• Rode flits: Een paar tegengestelde overgangen met een verzadigde rode kleur. Dit wordt met bijzondere zorg behandeld omdat rode flitsen klinisch in verband zijn gebracht met een hoger risico op het uitlokken van fotosensitieve aanvallen.

Het criterium is van toepassing op alle webcontent, ongeacht het formaat — HTML-animaties, CSS-transities, door JavaScript aangestuurde effecten, ingesloten video’s, GIF’s, SVG-animaties, WebGL-scènes, canvas-gerenderde graphics en widgets voor advertenties van derden. Als content flitst met een snelheid van meer dan drie flitsen per seconde en niet onder de luminantie- of grootte­drempels valt, voldoet deze onvoorwaardelijk niet aan dit criterium.

Uitzonderingen en drempels die content laten slagen: WCAG 2.3.1 staat flitsende content toe als aan een van de volgende voorwaarden wordt voldaan:

• Het gecombineerde gebied van flitsen die gelijktijdig optreden beslaat niet meer dan in totaal 0,006 steradiaal binnen een visueel veld van 10 graden op het scherm (ongeveer een rechthoek van 341 × 256 pixels op typische kijkafstanden, of ruwweg 21.824 vierkante pixels op een scherm van 1024 pixels breed dat op armlengte wordt bekeken).
• De flits ligt onder de algemene flitsdrempel (luminantieverandering is minder dan 10%) of onder de rode flitsdrempel (de verzadigde rode component verandert niet meer dan de gedefinieerde drempel).

Een enkel flitsmoment met zeer laag luminantiecontrast of een zeer klein schermgebied kan dus toelaatbaar zijn. Omdat deze drempels echter genuanceerd zijn en fotometrische meetinstrumenten vereisen om ze precies te verifiëren, hanteren de meeste professionals de conservatieve aanpak om simpelweg alle content te vermijden die meer dan drie keer per seconde flitst. Content die exact drie keer per seconde (3 Hz) flitst, bevindt zich op de grens — content die boven 3 Hz uitkomt, is niet conform, ongeacht de grootte, tenzij ondubbelzinnig aan de grootte- of luminantiedrempels wordt voldaan.

Het criterium regelt alle content die wordt weergegeven tijdens normale pagina-interactie. Het sluit geen content uit die verborgen is achter door de gebruiker geactiveerde bedieningselementen als die content automatisch afspeelt bij het laden van de pagina. Als een video automatisch begint af te spelen en flitsende sequenties bevat die de drempel overschrijden, voldoet de pagina vanaf het moment van laden niet aan dit criterium.

Waarom Het Belangrijk Is

Fotosensitieve epilepsie treft wereldwijd ongeveer 1 op de 4.000 mensen — ruwweg 3% van de totale populatie met epilepsie. De gevoeligheid voor snel flitsend of flikkerend licht reikt echter verder dan alleen klinische epilepsie. Veel mensen met migraine, vestibulaire stoornissen, autisme­spectrum­condities en postcommotioneel syndroom kunnen aanzienlijke ongemakken, desoriëntatie, misselijkheid of pijn ervaren door snel flitsende visuele stimuli, zelfs als bij hen geen aanvalstoornis is vastgesteld.

De inzet is voor dit criterium uitzonderlijk hoog in vergelijking met de meeste andere toegankelijkheidseisen. Een gebruiker die geconfronteerd wordt met ontbrekende alternatieve tekst ervaart uitsluiting en frustratie. Een gebruiker die content tegenkomt die een fotosensitieve aanval uitlokt, kan een medisch noodgeval meemaken — inclusief bewustzijnsverlies, letsel door vallen en in zeldzame maar gedocumenteerde gevallen levensbedreigende gevolgen. De Harding Flash and Pattern Analyzer, een veelgebruikt broadcast­instrument, is specifiek ontwikkeld om dergelijke incidenten op televisie te voorkomen, en het web kent vergelijkbare risico’s.

Een concreet scenario uit de praktijk illustreert het gevaar goed: stel een nieuwssite voor die automatisch een promotievideo afspeelt met een snelle reeks afwisselende lichte en donkere frames — een veelvoorkomend artefact van bepaalde videocompressie- of cameraflits­effecten. Een gebruiker met fotosensitieve epilepsie bezoekt de homepage tijdens zijn of haar ochtendpendel op een mobiel apparaat. Zonder enige waarschuwing en zonder mogelijkheid om de content uit te schakelen, wordt die persoon blootgesteld aan een sequentie die een aanval uitlokt terwijl hij of zij met het openbaar vervoer reist. Dit scenario is niet hypothetisch; het heeft zich in de echte wereld voorgedaan, waaronder het beruchte Pokémon-incident in 2007 dat bij honderden kijkers in Japan aanvallen veroorzaakte, en gedocumenteerde gevallen met webgebaseerde advertentie-units.

Naast de veiligheidsdimensie heeft naleving van dit criterium ook gebruiks­vriendelijkheids­implicaties voor het algemene publiek. Snel flitsende content zorgt voor een slechte leeservaring, verhoogt de cognitieve belasting en wordt in de meeste ontwerpcontexten als storend en onprofessioneel beschouwd. Het elimineren van dergelijke content verbetert de focus, verlaagt het bouncepercentage en straalt betrouwbaarheid uit — factoren die allemaal positief bijdragen aan SEO-metrics zoals verblijfsduur en betrokkenheidspercentages. Bovendien houden zoekmachinecrawlers in toenemende mate rekening met Core Web Vitals en gebruikservaringssignalen in rankings, en sites met opdringerige flitsende advertenties of animaties kunnen indirect worden benadeeld.

Gerelateerde Axe-core-regels

WCAG 2.3.1 vereist handmatige tests omdat geautomatiseerde tools de fotometrische eigenschappen van dynamische content niet betrouwbaar in realtime kunnen analyseren. Er is geen geautomatiseerde axe-core-regel die direct aan dit criterium is gekoppeld. De redenen voor deze beperking zijn fundamenteel voor hoe toegankelijkheidsautomatisering werkt:

• Waarom automatisering hier faalt: Geautomatiseerde scanners analyseren de statische DOM en CSS op een bepaald moment. Ze kunnen detecteren dat er een animatie- of video-element bestaat, maar ze kunnen de daadwerkelijke flitssnelheid, luminantiewaarden per frame of de ruimtelijke omvang van het flitsende gebied zoals waargenomen door een menselijke kijker op een typische kijkafstand niet meten. Bepalen of een flits de drempel van 3 Hz of de drempel van 0,006 steradiaal overschrijdt, vereist fotometrische analyse frame voor frame — een taak die speciale tools vereist zoals de Harding Flash and Pattern Analyzer (HFPA), de Photosensitive Epilepsy Analysis Tool (PEAT) of handmatige beoordeling van animatiebronbestanden.
• Ingesloten video en content van derden: Veel van de content met het hoogste risico (automatisch afspelende video-advertenties, ingesloten socialmedia-widgets, animatiebibliotheken van derden) wordt geladen vanaf externe domeinen. Geautomatiseerde tools hebben doorgaans geen toegang tot cross-origin content op frameniveau en kunnen deze niet analyseren, waardoor het onmogelijk is om de flitssnelheid binnen die bronnen programmatisch te beoordelen.
• GIF- en canvas-animaties: Geanimeerde GIF-bestanden en HTML5-canvas­elementen renderen hun animatieframes buiten de normale toegankelijkheidsboom. Axe-core en Lighthouse hebben beide niet de mogelijkheid om de frametiming van GIF’s te decoderen of canvas-tekenaanroepen te onderscheppen om luminantieveranderingen tussen frames te berekenen.
• CSS- en JavaScript-animaties: Hoewel axe-core de aanwezigheid van CSS-eigenschappen animation of transition kan detecteren, kan het niet beoordelen of de resulterende visuele output tijdens runtime luminantieveranderingen produceert die de algemene of rode flitsdrempels overschrijden.

Omdat geen enkele geautomatiseerde regel deze overtreding detecteert, rust de volledige nalevingslast op handmatige ontwerpbeoordeling, videoanalyse vóór publicatie en bewustzijn bij ontwikkelaars tijdens de contentcreatiefase. Dit maakt redactionele en QA-procescontroles — niet alleen technische oplossingen — essentieel voor duurzame naleving.

Hoe te Testen

1. Maak een inventaris van alle dynamische content: Voordat u tools inzet, inventariseer de pagina op alle content die beweegt, flitst, knippert of animeert. Dit omvat automatisch afspelende video’s, geanimeerde GIF’s, CSS-keyframe-animaties, door JavaScript aangestuurde animaties, SVG-animaties, canvas-elementen en ingesloten widgets van derden zoals advertentie-units of socialmedia-embeds. Documenteer elk voorbeeld met de bron en het bedieningsmechanisme.
2. Gebruik de Photosensitive Epilepsy Analysis Tool (PEAT): PEAT is een gratis tool, ontwikkeld door het Trace Research and Development Center, specifiek ontworpen om videocontent te analyseren op flitsgevaar volgens de Harding-specificatie. Neem een schermopname op van de betreffende webpagina of animatie op volledige resolutie en importeer het videobestand vervolgens in PEAT. De tool rapporteert of een sequentie de algemene flitsdrempel of rode flitsdrempel overschrijdt en op welke tijdstippen.
3. Gebruik de Harding Flash and Pattern Analyzer voor content van broadcastkwaliteit: Voor videocontent die vanuit productie­workflows wordt ingesloten (bijv. websites van omroepen, nieuwsorganisaties), moeten bronvideobestanden vóór publicatie door de HFPA worden gehaald. Dit is de gouden standaard voor screening vóór publicatie.
4. Handmatige observatie — de drieflits­telling: Voor CSS-animaties, JavaScript-effecten of GIF-bestanden waarbij toolgebaseerde analyse niet praktisch is, speelt u de animatie af en probeert u het aantal volledige licht-donker-licht­cycli binnen één seconde te tellen. Als u drie of meer volledige cycli per seconde waarneemt, is de content waarschijnlijk niet conform. Gebruik schermopnamesoftware met frame-voor-frame­weergave om bij deze telling te helpen.
5. Controleer videocontent frame voor frame: Open videobestanden in een video-editor (zoals DaVinci Resolve, gratis versie) die waveform- of histogramgegevens op frameniveau weergeeft. Spoel door secties met snelle visuele veranderingen en controleer op afwisselende patronen van hoge en lage luminantie die meer dan drie keer per seconde voorkomen. Let vooral op sequenties met verzadigd rood tegen donkere achtergronden.
6. Test met ontwikkelaarstools van de browser voor CSS-animaties: Open in Chrome DevTools het paneel Animations (More Tools → Animations). Inspecteer gedeclareerde animatieduur en iteratiecycli. Een animatie met een duur van minder dan 333 milliseconden die bij elke iteratie tussen hoog-contrast­toestanden wisselt, overschrijdt de drempel van 3 Hz. Bereken: als een volledige licht-donker-licht­cyclus in minder dan 333 ms wordt voltooid, is de content niet conform.
7. Beoordeel de ruimtelijke omvang voor grensgevallen: Als content flitst met een snelheid boven 3 Hz maar er zeer klein op het scherm uitziet, meet dan de pixelafmetingen. Bij een scherm van 1024 pixels breed op normale kijkafstand (ongeveer 57–60 cm) is de veilige gebiedsdrempel ruwweg 21.824 vierkante pixels. Vermenigvuldig de breedte en hoogte van het flitsende gebied; als het resultaat onder deze drempel ligt, kan de content binnen de veilige gebiedsuitzondering vallen — maar documenteer deze beoordeling zorgvuldig.
8. Test automatisch afspelende video bij het laden van de pagina: Voer na het laden van de pagina geen interactie uit en observeer of er een video of animatie automatisch begint af te spelen. Als dat zo is, pas dan onmiddellijk de bovenstaande tests toe op de automatisch afspelende content, omdat de gebruiker geen kans heeft om in te grijpen vóór blootstelling.

Hoe te Oplossen

Automatisch afspelende GIF met snelle flits — Onjuist

<!-- An animated GIF that cycles between a bright yellow and black frame
     at approximately 10 times per second, far exceeding the 3 Hz threshold -->
<img src='attention-flash.gif' alt='Special offer alert' width='600' height='300'>

Automatisch afspelende GIF met snelle flits — Juist

<!-- Replace the flashing GIF with a static image and use a subtle CSS
     animation that does not alter luminance rapidly. The animation here
     uses a gentle scale pulse at a rate well below 3 Hz (one cycle per 2 seconds). -->
<img src='attention-static.png'
     alt='Special offer alert'
     class='pulse-attention'
     width='600'
     height='300'>

<style>
  @keyframes gentlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
  }
  .pulse-attention {
    animation: gentlePulse 2s ease-in-out infinite;
  }
</style>

CSS-keyframe-animatie die tussen hoog-contrastkleuren flitst — Onjuist

<!-- A CSS animation that alternates a banner between white and black
     with a 100ms total duration, producing 10 flashes per second -->
<div class='flash-banner'>SALE NOW ON</div>

<style>
  @keyframes flashEffect {
    0% { background-color: #ffffff; color: #000000; }
    50% { background-color: #000000; color: #ffffff; }
    100% { background-color: #ffffff; color: #000000; }
  }
  .flash-banner {
    animation: flashEffect 0.1s linear infinite;
  }
</style>

CSS-keyframe-animatie die tussen hoog-contrastkleuren flitst — Juist

<!-- Slowing the animation duration to 1 second per full cycle means
     the luminance alternates once per second (1 Hz), well below the 3 Hz limit.
     Alternatively, use prefers-reduced-motion to disable animation entirely
     for users who have opted into reduced motion at the OS level. -->
<div class='flash-banner'>SALE NOW ON</div>

<style>
  @keyframes flashEffect {
    0% { background-color: #ffffff; color: #000000; }
    50% { background-color: #000000; color: #ffffff; }
    100% { background-color: #ffffff; color: #000000; }
  }
  .flash-banner {
    animation: flashEffect 1s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .flash-banner {
      animation: none;
      background-color: #1a1a8c;
      color: #ffffff;
    }
  }
</style>

Ingesloten automatisch afspelende video met flitssequenties — Onjuist

<!-- Auto-playing video with no controls, no PEAT analysis performed,
     and no mechanism for the user to stop or pause before exposure -->
<video src='promo.mp4' autoplay loop muted width='800' height='450'></video>

Ingesloten automatisch afspelende video met flitssequenties — Juist

<!-- Best practice: provide controls so users can pause immediately,
     add a poster frame so no video plays without interaction,
     or use preload='none' to prevent auto-loading. If autoplay is
     genuinely required by business logic, the video MUST have been
     screened with PEAT or HFPA and confirmed free of flash hazards. -->
<video
  src='promo-screened.mp4'
  controls
  muted
  preload='metadata'
  poster='promo-poster.jpg'
  width='800'
  height='450'>
  <track kind='captions' src='promo-captions.vtt' srclang='tr' label='Türkçe'>
</video>
<p>Bu video flaş analizi aracıyla (PEAT) incelenmiş ve güvenli bulunmuştur.</p>

Veelvoorkomende Fouten

• Aannemen dat GIF-bestanden standaard veilig zijn: Veel ontwikkelaars denken dat geanimeerde GIF’s, omdat het een legacyformaat is, per definitie onschadelijk zijn. In werkelijkheid kunnen GIF’s tussen frames wisselen met snelheden die hoger zijn dan 3 Hz, en het formaat legt geen technische limiet op aan de framerate. Elke GIF met afwisselende hoog-contrastframes moet in tijd en effect worden beoordeeld.
• Content van advertentie­scripts van derden over het hoofd zien: Display­advertentienetwerken leveren vaak creatieve units met flitsende of knipperende animaties. Uitgevers die advertentietags insluiten zonder de creatieve content te beoordelen, blijven verantwoordelijk voor eventuele WCAG 2.3.1-overtredingen die deze advertenties op hun pagina’s veroorzaken. Implementeer beleid voor beoordeling van advertentiecreaties en contractuele vereisten met advertentienetwerken.
• WCAG 2.3.1 verwarren met WCAG 2.2.2 (Pauzeren, Stoppen, Verbergen): Sommige teams pakken het symptoom aan door een pauzeknop toe te voegen (wat voldoet aan 2.2.2), maar pakken de onderliggende flitssnelheid niet aan (die 2.3.1 schendt). De twee criteria zijn onafhankelijk: een pauzeknop maakt content die al is begonnen te flitsen niet met terugwerkende kracht conform 2.3.1, omdat de gebruiker al is blootgesteld voordat hij of zij kan ingrijpen.
• Niet afzonderlijk rekening houden met de rode flitsdrempel: Ontwikkelaars die bekend zijn met de algemene drempel van 3 Hz, zien soms de aparte rode flitsdrempel over het hoofd. Content met snel afwisselende verzadigde roodtinten kan bij sommige personen fotosensitieve aanvallen uitlokken, zelfs bij frequenties net onder 3 Hz. Verzadigde rode animaties moeten met bijzondere zorg worden beoordeeld.
• Content in iframes negeren: Pagina’s die content van derden insluiten via <iframe>-elementen — waaronder socialmedia-widgets, livechattools of ingesloten dashboards — zijn verantwoordelijk voor de toegankelijkheid van die content zoals weergegeven op hun pagina. Flitsgevaar binnen een iframe is net zo gevaarlijk als in het hoofddocument.
• De mediaquery prefers-reduced-motion overslaan: Zelfs wanneer basisanimaties onder de drempel van 3 Hz blijven, betekent het niet implementeren van @media (prefers-reduced-motion: reduce) dat gebruikers die op OS-niveau een voorkeur voor minder beweging hebben ingesteld, geen tegemoetkoming krijgen. Hoewel dit primair wordt behandeld door WCAG 2.3.3 op AAA-niveau, is het opnemen van de query een goedkope, impactvolle praktijk die inzet voor toegankelijkheid toont en het risico verkleint.
• JavaScript setInterval of requestAnimationFrame gebruiken zonder snelheidsbegrenzing: Animaties die worden aangestuurd door setInterval(fn, 50) worden elke 50 milliseconden uitgevoerd en produceren 20 cycli per seconde — ruim boven de limiet van 3 Hz. Ontwikkelaars moeten expliciet de intervalduur berekenen die nodig is om op of onder één verandering per 333 ms te blijven voor elke animatie die de luminantie wijzigt.
• Videocontent niet screenen vóór publicatie: Veel organisaties hebben een publicatieworkflow met visuele QA en auteursrechtencontrole, maar zonder stap voor screening op flitsgevaar. Zonder PEAT of HFPA in de prepublicatie­pipeline op te nemen, kunnen fotosensitiviteits­risico’s in videocontent onopgemerkt blijven totdat ze schade veroorzaken.
• De grootte-uitzondering als gemakkelijk uit te buiten beschouwen: Sommige ontwikkelaars leren over de veilige gebiedsuitzondering van 0,006 steradiaal en proberen die te gebruiken om gevaarlijke flitseffecten te rechtvaardigen door ze klein te maken. In de praktijk vereist een nauwkeurige berekening of content binnen de drempel valt kennis van de kijkafstand en schermresolutie van de gebruiker — variabelen die de ontwikkelaar niet kan beheersen. Vertrouwen op de grootte-uitzondering zonder fotometrische meting is riskant en juridisch precair.
• Beoordelingen van flitsgevaar niet documenteren: Organisaties die video- of animatiecontent testen op flitsgevaar, laten vaak na om verslagen van die beoordelingen te bewaren. In het geval van een gebruikersklacht of een regulatoire audit is gedocumenteerd bewijs dat PEAT- of HFPA-screening is uitgevoerd en dat de content conform is bevonden, essentieel om zorgvuldigheid aan te tonen.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidentiële Circulaire 2025/10, gepubliceerd in Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte toegankelijkheidseisen voor web en mobiel vast die zijn afgestemd op WCAG 2.2. WCAG 2.3.1, als succescriterium op niveau A, valt binnen de reikwijdte van verplichte naleving voor alle betrokken entiteiten.

De circulaire definieert een gefaseerde nalevingstijdlijn: publieke instellingen en agentschappen moeten binnen één jaar na de inwerkingtreding van de circulaire volledige conformiteit op niveau A bereiken, terwijl entiteiten in de private sector die onder de regeling vallen, twee jaar de tijd hebben om te voldoen. Gezien het veiligheidskritieke karakter van WCAG 2.3.1 — dat direct verband houdt met het risico op het uitlokken van medische noodgevallen bij gebruikers — brengt niet-naleving van dit specifieke criterium een verhoogd reputatie- en juridisch risico met zich mee, zelfs in vergelijking met andere vereisten op niveau A.

De volgende typen entiteiten vallen expliciet onder Presidentiële Circulaire 2025/10 en moeten daarom voldoen aan WCAG 2.3.1:

• Publieke instellingen en overheidsinstanties: Alle centrale en lokale overheidsorganen, ministeries, gemeenten en aan de staat gelieerde organisaties die publieksgerichte websites of mobiele applicaties exploiteren.
• E-commerceplatforms: Online retail- en marktplaats­exploitanten die goederen of diensten aan consumenten leveren via digitale platforms, ongeacht de sector.
• Banken en financiële instellingen: Alle gelicentieerde banken, participatiebanken, beleggingsondernemingen en fintech-exploitanten die digitale bank- of financiële diensten aanbieden.
• Ziekenhuizen en zorgaanbieders: Publieke en private ziekenhuizen, poliklinieken en zorgnetwerken die patiëntgerichte digitale diensten aanbieden, waaronder afsprakenplanning en patiëntenportalen.
• Telecombedrijven met 200.000 of meer abonnees: Grote mobiele netwerkoperators en internetserviceproviders die aan de abonneedrempel voldoen, inclusief hun selfserviceportalen en mobiele applicaties.
• Reisbureaus: Gelicentieerde reis- en toerismebureaus die online boekings-, reserverings- of informatiediensten aanbieden.
• Private vervoersbedrijven: Luchtvaartmaatschappijen, intercitybus­exploitanten, veerbootmaatschappijen en andere private vervoersaanbieders met consumentgerichte digitale platforms.
• Particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE): Particuliere onderwijsinstellingen met MoNE-autorisatie die websites of digitale leerplatforms exploiteren.

Voor betrokken entiteiten vereist naleving van WCAG 2.3.1 niet alleen een eenmalige audit, maar een voortdurende operationele inzet. Omdat flitsgevaar meestal wordt geïntroduceerd via dynamische content — video-uploads, marketinganimaties, advertenties van derden — moeten organisaties screening op flitsgevaar inbedden in hun workflows voor contentpublicatie, niet alleen in hun initiële site-audit. Het gebruik van tools zoals PEAT voor screening van video vóór publicatie, gecombineerd met training van ontwikkelaars over veilige animatiesnelheden en implementatie van CSS-prefers-reduced-motion, vormt de minimumnorm voor operationele zorgvuldigheid die van betrokken entiteiten onder de circulaire wordt verwacht. Organisaties die vertrouwen op contentbeheer- of advertentiesystemen van derden moeten ook contractuele bepalingen opnemen die WCAG 2.3.1-naleving door hun leveranciers vereisen, aangezien de regulatoire verplichting rust bij de entiteit die de publieksgerichte digitale dienst exploiteert.