Campus Design System

Appearance

2.3.1 Maximaal drie flitsen niveau A ​

Uitleg ​

Het WCAG-criterium 2.3.1 Maximaal drie flitsen vereist dat webpagina's geen inhoud bevatten die meer dan drie keer per seconde flitst. Dit geldt zowel voor visuele als auditieve flitsen. Dit criterium is van belang voor mensen die gevoelig zijn voor flitsen, zoals mensen met epilepsie of andere neurologische aandoeningen.

Flitsen van licht kunnen bij sommige gebruikers een epileptische aanval uitlokken, dus het is van cruciaal belang dat ontwerpers ervoor zorgen dat dergelijke visuele elementen binnen veilige grenzen blijven. Dit criterium stelt ook dat flitsen moeten voldoen aan bepaalde drempels om het risico op medische incidenten te verminderen.

Wat betekent dit in de praktijk? ​

Webpagina's mogen geen visuele of auditieve flitsen bevatten die meer dan drie keer per seconde optreden. Dit geldt voor de inhoud van de pagina, zoals animaties, afbeeldingen of video's. Bovendien mogen flitsen die optreden niet boven de door de WCAG gedefinieerde drempels komen (de zogenaamde flitsdrempels), die zijn ontworpen om te voorkomen dat flitsen schadelijk kunnen zijn voor gebruikers.

Flitsen kunnen gevaarlijk zijn voor mensen met fotosensitieve epilepsie, en daarom moeten ze zo worden ontworpen dat ze geen risico vormen. Het is dus belangrijk om ervoor te zorgen dat flitsen voldoen aan de veiligheidseisen.

Flitsdrempels ​

Flitsen mogen geen helderheid van meer dan 3 Hz bereiken, of boven een bepaalde intensiteit komen, om te voorkomen dat ze epileptische aanvallen kunnen veroorzaken. De drempels die als veilig worden beschouwd zijn als volgt:

  • Flitsen moeten niet meer dan drie keer per seconde optreden.
  • De helderheid van de flits moet onder de drempel van 100 lux blijven, of deze mag niet een significant contrast creëren in de omgeving.

Oplossing voor dit probleem ​

Om te voldoen aan dit criterium, moeten webpagina's zorgvuldig worden ontworpen zodat flitsende elementen worden vermeden of op een veilige manier worden geïmplementeerd.

  • Gebruik geen snelle flitsen die meer dan drie keer per seconde plaatsvinden.
  • Beperk het gebruik van flitsen in alle vormen van inhoud, zoals animaties, knipperende tekst of videos.
  • Maak gebruik van controles waarmee de gebruiker flitsende animaties kan pauzeren of uitschakelen.

Voorbeeld van het probleem ​

Stel je voor dat een website een banner toont met een knipperende animatie die meerdere keren per seconde flitst. Dit zou problematisch kunnen zijn voor gebruikers die gevoelig zijn voor flitsen en zou kunnen leiden tot een epileptische aanval.

Oplossing voor dit probleem ​

Een oplossing is om de snelheid van de animatie te beperken zodat deze minder dan drie keer per seconde flitst of door een optie te bieden waarmee gebruikers de animatie kunnen pauzeren.

Goed voorbeeld:

html
<!-- Voorbeeld van een veilige animatie met geen flitsen boven 3 Hz -->
<div style="animation: blink 2s infinite;">
  <p>Dit is een tekst die flitst, maar met een veilige snelheid.</p>
</div>

<style>
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>

In dit voorbeeld flitst de tekst met een snelheid van 2 seconden voor elke cyclus, wat minder dan drie keer per seconde is, en dus veilig.

Slecht voorbeeld:

html
<!-- Voorbeeld van een onveilige animatie met meer dan 3 flitsen per seconde -->
<div style="animation: blink 0.3s infinite;">
  <p>Dit is een tekst die veel te snel flitst!</p>
</div>

<style>
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>

In dit voorbeeld flitst de tekst om de 0.3 seconde, wat meer dan drie keer per seconde is, en dit kan gevaarlijk zijn voor gebruikers met fotosensitieve epilepsie.

Belangrijke overwegingen ​

  • Automatische animaties moeten voorzichtig worden gebruikt, vooral als ze flitsen bevatten. Zorg ervoor dat ze geen snelle flitsen bevatten, of geef gebruikers de mogelijkheid om ze uit te schakelen.
  • Flitsende animaties moeten altijd kunnen worden gepauzeerd, zodat gebruikers die gevoelig zijn voor flitsen ze kunnen stoppen.

Tools en Hulpmiddelen ​

  • Epilepsy Foundation’s Online Tool: Dit is een hulpmiddel om te testen of een animatie of video voldoet aan de veiligheidsdrempels voor epilepsie. Je kunt het gebruiken om de frequentie en het effect van flitsen te analyseren. Epilepsy Foundation Tool.
  • aXe Accessibility Tool: Gebruik deze tool om flitsende elementen op je website te detecteren en te controleren of ze voldoen aan de WCAG-standaarden. aXe Tool.

Referenties ​