WCAG 2.3.2: Trzy błyski

Wstęp do WCAG 2.3.2: Trzy błyski

Kryterium sukcesu WCAG 2.3.2, zatytułowane „Trzy błyski”, jest częścią wytycznych dostępności treści internetowych (WCAG) w wersji 2.0 i 2.1. Jest to kryterium na poziomie AAA, co oznacza, że jest to najbardziej rygorystyczny poziom dostępności, mający na celu zapewnienie maksymalnej użyteczności dla szerokiego grona osób z niepełnosprawnościami. Głównym celem tego kryterium jest zapobieganie atakom padaczkowym wywołanym przez migające lub błyskające treści na stronach internetowych.

Zgodnie z WCAG 2.3.2, żadna treść na stronie internetowej nie może migotać więcej niż trzy razy w ciągu jednej sekundy. W przeciwieństwie do kryterium WCAG 2.3.1 (Trzy błyski lub poniżej progu), kryterium 2.3.2 nie dopuszcza żadnych wyjątków dotyczących progów migotania (ogólnego lub czerwonego). Oznacza to, że liczy się każda wykrywalna zmiana luminancji, niezależnie od jej intensywności, jeśli występuje w szybkim tempie.

Dlaczego to jest ważne? Grupy użytkowników

Migające lub błyskające treści stanowią poważne zagrożenie dla zdrowia i bezpieczeństwa niektórych użytkowników, szczególnie tych cierpiących na padaczkę fotoczułą. U takich osób, szybkie zmiany luminancji lub koloru, szczególnie w spektrum czerwonym, mogą wywołać napady padaczkowe, które mogą prowadzić do urazów lub innych poważnych konsekwencji zdrowotnych.

• Osoby z padaczką fotoczułą: Są najbardziej narażoną grupą. Nawet krótkie, intensywne błyski mogą być dla nich niebezpieczne.
• Osoby z migrenami: Szybkie migotanie może wywoływać lub nasilać migreny, powodując ból głowy, nudności i inne objawy.
• Osoby z zaburzeniami uwagi: Błyskające elementy mogą być niezwykle rozpraszające, utrudniając skupienie się na treści.
• Osoby z ogólną nadwrażliwością na światło: Mogą odczuwać dyskomfort wzrokowy, zmęczenie oczu lub zawroty głowy.

Spełnienie tego kryterium nie tylko zwiększa dostępność, ale także poprawia ogólne doświadczenie użytkownika dla wszystkich, tworząc spokojniejsze i bezpieczniejsze środowisko cyfrowe.

Kryteria sukcesu i wymagania WCAG 2.3.2

Oficjalne brzmienie kryterium sukcesu 2.3.2 (Trzy błyski) jest następujące:

2.3.2 Trzy błyski: Strony internetowe nie zawierają niczego, co błyska więcej niż trzy razy w jakimkolwiek przedziale jednosekundowym.

Kluczowe aspekty i definicje:

• Błysk (Flash): Zmiana w względnej luminancji, która jest wystarczająco duża, aby została wykryta. Jest to ogólnie definiowane jako para przeciwstawnych zmian luminancji, czyli od ciemnego do jasnego i z powrotem do ciemnego, lub odwrotnie.
• Przedział jednosekundowy: Oznacza dowolny ciągły okres jednej sekundy. Oznacza to, że migotanie jest mierzone w każdym możliwym przedziale, a nie tylko w z góry określonych ramach czasowych.
• Trzy błyski: Absolutny limit. Treść nie może przekroczyć trzech błysków w ciągu jednej sekundy.

Warto zwrócić uwagę na różnicę w stosunku do WCAG 2.3.1 (poziom A), które dopuszcza migotanie, jeśli mieści się poniżej ogólnych progów błysków lub progów czerwonych błysków. Dla kryterium 2.3.2 (AAA) takie „bezpieczne progi” nie stanowią wyjątku – jeśli cokolwiek błyska więcej niż trzy razy, kryterium nie jest spełnione, niezależnie od intensywności błysku.

Zaleca się stosowanie wytycznych z normy ITU-T BT.1702-1, która dostarcza szczegółowych informacji na temat identyfikowania i mierzenia migotania. Narzędzia do testowania często wykorzystują te same metody obliczeniowe.

Praktyczne wskazówki dla zgodności

Aby spełnić kryterium WCAG 2.3.2, należy przestrzegać następujących zasad:

1. Unikaj szybkich zmian kolorów i luminancji: Nie używaj animacji ani efektów, które powodują szybkie przełączanie się między jasnymi i ciemnymi kolorami, zwłaszcza na dużych obszarach ekranu.
2. Ogranicz częstotliwość animacji: Jeśli musisz użyć animacji, upewnij się, że nie migocze ona szybciej niż 3 razy na sekundę (czyli częstotliwość nie przekracza 3 Hz).
3. Zapewnij kontrolę użytkownika: Daj użytkownikom możliwość wstrzymania, zatrzymania lub ukrycia wszelkich animacji. Preferencje systemowe (np. prefers-reduced-motion w CSS) również mogą pomóc.
4. Zmniejsz kontrast: Jeśli animacja jest konieczna, a istnieje ryzyko migotania, spróbuj zmniejszyć kontrast między zmieniającymi się stanami.
5. Używaj bezpiecznych wzorców: Unikaj wzorców graficznych, które mogą tworzyć iluzję migotania (np. szybko zmieniające się pasy lub kratki).
6. Testuj treści: Używaj narzędzi do analizy migotania, aby sprawdzić, czy dynamiczne elementy na Twojej stronie nie przekraczają bezpiecznych limitów.

Przykłady implementacji

Poprawna implementacja

Poniższe przykłady demonstrują, jak bezpiecznie używać animacji, aby były zgodne z WCAG 2.3.2.

.safe-animation {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: colorChange 4s infinite alternate;
}

@keyframes colorChange {
  0%   { background-color: blue; }
  100% { background-color: green; }
}
Skopiuj tekst

<div class="safe-animation"></div>
Skopiuj tekst

<button id="toggleAnimation">Włącz/Wyłącz animację</button>
<div id="animatedBox" style="width: 50px; height: 50px; background-color: purple;"></div>
Skopiuj tekst

document.addEventListener('DOMContentLoaded', () => {
  const toggleButton = document.getElementById('toggleAnimation');
  const animatedBox = document.getElementById('animatedBox');
  let animationActive = false;
  let intervalId;

  const startAnimation = () => {
    if (!animationActive) {
      animationActive = true;
      let isBright = true;
      intervalId = setInterval(() => {
        animatedBox.style.backgroundColor = isBright ? 'yellow' : 'purple';
        isBright = !isBright;
      }, 1000); // Zmiana co 1 sekundę (1 Hz), bezpiecznie poniżej 3 błysków/s
    }
  };

  const stopAnimation = () => {
    clearInterval(intervalId);
    animationActive = false;
    animatedBox.style.backgroundColor = 'purple'; // Ustawienie domyślnego koloru po zatrzymaniu
  };

  toggleButton.addEventListener('click', () => {
    if (animationActive) {
      stopAnimation();
      toggleButton.textContent = 'Włącz animację';
    } else {
      startAnimation();
      toggleButton.textContent = 'Wyłącz animację';
    }
  });

  // Domyślnie animacja wyłączona
  toggleButton.textContent = 'Włącz animację';
});
Skopiuj tekst

Niepoprawna implementacja

Poniższe przykłady pokazują, czego należy unikać, aby nie naruszać kryterium WCAG 2.3.2.

.fast-flash-animation {
  width: 100px;
  height: 100px;
  animation: dangerFlash 0.1s infinite alternate; /* Zmiana co 0.1s = 10 błysków/s */
}

@keyframes dangerFlash {
  0%   { background-color: red; }
  100% { background-color: black; }
}
Skopiuj tekst

<div class="fast-flash-animation"></div>
Skopiuj tekst

<div id="flashingElement" style="width: 50px; height: 50px; background-color: white;"></div>
Skopiuj tekst

document.addEventListener('DOMContentLoaded', () => {
  const flashingElement = document.getElementById('flashingElement');
  let isBright = true;

  setInterval(() => {
    flashingElement.style.backgroundColor = isBright ? 'white' : 'black';
    isBright = !isBright;
  }, 100); // Zmiana co 100 ms (0.1 sekundy), czyli 10 Hz - niebezpieczne!
});
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

• Audytuj treści dynamiczne: Regularnie sprawdzaj wszystkie animacje, reklamy, widżety innych firm i inne treści dynamiczne pod kątem migotania. Często problemem są elementy pochodzące z zewnętrznych źródeł, nad którymi deweloper ma mniejszą kontrolę.
• Testowanie automatyczne i manualne: Używaj narzędzi automatycznych do wstępnej detekcji, ale pamiętaj, że ludzkie oko i manualne testy są nadal kluczowe do pełnej oceny.
• Uważaj na 'hover’ i 'focus’ efekty: Chociaż rzadziej, nawet szybkie zmiany tła lub obramowania po najechaniu myszą lub fokusie mogą, w ekstremalnych przypadkach, przyczyniać się do problemu, jeśli są zbyt gwałtowne lub występują na dużych obszarach.
• Edukuj zespół: Upewnij się, że projektanci, deweloperzy i twórcy treści są świadomi ryzyka związanego z migotaniem i znają wytyczne WCAG 2.3.2.
• Wskazówki dla użytkowników: Jeśli musisz umieścić na stronie treści potencjalnie migoczące (np. materiały wideo), umieść wyraźne ostrzeżenie przed ich odtworzeniem i zapewnij alternatywne wersje lub sposoby kontroli.
• Nie polegaj wyłącznie na metadanych: Oznaczanie filmu jako „nie zawiera migotania” nie wystarczy, jeśli rzeczywista treść je zawiera. Zawsze należy dążyć do fizycznej zgodności.

Zgodność z WCAG 2.3.2 wymaga proaktywnego podejścia i świadomego projektowania, aby zapewnić bezpieczne i dostępne środowisko dla wszystkich użytkowników.