WCAG 2.3.3: Animacja po interakcji

Wprowadzenie do WCAG 2.3.3: Animacja po interakcji

Kryterium sukcesu WCAG 2.3.3 „Animacja po interakcji” (Poziom AA) dotyczy zapewnienia użytkownikom kontroli nad animacjami, które są wywoływane w wyniku ich działań. Zgodnie z tym kryterium, wszelkie animacje ruchome, które są wywołane interakcją użytkownika (np. kliknięciem, najechaniem kursorem, przewinięciem), muszą mieć możliwość wyłączenia, chyba że animacja jest absolutnie niezbędna do funkcjonalności lub komunikacji.

Celem tego kryterium jest zapobieganie negatywnym doświadczeniom użytkowników, takim jak dezorientacja, choroba lokomocyjna, dyskomfort fizyczny lub przeciążenie poznawcze, które mogą być wywołane przez niekontrolowane lub intensywne animacje.

Dlaczego to jest ważne? (Wpływ na dostępność)

Animacje, choć często stosowane w celu poprawy estetyki i atrakcyjności interfejsu, mogą stanowić poważną barierę dla wielu użytkowników, jeśli nie są odpowiednio zarządzane. Ruchoma lub migająca zawartość może być problematyczna z wielu powodów:

• Zaburzenia przedsionkowe: Osoby z chorobą Meniere’a, migrenami przedsionkowymi lub innymi zaburzeniami przedsionkowymi mogą doświadczać nudności, zawrotów głowy lub dezorientacji w wyniku oglądania ruchomych elementów.
• Zaburzenia poznawcze: Użytkownicy z zaburzeniami uwagi, takimi jak ADHD, lub z innymi trudnościami poznawczymi, mogą mieć problemy ze skupieniem się na treści, gdy w tle występują rozpraszające animacje. Ruch może odciągać ich uwagę od kluczowych informacji.
• Lęk i stres: Nieoczekiwane lub intensywne animacje mogą wywoływać lęk u niektórych osób, zwłaszcza jeśli są one poza ich kontrolą.
• Zmęczenie wzroku: Ciągłe śledzenie ruchomych obiektów może prowadzić do zmęczenia wzroku, co utrudnia długotrwałe korzystanie z serwisu.

Grupy użytkowników, których dotyczy

• Osoby z zaburzeniami przedsionkowymi (np. choroba lokomocyjna, zawroty głowy).
• Osoby z zaburzeniami uwagi (np. ADHD).
• Osoby z autyzmem lub innymi zaburzeniami przetwarzania sensorycznego.
• Osoby starsze, które mogą mieć trudności z przetwarzaniem szybko zmieniających się wizualnie informacji.
• Osoby z ogólnymi preferencjami dotyczącymi minimalizacji rozproszeń.

Kryteria Sukcesu i Wymagania

Kryterium WCAG 2.3.3 stanowi, że:

• Animacje wywołane interakcją: Jeśli animacje ruchu są wywoływane przez interakcję użytkownika (np. aktywację komponentu, najechanie kursorem), muszą one mieć możliwość wyłączenia.
• Wyjątek – animacje niezbędne: Wyjątkiem są animacje, które są niezbędne. Animacja jest niezbędna, jeśli jej usunięcie uniemożliwiłoby funkcjonalność lub zrozumienie informacji. Przykłady niezbędnych animacji to:
• Animacje stanowiące jedyny sposób przekazania kluczowej informacji (np. wizualne wskazanie zmiany stanu, którego nie da się przekazać tekstem lub innym statycznym elementem).
• Animacje będące integralną częścią interakcji, bez której interakcja nie mogłaby zostać wykonana (np. animacja przeciągania i upuszczania, gdzie ruch elementu jest kluczowy dla zrozumienia procesu).
• Animacje jako wskaźniki postępu, jeśli nie ma innej, równie efektywnej metody przekazania postępu.

W większości przypadków efekty wizualne takie jak paralaksy, animowane tła, subtelne ruchy elementów interfejsu po najechaniu kursorem, czy efekty przejścia nie są niezbędne i powinny mieć możliwość wyłączenia.

Praktyczne wytyczne dotyczące zgodności

Istnieją dwie główne strategie zapewnienia zgodności z WCAG 2.3.3:

Użycie zapytania mediów prefers-reduced-motion

Najlepszym i najbardziej zalecanym podejściem jest wykorzystanie zapytania mediów CSS prefers-reduced-motion. Pozwala ono witrynom i aplikacjom dostosować swoje animacje do preferencji systemu operacyjnego użytkownika. Jeśli użytkownik włączył w ustawieniach systemowych opcję „ogranicz ruch” lub „wyłącz animacje”, strona automatycznie zastosuje stylizację redukującą lub usuwającą animacje.

Zapewnienie kontroli na stronie

Alternatywnie lub jako uzupełnienie, można zapewnić użytkownikom możliwość wyłączenia animacji bezpośrednio na stronie, np. poprzez przełącznik w ustawieniach konta, w stopce strony lub w widocznym menu dostępności. Ta metoda daje użytkownikom kontrolę niezależnie od ich ustawień systemowych.

Przykłady implementacji

Przykład prawidłowy: Użycie prefers-reduced-motion

Ten przykład pokazuje, jak użyć prefers-reduced-motion do wyłączenia animacji obracania elementu, gdy użytkownik preferuje zredukowany ruch.

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: dodgerblue;
    margin: 20px;
    animation: spin 3s linear infinite;
    transition: background-color 0.3s ease;
  }

  /* Animacja obrotu */
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Zatrzymanie animacji i zastosowanie subtelniejszego efektu przy zmniejszonym ruchu */
  @media (prefers-reduced-motion: reduce) {
    .animated-box {
      animation: none; /* Wyłącz animację obracania */
      /* Można dodać subtelniejszą alternatywę, np. tylko zmianę koloru */
      background-color: lightblue; /* Zmiana na statyczny kolor lub subtelniejszą zmianę */
    }
    /* Alternatywnie, możesz całkowicie usunąć efekt: */
    /* .hover-effect:hover { transform: none; } */
  }

  /* Przykład animacji na hover (interakcja) */
  .hover-effect {
    padding: 10px 20px;
    background-color: green;
    color: white;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
  }

  .hover-effect:hover {
    transform: translateY(-5px); /* Animacja przesunięcia w górę */
  }

  @media (prefers-reduced-motion: reduce) {
    .hover-effect:hover {
      transform: none; /* Wyłącz animację przesunięcia */
      background-color: darkgreen; /* Zastosuj tylko zmianę koloru */
    }
  }
</style>

<div class="animated-box"></div>
<button class="hover-effect">Przycisk z efektem hover</button>
Skopiuj tekst

Przykład prawidłowy: Przełącznik na stronie

Ten przykład demonstruje, jak stworzyć przełącznik, który umożliwia użytkownikowi włączenie lub wyłączenie animacji w interfejsie.

<style>
  .animation-container {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .animated-element {
    width: 50px;
    height: 50px;
    background-color: purple;
    border-radius: 50%;
    transition: transform 0.5s ease-in-out;
  }

  .animation-enabled .animated-element {
    animation: bounce 1s infinite alternate;
  }

  @keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-30px); }
  }
</style>

<div>
  <input type="checkbox" id="toggleAnimations" checked aria-controls="animationDemo">
  <label for="toggleAnimations">Włącz animacje</label>
</div>

<div id="animationDemo" class="animation-container animation-enabled">
  <div class="animated-element"></div>
</div>

<script>
  const toggleAnimations = document.getElementById('toggleAnimations');
  const animationContainer = document.getElementById('animationDemo');

  toggleAnimations.addEventListener('change', function() {
    if (this.checked) {
      animationContainer.classList.add('animation-enabled');
    } else {
      animationContainer.classList.remove('animation-enabled');
    }
  });
</script>
Skopiuj tekst

Przykład nieprawidłowy: Brak opcji wyłączenia animacji

Ten przykład przedstawia sytuację, w której animacja jest wywoływana przez interakcję użytkownika i nie ma możliwości jej wyłączenia, co jest niezgodne z WCAG 2.3.3.

<style>
  .menu-item {
    padding: 10px 15px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    overflow: hidden; /* Ukrywa przepełnienie, jeśli sub-menu wychodzi poza */
  }

  .submenu {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    background-color: #e0e0e0;
    padding-left: 20px;
  }

  .menu-item.active .submenu {
    max-height: 100px; /* Przykład stałej wysokości, powinna być dynamiczna */
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.5s ease-in;
  }
</style>

<div class="menu-item" onclick="this.classList.toggle('active')">
  Otwórz menu (animacja rozwijania)
  <div class="submenu">
    <p>Element 1</p>
    <p>Element 2</p>
  </div>
</div>

<p>W tym przykładzie animacja rozwijania sub-menu po kliknięciu jest obligatoryjna i nie ma możliwości jej wyłączenia, co może być problematyczne dla osób wrażliwych na ruch.</p>
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki

• Priorytet dla prefers-reduced-motion: Zawsze stosuj zapytanie mediów prefers-reduced-motion jako pierwszą linię obrony, ponieważ respektuje ono globalne preferencje użytkownika.
• Umiar w animacjach: Projektuj interfejsy z myślą o minimalizowaniu nadmiernych animacji. Jeśli animacja nie dodaje znaczącej wartości użytkowej, rozważ jej usunięcie lub zastąpienie subtelniejszym efektem.
• Alternatywy dla animacji: Zawsze upewnij się, że kluczowe informacje przekazywane przez animacje mają alternatywne, statyczne lub tekstowe reprezentacje.
• Dostępność kontroli: Jeśli oferujesz przełącznik na stronie, upewnij się, że jest łatwo dostępny i widoczny, najlepiej w sekcji ustawień dostępności.
• Testowanie: Testuj swoje rozwiązania z osobami z różnymi potrzebami, a także symuluj ustawienia prefers-reduced-motion w narzędziach deweloperskich przeglądarki.

Typowe pułapki

• Ignorowanie prefers-reduced-motion: Niezastosowanie się do preferencji użytkownika zdefiniowanych na poziomie systemu operacyjnego.
• Uznawanie animacji za „niezbędne”, gdy takie nie są: Częstym błędem jest zakładanie, że animacja jest kluczowa dla estetyki lub „nowoczesności” interfejsu, podczas gdy w rzeczywistości nie jest niezbędna dla funkcjonalności czy zrozumienia treści.
• Ukrywanie kontroli: Umieszczanie opcji wyłączenia animacji w trudno dostępnym miejscu, np. głęboko w ustawieniach, gdzie użytkownicy mogą jej nie znaleźć.
• Brak testów: Brak sprawdzenia, jak animacje zachowują się w trybie zredukowanego ruchu, co może prowadzić do nieoczekiwanych błędów wizualnych lub funkcjonalnych.
• Nadmierne uproszczenie: Całkowite usunięcie wszystkich przejść i efektów, co może sprawić, że interfejs będzie wydawał się sztywny i trudny do śledzenia (np. nagła zmiana elementów bez żadnego wizualnego wskaźnika). Często lepiej jest zastąpić intensywne animacje subtelniejszymi, szybszymi przejściami.