WCAG 2.3.1: Trzy błyski lub poniżej progu

Kryterium sukcesu WCAG 2.3.1 „Trzy błyski lub poniżej progu” (poziom A) jest kluczowe dla zapewnienia bezpieczeństwa i dostępności dla osób z epilepsją fotowrażliwą oraz innych wrażliwych użytkowników. Wymaga ono, aby treści cyfrowe nie migotały więcej niż trzy razy w ciągu jednej sekundy, chyba że natężenie migotania jest na tyle niskie, że nie wywołuje ataków padaczki. Celem jest ochrona użytkowników przed szkodliwymi efektami szybkiego migotania, które może prowadzić do poważnych konsekwencji zdrowotnych.

Dlaczego to jest ważne?

Szybkie migotanie lub błyski na ekranie mogą być niebezpieczne, a nawet śmiertelne, dla osób cierpiących na epilepsję fotowrażliwą. Tego typu bodźce wizualne mogą wywoływać ataki padaczki, które mogą prowadzić do urazów fizycznych lub innych poważnych komplikacji. Nawet dla osób bez zdiagnozowanych schorzeń neurologicznych, intensywne i szybkie migotanie może powodować dyskomfort, bóle głowy, dezorientację, a także zmęczenie wzroku.

Użytkownicy, których dotyczy problem:

• Osoby z epilepsją fotowrażliwą: Główna grupa docelowa, dla której migotanie stanowi bezpośrednie zagrożenie zdrowotne. Szacuje się, że 3% osób z padaczką jest wrażliwych na światło, a błyski o częstotliwości 3-60 Hz są najbardziej ryzykowne.
• Osoby z migrenami lub innymi schorzeniami neurologicznymi: Mogą doświadczać zaostrzenia objawów w wyniku ekspozycji na migające treści.
• Użytkownicy wrażliwi na bodźce wizualne: Ogólna populacja, która może odczuwać dyskomfort, zmęczenie wzroku lub trudności z koncentracją w obecności migających elementów.

Kryterium sukcesu i wymagania

Kryterium sukcesu 2.3.1 (Trzy błyski lub poniżej progu) jest kryterium poziomu A, co oznacza, że jest to podstawowy wymóg dostępności, który musi być spełniony. Mówi ono:

Treść nie może migać więcej niż trzy razy w ciągu jednej sekundy, chyba że natężenie migotania mieści się poniżej progów mogących wywołać atak padaczki.

Szczegóły wymagań:

• Definicja „błysku”: Błysk to para przeciwstawnych zmian względnej luminancji (jasności). Na przykład, przejście z ciemnego na jasne, a następnie z jasnego na ciemne, tworzy jeden błysk.
• Limit trzech błysków: Wszelka treść migocząca więcej niż trzy razy w ciągu jednej sekundy jest potencjalnie niebezpieczna i musi być zmodyfikowana lub usunięta.
• Progi bezpiecznego migotania („poniżej progu”): Jeśli migotanie jest absolutnie konieczne i przekracza limit trzech błysków na sekundę (co jest rzadkością w dostępnych treściach), musi spełniać surowe progi bezpieczeństwa. WCAG odwołuje się do ogólnych progów błysków i progów błysków czerwonych, często określonych w standardach takich jak ITU-R BT.1702-1. Obejmują one:
  • Ogólny próg błysku: Błyski nie przekraczające 10% obszaru ekranu wizyjnego (na standardowym monitorze 21-calowym przy typowej odległości oglądania) lub nie posiadające wystarczająco wysokiego kontrastu i luminancji.
  • Próg błysku czerwonego: Błyski zawierające znaczną ilość nasyconej czerwieni są szczególnie ryzykowne i mają jeszcze bardziej restrykcyjne progi dotyczące powierzchni i kontrastu.

  Zasadniczo, najlepszym i najbezpieczniejszym rozwiązaniem jest całkowite unikanie migotania, które przekracza limit trzech błysków na sekundę.

Praktyczne wytyczne dotyczące zgodności

Aby spełnić kryterium 2.3.1, należy przestrzegać następujących wytycznych:

• Unikaj migotania, jeśli to możliwe: Zawsze staraj się unikać wszelkich form migotania lub błysków w treści. Jest to najbezpieczniejsza i najbardziej efektywna strategia.
• Ogranicz liczbę błysków: Jeśli migotanie jest absolutnie niezbędne (np. w przypadku niektórych efektów specjalnych wideo), upewnij się, że nie występuje więcej niż trzy razy na sekundę w jakimkolwiek obszarze ekranu.
• Minimalizuj obszar migotania: Jeśli migotanie jest konieczne i mieści się w dopuszczalnym limicie (mniej niż 3 błyski/sek), ogranicz jego powierzchnię na ekranie do absolutnego minimum.
• Unikaj błysków o wysokim kontraście i czystej czerwieni: Błyski o silnym kontraście między jasnym a ciemnym, a zwłaszcza te zawierające intensywną czerwień, są najbardziej ryzykowne i powinny być unikane.
• Zapewnij kontrolę użytkownikom: Jeśli treści migające są częścią składową (np. w filmie), rozważ dodanie ostrzeżenia i zapewnij użytkownikom opcje sterowania, takie jak pauza, stop lub możliwość pominięcia sekcji zawierającej błyski.
• Testuj treści: Używaj narzędzi analitycznych, takich jak Photosensitive Epilepsy Analysis Tool (PEAT), aby wykrywać potencjalnie niebezpieczne sekwencje błysków w materiałach wideo lub animowanych.

Przykłady implementacji

Nieprawidłowe implementacje (Incorrect)

Poniższe przykłady przedstawiają typowe błędy, które naruszają kryterium 2.3.1.

.flash-banner {
    width: 100%;
    height: 50px;
    background-color: blue;
    animation: rapidFlash 0.15s infinite alternate; /* cykl 0.3s (blue->red->blue) -> ok. 3.33 błysków/sekundę */
}

@keyframes rapidFlash {
    0% { background-color: blue; }
    100% { background-color: red; }
}
Skopiuj tekst

<button onclick="showFastFlashError()">Wygeneruj szybki błąd</button>
<p id="error-message" style="color: red; display: none;">Błąd! Proszę spróbować ponownie.</p>
Skopiuj tekst

function showFastFlashError() {
    const errorElement = document.getElementById('error-message');
    let flashCount = 0;
    const intervalTime = 150; // Zmiana stanu co 150ms
    const maxFlashes = 6; // Odpowiada 3 pełnym cyklom błysku (on/off)

    const interval = setInterval(() => {
        if (flashCount >= maxFlashes) {
            clearInterval(interval);
            errorElement.style.display = 'none';
            return;
        }
        if (errorElement.style.display === 'none') {
            errorElement.style.display = 'block';
        } else {
            errorElement.style.display = 'none';
        }
        flashCount++;
    }, intervalTime); // Cykl (on+off) trwa 300ms, co daje ok. 3.33 błysków/sekundę
}
Skopiuj tekst

Prawidłowe implementacje (Correct)

Poniższe przykłady pokazują, jak można projektować treści zgodnie z kryterium 2.3.1.

.slow-fade-banner {
    width: 100%;
    height: 50px;
    background-color: #add8e6; /* Jasnoniebieski */
    animation: slowFade 4s infinite alternate; /* Pełny cykl 4s, czyli 0.25 błysku/sekundę */
}

@keyframes slowFade {
    0% { background-color: #add8e6; }
    50% { background-color: #90ee90; } /* Jasnozielony */
    100% { background-color: #add8e6; }
}
Skopiuj tekst

<button onclick="showStaticError()">Wygeneruj statyczny błąd</button>
<p id="static-error-message" style="color: red; display: none; opacity: 0; transition: opacity 0.5s ease-in-out;">
    Błąd! Proszę spróbować ponownie.
</p>
Skopiuj tekst

function showStaticError() {
    const errorElement = document.getElementById('static-error-message');
    errorElement.style.display = 'block';
    // Małe opóźnienie, aby transition zadziałało po zmianie display
    setTimeout(() => {
        errorElement.style.opacity = '1';
    }, 10);
}
Skopiuj tekst

<div class="video-container">
    <p><strong>Ostrzeżenie:</strong> Ten film zawiera sekwencje migotania, które mogą wywołać ataki padaczki. Zalecana jest ostrożność.</p>
    <button onclick="playVideo()">Odtwórz wideo (akceptuję ryzyko)</button>
    <button onclick="skipVideo()">Pomiń wideo</button>
    <video id="myVideo" controls style="display: none;">
        <source src="flashing_content_video.mp4" type="video/mp4">
        Twoja przeglądarka nie obsługuje elementu wideo.
    </video>
</div>
Skopiuj tekst

function playVideo() {
    document.getElementById('myVideo').style.display = 'block';
    document.getElementById('myVideo').play();
}
function skipVideo() {
    alert('Wideo zostało pominięte.');
    // Tutaj można przekierować użytkownika lub ukryć kontener wideo
}
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

• Priorytetyzuj bezpieczeństwo: Zawsze stawiaj bezpieczeństwo użytkowników na pierwszym miejscu, dążąc do eliminacji wszelkich zbędnych migotań. Jeśli migotanie jest krytyczne dla treści, zawsze zapewnij alternatywną, bezpieczną wersję.
• Używaj płynnych animacji: Preferuj animacje oparte na przejściach (transitions) lub wolnych animacjach (animations) CSS, które subtelnie zmieniają stan elementów, zamiast nagłych, gwałtownych błysków.
• Oferuj alternatywy i kontrolę: Jeśli animacja lub efekt wizualny jest istotny, rozważ dostarczenie alternatywnej, statycznej wersji treści lub opcji spowolnienia/wyłączenia animacji/błysków. Użytkownicy powinni mieć możliwość kontroli nad takimi elementami.
• Ogranicz użycie zewnętrznych treści: Uważaj na animowane GIF-y, reklamy (Rich Media) lub treści generowane przez użytkowników, które mogą zawierać niekontrolowane błyski. W miarę możliwości skanuj, moderuj lub blokuj takie treści, jeśli stanowią ryzyko.
• Edukuj zespół: Upewnij się, że projektanci, programiści i twórcy treści są świadomi wymogów WCAG 2.3.1 i potencjalnych zagrożeń związanych z migotaniem.

Typowe pułapki:

• Szybko migające wskaźniki ostrości (focus indicators): Niektóre domyślne style fokusa lub niestandardowe implementacje mogą migać zbyt szybko, co może być problematyczne. Używaj stabilnych, dobrze widocznych obramowań, cieni lub zmian tła, które nie migoczą.
• Animowane ładowanie stron/sekcji: Wskaźniki ładowania, takie jak obracające się kółka, mogą czasami tworzyć wzorce, które, choć nie są błyskami w tradycyjnym sensie, mogą być niepokojące dla niektórych osób. Należy zadbać o płynność i unikać szybkich zmian kontrastu.
• Wideo z dużą ilością akcji: Filmy, zwłaszcza z szybkimi cięciami, stroboskopowymi efektami świetlnymi, eksplozjami lub nagłymi zmianami scen, często zawierają błyski przekraczające próg bezpieczeństwa. Wymagają one analizy (np. z PEAT) i potencjalnie ostrzeżeń lub edycji.
• Niekontrolowane treści z zewnętrznych źródeł: Reklamy w formacie Rich Media, widżety mediów społecznościowych lub treści osadzone z innych serwisów mogą zawierać migotanie poza kontrolą dewelopera strony. Należy minimalizować takie ryzyko poprzez wybór zaufanych dostawców lub ograniczenie użycia takich treści.