Flitsende beelden en epilepsie: de drie-flitsen-regel

Bij de meeste toegankelijkheidsproblemen is het gevolg dat iemand uw site niet goed kan gebruiken. Vervelend, maar herstelbaar: de bezoeker vertrekt of belt. Bij flitsende beelden ligt dat anders. Bij mensen met fotosensitieve epilepsie kan snel knipperend licht een aanval uitlokken, soms al binnen een paar seconden. Daarom staat flitsen en epilepsie in WCAG bij de criteria van het basisniveau A, en is de regel strenger geformuleerd dan bijna alle andere: dit mag gewoon niet gebeuren. Op een gemiddelde bedrijfswebsite is het risico klein. Maar het is er, vooral bij video, geanimeerde gifs en opvallende banners.

Wat is fotosensitieve epilepsie?

Bij een deel van de mensen met epilepsie kunnen aanvallen worden uitgelokt door lichtprikkels: knipperend of flikkerend licht, snel wisselende contrasten, of bepaalde patronen zoals felle strepen. Niet iedereen met epilepsie heeft dit, en niet iedereen weet van zichzelf dat hij er gevoelig voor is. Juist dat laatste maakt het gevaarlijk: een bezoeker kan niet altijd zelf inschatten dat hij een bepaalde video beter niet kan bekijken.

Ook mensen zonder epilepsie kunnen last hebben van flitsende beelden, zoals hoofdpijn, misselijkheid of een migraineaanval.

De drie-flitsen-regel uitgelegd

Succescriterium 2.3.1 van WCAG, “drie flitsen of onder de drempelwaarde”, zegt: een webpagina bevat niets wat vaker dan drie keer flitst binnen één seconde, tenzij de flitsen onder de algemene drempel en de drempel voor rode flitsen blijven.

Dat vraagt om een paar begrippen.

Wat is een flits?

Een flits is een paar tegengestelde veranderingen in helderheid: van licht naar donker en terug, met een voldoende groot verschil. Een knipperende lamp is een flits, maar een witte pagina die abrupt zwart wordt en weer wit ook.

Waarom drie per seconde?

Het risico op een aanval neemt sterk toe bij flikkering rond de drie per seconde en hoger. Met maximaal drie flitsen per seconde blijft u aan de veilige kant, ongeacht de grootte of kleur.

De drempels

De uitzondering voor “onder de drempel” heeft te maken met de grootte en kleur van de flits. Een kleine flits in een hoek van het scherm is minder riskant dan een flits die het hele beeld vult. Verzadigd rood heeft een eigen, strengere drempel, omdat rode flitsen extra risico geven. De precieze berekening is technisch en hangt af van schermgrootte en kijkafstand. Voor een website is het advies eenvoudig: reken er niet op dat een flits “klein genoeg” is. Blijf onder de drie per seconde.

Op niveau AAA bestaat ook criterium 2.3.2, waarin de uitzondering voor de drempels vervalt. Daar geldt gewoon: nooit meer dan drie flitsen per seconde.

Waar het op een gewone website voorkomt

• Video’s. Promotiefilmpjes en aftermovies van evenementen met stroboscoopverlichting, snelle montage met witte flitsen, of beelden van vuurwerk en concerten.
• Achtergrondvideo’s op de homepage, die automatisch starten zonder dat de bezoeker ervoor kiest.
• Geanimeerde gifs, bijvoorbeeld in blogartikelen of nieuwsbrieven, met knipperende tekst of snel wisselende beelden.
• Banners en advertenties die met knipperen de aandacht willen trekken.
• Animaties in CSS of JavaScript, zoals een knipperende “Actie”-badge of een effect dat snel tussen twee kleuren wisselt.
• Ingesloten content van anderen, zoals een YouTube-video of een social-mediapost.

Bij een knipperende badge of tekst geldt bovendien criterium 2.2.2: beweging en knipperen die automatisch starten en langer dan vijf seconden duren, moeten te pauzeren of te stoppen zijn. Een knipperende tekst is dus vrijwel altijd een slecht idee.

Zo controleert u uw content

Eerst met het oog

Loop uw video’s, gifs en animaties langs. Ziet u iets wat snel knippert, flitst of tussen licht en donker wisselt? Denk aan stroboscoop, flitslicht van camera’s, bliksem, vuurwerk, snelle zwart-witwissels in een montage. Zo’n fragment verdient een nadere blik.

Daarna met een analysetool

Er bestaan tools die een video frame voor frame analyseren op flitsen. Een bekende gratis tool is PEAT, de Photosensitive Epilepsy Analysis Tool van het Trace Research & Development Center. Die geeft aan of en waar een video de drempels overschrijdt. Het is een programma voor Windows en vraagt wat geduld, maar voor een video die prominent op uw site staat, is het de moeite waard. Laat bij twijfel ook de maker van de video meekijken.

Uw eigen animaties

Zoek in de CSS van uw thema naar animaties met een korte duur en infinite, zoals:

.badge { animation: knipper 0.2s infinite; }

Een animatie die vijf keer per seconde wisselt tussen licht en donker, is precies wat u niet wilt.

Wat te doen als u flitsende content tegenkomt

1. Haal het weg of vervang het als het geen wezenlijk onderdeel is. Een knipperende badge kan ook stilstaan.
2. Bewerk de video. Het flitsende fragment kan vaak worden ingekort, vertraagd of in contrast verminderd.
3. Geen autoplay. Laat video’s pas afspelen als de bezoeker daarvoor kiest. Achtergrondvideo’s met flitsende beelden horen er niet te staan.
4. Een waarschuwing vooraf is geen oplossing volgens WCAG, want het criterium laat geen uitzondering toe. Maar als u een video om goede redenen toch toont, bijvoorbeeld als historisch beeldmateriaal, is een duidelijke waarschuwing vóór het afspelen het minste wat u kunt doen.

Ook de instelling voor minder beweging kan helpen: bezoekers die die aanzetten, krijgen dan geen automatisch afspelende video’s en animaties te zien. Hoe u daar rekening mee houdt, staat in de instelling reduced motion respecteren. Voor het bredere verhaal over animaties en wanneer ze iets toevoegen, zie animaties op uw website.

Neem het mee in uw werkwijze

Het mooiste is als flitsende beelden er nooit op komen. Spreek met de mensen die content maken af dat video’s en gifs voor publicatie worden bekeken op flitsen, en dat achtergrondvideo’s rustig zijn. Leg het vast in de checklist die u gebruikt voor nieuwe content. Hoe u verder zorgt dat video’s goed te volgen zijn, met ondertiteling en audiodescriptie, leest u op video's op uw website toegankelijk maken. Het complete overzicht staat op audit, herstel en toegankelijkheidsverklaring.