Эпилепсия и опасный контент
Мозг людей с эпилепсией похож на электрическую цепь с перегрузкой. Резкие вспышки света или мигание (3+ раз в секунду) вызывают «короткое замыкание» — приступ. Дизайн с такими эффектами становится буквально опасным».
Эпилепсия — это неврологическое заболевание, при котором определенные визуальные стимулы могут вызывать приступы. Одним из таких триггеров является мигание или мерцание, особенно с частотой от 3 до 50 Гц. Для дизайнеров интерфейсов это означает, что анимации, баннеры и другие динамические элементы должны быть тщательно продуманы, чтобы не навредить пользователям.
В этой статье мы разберем, как создавать безопасные и инклюзивные интерфейсы, учитывая потребности людей с эпилепсией.
Почему это важно?
— Статистика: Около 1% людей в мире страдают эпилепсией, и у 3–5% из них светочувствительная форма заболевания. — Юридические риски: Несоблюдение стандартов доступности может привести к судебным искам. — Этика: Дизайн должен быть безопасным для всех пользователей, независимо от их состояния здоровья.
Известные случаи, связанные с эпилепсией
Эпизод Pokémon «Dennō Senshi Porygon» (1997)
В этом эпизоде анимация с интенсивным мерцанием (красные и синие вспышки) вызвала приступы у более чем 700 детей в Японии. https://en.wikipedia.org/wiki/Denn%C5%8D_Senshi_Porygon
Стробоскопические эффекты в играх
Игры, такие как Call of Duty или Fortnite, Cyberpunk 2077, получили критику за использование стробоскопических эффектов. Разработчики были вынуждены добавить предупреждения и опции отключения таких эффектов.
Мигающие баннеры на сайтах:
Некоторые сайты используют рекламные баннеры, быстрое чередование ярких цветов (например, белый и красный) с частотой более 3 Гц.
Например: рекламные баннеры на сайтах, которые мигают каждые 0,2 секунды.
Анимации в интерфейсах:
Бесконечные циклы анимаций с резкими переходами (например, мигающие кнопки «Купить сейчас»).
Например: лоадеры, которые быстро меняют цвета или формы.
Основные правила безопасности дизайна
Анимации и мигание
Частота вспышек ≤3 Гц
Как проверить: Если анимация включает мигание, подсчитайте количество вспышек в секунду. Например, 5 вспышек за 2 секунды = 2.5 Гц (безопасно).
Опасный пример: 10 резких переключений цвета за 2 секунды = 5 Гц
Плавные переходы вместо резких изменений
Используйте эффекты fade, opacity, мягкое масштабирование вместо мгновенных переключений.
Figma: В Prototype задайте анимацию с duration: 500ms и easing: ease-in-out.
Цвета и контраст
Избегайте опасных комбинаций:
Красный (#FF0000) + синий (#0000FF),
Черный + белый с частой сменой (например, стробоскоп).
Безопасные альтернативы:
Приглушенные палитры (например, #E63946 вместо #FF0000).
Градиенты для фонов вместо резких переходов.
Длительность и контроль анимации
Автовоспроизведение ≤5 секунд (по WCAG 2.2.3).
Ограничение повторов: Не более 3 циклов без действия пользователя.
Предупреждения
-Текст: «Внимание: анимированный контент» (размещать перед баннером).
-Иконки: Использовать ⚠ с alt-текстом «Возможна светочувствительность».
В заключение, приглашаю вас заглянуть в мой гайд в комьюнити, где вы найдете полезную нормативную документацию, а также плагины и программы для проверки анимаций. Кроме того, в гайде представлены примеры как опасных, так и безопасных анимаций.
Давайте вместе сделаем наши интерфейсы более доступными и комфортными для всех пользователей!
