Деякі типи контенту можуть викликати фотосенситивні судоми, запаморочення, нудоту, а анімації та блимання можуть відволікати. Це особливо критично для людей з епілепсією, мігренню, вестибулярними розладами та СДУГ.
1. Чому слід уникати мерехтливого та блимального контенту?
WCAG 2.3 (Судоми та фізичні реакції) вимагає, щоб контент не:
- Бликав або мерехтів більше ніж три рази на секунду
- Закривав велику частину екрану
- Мав високу контрастність, особливо червоні спалахи
Приклади небезпечного контенту:
- Мерехтливі GIF-файли
- Відео з швидкими спалахами
- Блимаючі банери або рекламні оголошення
2. Як перевірити, чи є ваш контент безпечним?
Використовуйте Photosensitive Epilepsy Analysis Tool (PEAT), щоб перевірити, чи може анімація або відео спричинити судоми.
Інші кроки для забезпечення безпеки:
- Зменшити частоту анімацій
- Використовувати CSS-медіазапит prefers-reduced-motion
- Додати кнопку паузи для анімацій
3. Як правильно впроваджувати анімації на сайті?
Чого слід уникати?
- Автовідтворення анімації довше ніж п’ять секунд
- Швидко рухомих елементів без можливості паузи
- Великого мерехтливого контенту
Найкращі практики:
- Додавати кнопку паузи для відео та анімацій
- Використовувати CSS-медіазапит prefers-reduced-motion
- Обмежувати рухомий контент лише необхідними анімаціями
Приклад коду (підтримка prefers-reduced-motion):
1@media (prefers-reduced-motion: reduce) {
2 .animated {
3 animation: none;
4 }
5}4. Часті запитання (FAQ)
Чи можна використовувати анімації на сайті?
Так, але вони повинні:
- Не блимати більше ніж три рази на секунду
- Мати можливість зупинки або паузи
- Бути повільними та не надто яскравими
Чи є безпечні способи використання GIF?
Так, можна:
- Використовувати повільні анімації
- Робити плавні переходи замість різких змін
- Зменшувати контрастність анімації
Як браузери допомагають користувачам з чутливістю до руху?
Багато браузерів підтримують налаштування "Зменшення руху":
- На macOS: Системні налаштування → Спеціальні можливості → Дисплей → Зменшення руху
- У Windows: Налаштування → Спеціальні можливості → Дисплей → Показувати анімацію в Windows (Вимкнено)
Основні висновки
- Уникати мерехтливого контенту, що блимає більше трьох разів на секунду
- Додавати опцію паузи для анімацій
- Використовувати prefers-reduced-motion для адаптації контенту
- Перевіряти свій контент за допомогою PEAT Tool для забезпечення доступності
Корисні ресурси
- PEAT Tool (перевірка контенту на небезпечне мерехтіння): https://trace.umd.edu/peat/
- WCAG 2.3 (Судоми та фізичні реакції): https://www.w3.org/WAI/WCAG21/Understanding/seizures-and-physical-reactions.html
Розповсюдження цієї інформації допоможе зробити вебсайти безпечнішими та доступнішими для всіх.