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

  • Юзабилити
  • Дизайн
  • Анимация
  • CSS
Опубликовано:

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

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

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

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

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

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

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

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

Таких пользователей действительно много. Одних только людей с хроническими мигренями в мире живёт около 15 %.

Эпилепсия и приступы

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

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

Немного статистики. Примерно у 8–10 % людей в мире происходил минимум один эпилептический приступ. У 3 % они привели к эпилепсии.

На возникновение приступов могут влиять не только внутренние, но и внешние факторы. Например, свет или звуки.

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

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

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

Какие бывают угрозы

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

  • Видео.
  • Гифки.
  • Canvas.
  • SVG-, CSS- и JS-анимация. Например, когда рядом с текстом есть подвижные изображения или одновременно скроллятся в разных направлениях передний и задний планы — параллакс-эффекты.
  • Анимированная прокрутка, которая длится больше 1/4 секунды.
  • Графика с контрастными полосами, клетками, спиралями и концентрическими кругами.
  • Высокая контрастность.

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

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

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

MDN.

Советы и рекомендации

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

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

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

Обычная вспышка (General flash) — это пара противоположных состояний относительной яркости, когда она изменяется на 10 % или больше. При этом относительная яркость тёмного изображения меньше 0,8. А красная (Red flash) — пара противоположных переходов, между которыми есть насыщенный красный цвет.

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

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

Это не самое надёжное решение. Пользователь может зайти на сайт с мобильного устройства и поднести его слишком близко к глазам.

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

Следите за контрастностью анимации и не делайте её слишком высокой.

Можно отключить анимацию, если она не ключевой функционал. Для этого пригодится медиафича prefers-reduced-motion.

Она проверяет выбор настроек «Уменьшить движение» (Reduce Motion) в macOS или «Показывать анимацию» (Show animations) в Windows. Сейчас её глобальная поддержка 91.75 %. Пример того, как это работает, есть в демке 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:

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

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

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

Вариант 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) {
    .c-educational-concept {
        --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.

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

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

Например, параллакс-эффекты или карусели. Обычно с этим справляются кнопки паузы и остановки.

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

Для всех элементов с анимацией можно задать animation-play-state: paused;. Тогда она будет поставлена на паузу по умолчанию.

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

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

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

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

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

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

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

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

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

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

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

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

Другие посты