Как не навредить пользователям с эпилепсией и вестибулярными нарушениями

  • Дизайн
  • Анимация
  • CSS
Обновлено:

Доступность помогает людям не только без проблем пользоваться интерфейсами, но и не чувствовать себя буквально плохо. С этим могут столкнуться люди с эпилепсией и вестибулярными нарушениями. В сегодняшнем посте расскажу, что значит доступность для этих пользователей.

Вестибулярные нарушения появляются и исчезают спонтанно. Например, из-за побочных эффектов от лекарств, травм головы и даже жаркой погоды. Такая же ситуация с эпилептическими приступами. Мы более-менее готовы к пользователям со скринридерами, но не можем предсказать от чего человеку станет плохо. Поэтому так важно с самого начала не создавать барьеры.

Сначала поговорим про то, что такое вестибулярные нарушения, эпилептические приступы и эпилепсия.

Вестибулярные нарушения

Многих хоть раз укачивало или было чувство тошноты. Причиной мог быть плохой сон, простуда, поездка на машине или пароме и куча других причин.

Вестибулярные нарушения (Vestibular Disorders) связаны с внутренним ухом и частью головного мозга, которая контролирует баланс и движение наших глаз. Это большая группа нарушений. В неё входят травмы головы, вестибулярная мигрень или мигрень с аурой, опухоли мозга и многое другое. Их объединяют похожие симптомы:

  • головокружение;
  • тошнота;
  • размытое зрение;
  • глазная боль;
  • головные боли;
  • спутанность сознания;
  • проблемы с фокусом и концентрацией внимания.

Недоступные интерфейсы могут спровоцировать любой из симптомов. Факундо Коррадини в статье на A List Apart рассказывал как часами лежал в кровати с сильным головокружением после встреч с параллаксом на сайтах.

В мире живёт много людей с вестибулярными нарушениями. Одних только людей с мигренями около 15 % (статистика на 2023).

Эпилептические приступы и эпилепсия

Эпилептический приступ (Seizure) – повышенная активность одновременно множества нейронов в головном мозге. Она приводит к судорогам, параличу, временному сбою внутренних органов, потере или спутанности сознания, частичной амнезии, вспышкам страха и тревожности.

Приступы могут случаться самостоятельно или быть частью целых заболеваний. Если они часто повторяются, то это считается эпилепсией.

Немного статистики. Примерно у 6.5 % людей в мире эпилепсия (статистика на 2019).

На возникновение приступов влияют не только внутренние, но и внешние факторы. Например, свет или звуки. Приступы, спровоцированные светом, звуками и даже чтением, называются рефлекторными. Когда таких приступов много, у человека рефлекторная эпилепсия (Reflex Epilepsy, RE).

Есть несколько типов рефлекторной эпилепсии, но я сосредоточусь на светочувствительной (Photosensitive Epilepsy, PSE). Её провоцируют интенсивный мерцающий свет или движения. Она встречается у 5 % от всего количества людей с эпилепсией. Чаще всего такие приступы случаются в возрасте от 7 до 19 лет, но могут повторяться и позже.

Контент, который мигает, мерцает и вспыхивает, может привести к эпилептическому приступу, ведь он повышает электрическую активность в нейронах.

Проблемный контент

Кто же может стать виновником эпилептического приступа или другой негативной физической реакции?

  • Медиа вроде видео и гифок;
  • canvas;
  • SVG-, CSS- и JavaScript-анимация. Например, когда рядом с текстом есть подвижные изображения или одновременно скроллятся в разных направлениях передний и задний планы — параллакс-эффекты;
  • анимированная прокрутка, которая длится больше одной четвёртой (1/4) секунды или 15 миллисекунд;
  • графика с контрастными полосами, клетками, спиралями и концентрическими кругами;
  • высокая контрастность элементов или всего интерфейса.

Однажды я сама столкнулась с глазной болью и чувством тошноты из-за сплэшскрина в WebStorm 2021.1, хотя это всего лишь статичная картинка. Спасибо команде JetBrains, которая прислушалась к отзывам и снизила насыщенность изображений.

Больше примеров проблемных интерфейсов найдёте в статье Эйлин Уэбб «Your Interactive Makes Me Sick». Надеюсь, ваш вестибулярный аппарат справится с этим испытанием лучше, чем мой.

Вам даже не нужны видео или изображение, чтобы причинить кому-то вред. Простой <div>, который с помощью JavaScript быстро меняет цвет и яркость, тоже может навредить. И мигание можно встретить где угодно. К примеру, спиннеры, которые появляются во время загрузки страниц, могут вращаться и мигать одновременно.

MDN.

Как позаботиться о пользователях

Людей с эпилепсией и вестибулярными нарушениями опасно привлекать к пользовательскому тестированию. Поэтому остаётся действовать превентивно и учитывать рекомендации, которые дают эксперты.

Что же сделать для того, чтобы не навредить пользователям?

Следите за частотой вспышек. Быстрое появление яркого света называют вспышками. Они могут быть обычными (General Flash) или красными (Red Flash). Вспышки встречаются в видео и анимациях.

Обычная вспышка — это быстрое повышение яркости на 10 % и выше и её последующее снижение до 0.8 % и ниже.

Красная вспышка — пара противоположных переходов, между которыми есть насыщенный красный цвет.

Кроме вспышек есть ещё мигания (Blinks). Мигающий контент переключается между двумя состояниями. Обычно он нужен для привлечения внимания к отдельным элементам.

Частота обычных и красных вспышек, а также миганий должна быть не больше трёх (3) раз в секунду или три (3) герца (Гц). Это минимальное требование по доступности для людей со светочувствительной эпилепсией.

Лучшее решение проблемы со вспышками и миганиями — избегать их. Другой выход из ситуации — «безопасная маленькая область» (Small Safe Area). Это приём, когда вы уменьшаете видео или часть страницы с опасной анимацией. Область должна занимать меньше 10 % центральной части поля зрения или меньше 25 % от размера экрана. Дело в том, что центральная часть глаза состоит из большого количества сенсоров. Они активнее других передают сигналы в зрительную кору и могут перегрузить нейроны.

Уменьшение области вспышек и миганий не лучшее решение, так как пользователь может зайти на сайт с мобильного устройства и поднести его слишком близко к глазам.

Что касается миганий, то, если они длятся недолго и автоматически останавливаются, всё хорошо.

Проверить видео и анимацию можете в бесплатной программе Photosensitive Epilepsy Analysis Tool (PEAT). Правда, она подходит только для некоммерческих целей. Для коммерческих есть платная Harding Test.

Выключите анимацию. Можно отключить анимацию, если она не ключевой функционал. Для этого пригодится медиафича prefers-reduced-motion. Она проверяет выбор настроек «Уменьшить движение» (Reduce Motion) в macOS или «Показывать анимацию» (Show Animations) в Windows. Посмотреть на то, как работает медиафича, можно в демке от W3C.

Железобетонных значений для скорости, плавности и других свойств анимации нет. Так что можно воспользоваться опытом других разработчиков или спросить совета у пользователей.

Вариант один (1): только prefers-reduced-motion. Его предлагает Вал Хед.

@media (prefers-reduced-motion: reduce) {
  *:not(.safe-animation),
  *:not(.safe-animation)::before,
  *:not(.safe-animation)::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

Вариант два (2): совмещаем prefers-reduced-motion и update.

Медиафича update следит за тем, может ли устройство изменить внешний вид контента сайта, как только он отрендерился. Есть три значения: none, slow и fast.

В этом примере использовано значение slow. Оно срабатывает, когда раскладка изменяется в соответствии с обычными CSS-правилами, но устройство не отображает изменения плавно. Например, экраны с электронными чернилами или дешёвые смартфоны.

@media screen and
(prefers-reduced-motion: reduce),
(update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

Вариант три (3), в котором есть всё.

:root {
  --animation-duration: 250ms;
  --transition-duration: 250ms;
}

@media screen and
(prefers-reduced-motion: reduce),
(update: slow) {
  :root {
    --animation-duration: 0.001ms !important;
    --transition-duration: 0.001ms !important;
  }
}

@media screen and
(prefers-reduced-motion: reduce),
(update: slow) {
  * {
    animation-duration: var(--animation-duration);
    animation-iteration-count: 1 !important;
    transition-duration: var(--animation-duration);
  }
}

@media screen and
(prefers-reduced-motion: reduce),
(update: fast) {
  .safe-animation {
    --animation-duration: 6000ms !important;
    animation-name: educational-concept;
    animation-duration: var(--animation-duration);
  }
}

Вариант четыре (4), который подойдёт для браузерного расширения с вашими стилями:

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

Дайте пользователю отключить анимацию. Не все пользователи продвинутые и знают, где находятся настройки анимации. Можно добавить специальную кнопку в меню или на странице, которая включает безопасную анимацию. Так поступили на сайте Animal Crossing.

Дайте людям управлять видео и анимацией. У пользователей должна быть возможность поставить на паузу, остановить или вообще скрыть любой контент, который:

  • автоматически скроллится, двигается и мигает;
  • обновляется больше пяти секунд;
  • отображается параллельно с другим контентом.

Это могут быть параллакс-эффекты, видео, анимация при наведении курсора на кнопку, карусели и так далее.

Когда параллакс-эффект ну очень важен, можно добавить альтернативные стили без анимации и опасных картинок или дайте ссылку на текстовую версию страницы уже без параллакса.

С управлением видео и каруселями хорошо справляются кнопки паузы, остановки или переключения между слайдами.

Автоматическое воспроизведение видео отключается, если удалить autoplay из <video controls>. Звук отключается по умолчанию атрибутом muted.

Для всех элементов с анимацией можете задать animation-play-state: paused. Так анимация ставится на паузу по умолчанию. Кстати, анимацию во время загрузки можете не трогать. Без неё пользователь может решить, что загрузка на паузе или отменена. Это же касается рекламы, так как периодически она необходимая часть функционала для доступа к контенту. Привет, YouTube.

Альтернативно можете задать короткую продолжительность анимации через animation-duration и transition-duration вместо animation: none или transition: none.

Утихомирьте гифки. Больше всего неприятностей доставляют гифки. Пользователи не могут управлять их скоростью или отключать.

Лучше всего заменить гифки на видео или на SVG-анимацию. Если ну никак не отказаться от гифок, добавьте для них элементы управления с помощью скриптов. Например, gifplayer на jQuery. Можно вообще вынести гифку в отдельный веб-компонент <x-gif>.

Другое решение с гифкой — оставить пользователям на выбор видео, .gif или картинку для режима отключенной анимации.

<picture>
  <!-- Видео -->
  <source
    srcset="animation.mp4"
    type="video/mp4"
    media="(prefers-reduced-motion: no-preference)"
  >
  <!-- Гифка -->
  <source
    srcset="animation.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  >
  <img src="pic.png" alt="Текстовое описание">
</picture>

Анимируйте текст с умом. Анимированный текст тоже не самая безобидная часть интерфейса. Пока нет стандартных возможностей настроить его анимацию. Если он сильно смещается в сторону, ощутимо увеличивается или уменьшается, то это тоже может вызвать приступ или головокружение. Так что лучше либо совсем отказаться от этой идеи, либо изменять контент незначительно и плавно.

Не выжигайте пользователям глаза. Высокая контрастность не всегда хорошо, особенно если это анимация. Хорошо, когда контрастность не слишком высокая и не слишком низкая или есть настройки цветовых тем на самом сайте.

Проверяйте картинки. Следуйте паре простых рекомендаций о паттернах и картинках. Если графика состоит из прямых контрастных линий, то лучше остановиться на восьми (8). Если это волны, размещайте рядом не больше пяти (5).

Предупреждайте о рисках. Разместите предупреждение об опасном контенте, если сомневаетесь и не можете больше ничего сделать. Так часто поступают с видео и играми.

На что ссылаться во WCAG 2.2

Критерии доступности для людей с эпилептическими приступами и вестибулярными особенностями собраны в двух руководствах:

Сделать интерфейс безопасным важно и не так сложно. Когда на сайт заходят люди с эпилепсией или мигренями, речь идёт не только о возможности прочитать текст. Недоступный интерфейс может ухудшить их самочувствие и даже стать угрозой для жизни.

Полезные ссылки

Другие статьи