Unngå blinkende og flimrende innhold (WCAG 2.3.1)

I 1997 fikk over 600 japanske barn epileptiske anfall etter å ha sett en episode av Pokémon. En sekvens med raskt blinkende rødt og blått lys utløste fotosensitive anfall hos seere over hele landet. Denne hendelsen førte til at underholdningsindustrien tok blinkende innhold på alvor - og den er en påminnelse om at det vi viser på skjermen kan ha reelle, fysiske konsekvenser.

Hva sier kravet?

WCAG 2.3.1 «Tre glimt eller under terskelverdi» er et nivå A-krav. Det sier at nettsider ikke skal inneholde noe som blinker mer enn tre ganger per sekund, med mindre blinkingen er under de generelle tersklene for glimt og rødt glimt.

Et «glimt» defineres som en rask endring i lysstyrke - for eksempel en brå overgang fra mørkt til lyst og tilbake igjen. Det handler altså ikke bare om elementer som bokstavelig talt blinker med CSS-animasjoner. Det inkluderer også video, animerte GIF-er, dynamiske bannere og enhver annen visuell effekt som skaper raske lysstyrkeendringer.

Tersklene er tekniske: et generelt glimt overstiger 10 % av den maksimale lysstyrken i et område som er større enn 0,006 steradianer ved typisk visningsavstand. I praksis betyr dette at små, subtile blinkinger i et lite område er tillatt, men store, kraftige lysstyrkeendringer over en betydelig del av skjermen er det ikke.

Hvorfor er dette viktig?

Dette er et av de få WCAG-kravene som handler om brukerens fysiske sikkerhet. Blinkende innhold kan utløse:

• Epileptiske anfall hos personer med fotosensitiv epilepsi - omtrent 3 % av alle med epilepsi er fotosensitive
• Migrene hos personer som er sensitive for visuell stimulering
• Svimmelhet og kvalme hos personer med vestibulære forstyrrelser
• Ubehag og konsentrasjonsvansker hos et langt bredere publikum

I Norge lever omtrent 40 000 mennesker med epilepsi. Selv om bare en liten andel er fotosensitive, er konsekvensene av et anfall alvorlige - fra bevisstløshet til fall og skader. Det er rett og slett ikke verdt risikoen å bruke kraftig blinkende effekter.

Og det handler ikke bare om alvorlige medisinske tilstander. Blinkende innhold er distraherende for alle, og spesielt vanskelig for personer med oppmerksomhetsvansker (ADHD) og kognitive funksjonsnedsettelser.

Slik oppfyller du kravet

Unngå blinkende innhold

Den enkleste og sikreste løsningen er å aldri bruke innhold som blinker mer enn tre ganger per sekund. Spør deg selv: er blinkingen nødvendig, eller kan det samme budskapet formidles på en annen måte?

I stedet for blinkende tekst for å tiltrekke oppmerksomhet, bruk for eksempel en tydelig farge, en ramme, eller et ikon:

/* FEIL: Blinkende animasjon */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.viktig-melding {
  animation: blink 0.2s infinite; /* Blinker 5 ganger/sekund - farlig! */
}

/* RIKTIG: Rolig pulserende effekt under terskelverdi */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.viktig-melding {
  animation: pulse 2s ease-in-out infinite; /* Langsom puls, 0.5 ganger/sekund */
}

Respekter prefers-reduced-motion

Moderne nettlesere lar brukere angi at de foretrekker redusert bevegelse. Bruk denne innstillingen for å fjerne eller dempe animasjoner:

/* Standard: Animasjoner er aktive */
.animated-element {
  animation: slideIn 0.3s ease-out;
  transition: transform 0.2s;
}

/* Redusert bevegelse: Fjern eller demp animasjoner */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    transition: none;
  }
}

Dette er ikke et krav i WCAG 2.3.1 spesifikt, men det er en god praksis som hjelper mange brukere og viser at du tar tilgjengelighet på alvor.

Sjekk animerte GIF-er og video

Animerte GIF-er er en vanlig kilde til problemer fordi de ofte inneholder raske overganger. Gå gjennom alle animerte GIF-er på nettstedet og sjekk:

• Blinker de mer enn tre ganger per sekund?
• Dekker de et stort område av skjermen?
• Er det brå overganger mellom mørkt og lyst?

For videoinnhold, sjekk spesielt scener med stroboskopeffekter, eksplosjonslys, blitzfotografering og raske klipp mellom lyse og mørke scener.

Gi brukeren kontroll over animasjoner

Hvis du har innhold som animeres automatisk (karuseller, videoer, GIF-er), la brukeren stoppe det:

<div class="karusell">
  <div class="karusell-innhold">
    <!-- Bilder her -->
  </div>
  <button onclick="stoppKarusell()" aria-label="Stopp automatisk bildebytte">
    Pause
  </button>
</div>

Bruk verktøy for å teste

Det er vanskelig å telle glimt per sekund manuelt. Heldigvis finnes det verktøy:

• Photosensitive Epilepsy Analysis Tool (PEAT) - et gratis verktøy fra Trace Research & Development Center som analyserer video for farlige glimtmønstre
• Chrome DevTools - Rendering-fanen kan simulere «prefers-reduced-motion» for å teste at nettsiden din respekterer denne innstillingen
• Manuell inspeksjon - se gjennom alle animasjoner og videoer med et kritisk blikk

Vanlige feil

• CSS-animasjoner med svært kort varighet (under 333 ms for en full syklus) som skaper glimt over terskelverdi
• Animerte bannere og reklameannonser med blinkende tekst eller raske fargeoverganger
• Automatisk avspilling av video med stroboskopeffekter uten forhåndsvarsel
• Animerte GIF-er i blogginnlegg og artikler som blinker ukontrollert
• Spillifisering og gamification-elementer med kraftige visuelle effekter ved poenggivning eller belønning
• Manglende støtte for prefers-reduced-motion - en enkel CSS-mediespørring som tar få minutter å implementere

Blinkende innhold er et sjeldent tilfelle der tilgjengelighetskravet handler om direkte, fysisk fare. Ta det på alvor, og vurder om den blinkende effekten virkelig er verdt risikoen.