Funkcjonalność · Poziom A

2.3.1 Trzy błyski lub wartości poniżej progu

Błyski nie mogą przekraczać progu ryzyka napadu padaczkowego.

Krótko

Strona nie może pokazywać treści, która błyska więcej niż trzy razy w ciągu sekundy, chyba że błyski są wystarczająco małe lub słabe, aby mieścić się poniżej progów WCAG.

Problem w praktyce

Baner reklamowy szybko przełącza jasne i ciemne plansze. Film w tle zawiera gwałtowne błyski światła. Taki materiał może wywołać napad u osób z padaczką fotogenną albo innymi zaburzeniami wrażliwości na światło.

To kryterium nie dotyczy samego dyskomfortu wizualnego, kontrastu ani „brzydkiej” animacji. Dotyczy błysków rozumianych jako szybkie zmiany jasności lub czerwieni, które mogą przekroczyć próg bezpieczeństwa.

Kogo to dotyczy

  • Osób z padaczką fotogenną.
  • Osób z innymi zaburzeniami wrażliwości na błyski światła.
  • Użytkowników, którzy nie mogą szybko odwrócić wzroku od ekranu.
  • Osób korzystających z dużych ekranów albo powiększenia, gdzie błysk zajmuje większy obszar widzenia.

Dobry przykład

  • Animacja nie błyska częściej niż trzy razy w żadnym okresie jednej sekundy.
  • Materiał wideo został sprawdzony narzędziem do analizy błysków.
  • Efekt alarmu używa stałego koloru i tekstu zamiast szybkiego błyskania.
  • Błyskający fragment jest mały i potwierdzony jako poniżej progu WCAG.

Zły przykład

  • Baner przełącza tło z białego na czarne kilka razy na sekundę.
  • Film promocyjny zawiera stroboskop bez sprawdzenia progu.
  • Komunikat błędu błyska czerwienią w dużym obszarze ekranu.
  • Gra lub quiz pokazuje szybkie błyski jako informację zwrotną.

Przykłady kodu

Dobry przykład: komunikat bez błyskania

Zamiast błysku użyj stałej informacji tekstowej i wizualnej.

Kod — HTML

<div class="alert alert-error">
  <h2>Nie udało się zapisać zmian</h2>
  <p>Sprawdź połączenie i spróbuj ponownie.</p>
</div>

Zły przykład: szybkie błyskanie

Taki efekt wymaga analizy progu i zwykle lepiej go usunąć.

Kod — CSS

.danger-flash {
  animation: flash 0.2s infinite;
}

@keyframes flash {
  0%, 100% { background: white; }
  50% { background: red; }
}

Przykład graficzny

Źle

Szybki stroboskop: wiele błysków w sekundę

Ryzyko napadu wymaga usunięcia lub analizy progu.

Dobrze

Stały komunikat + ikona + tekst

Informacja jest widoczna bez błysków.

Schemat celowo nie pokazuje realnego błyskania. W materiale edukacyjnym opisujemy ryzyko bez tworzenia ryzykownego efektu.

Jak sprawdzić

  1. Znajdź animacje, filmy, reklamy, gry i komunikaty z szybką zmianą jasności lub czerwieni.
  2. Sprawdź, czy w dowolnej sekundzie występują więcej niż trzy błyski.
  3. Jeśli błyski są szybkie, użyj narzędzia do analizy progu błysku.
  4. Sprawdź szczególnie duże obszary ekranu i intensywną czerwień.
  5. Nie oceniaj tu zwykłego niskiego kontrastu albo samego dyskomfortu animacji.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część animacji CSS o dużej częstotliwości,
  • materiały wideo wymagające analizy,
  • część szybkich zmian jasności w pikselach.

Automat nie oceni pewnie

  • każdego osadzonego materiału zewnętrznego,
  • kontekstu widocznego obszaru i wielkości błysku bez renderowania,
  • czy efekt mieści się poniżej ogólnego albo czerwonego progu błysku bez specjalistycznej analizy.

Typowe błędy

  • Stroboskopowe intro w filmie bez analizy.
  • Szybko migający baner reklamowy.
  • Animowane tło z intensywną czerwienią.
  • Komunikaty błędów oparte na szybkim błyskaniu zamiast na stałej informacji.