Цифровая доступность и нарушения вестибулярного аппарата: как моя временная инвалидность изменила мой взгляд на доступность

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

Я никогда не считал себя экспертом в области цифровой доступности, но очень гордился тем, что мои проекты как бы соответствовали рекомендациям, отраженным в руководстве по доступности веб-контента (WCAG). Они успешно проходили большинство автоматизированных тестов, отображались в дереве доступности и неплохо работали с навигацией с помощью клавиатуры. Я время от времени даже пытался использовать программу экранного доступа, хоть и безуспешно.

Но жизнь преподнесла мне урок, который иначе я бы никогда не усвоил. В октябре прошлого года моя здоровая жизнь резко изменилась — я начал испытывать сильное головокружение и постоянное ощущение падения или вращения вправо. Я страдал от тяжелого головокружения (вертиго), вызванного лабиринтитом (прим. 1), из-за которого было невозможно ничего делать.

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

У большинства людей головокружение возникает только один раз в жизни и обычно проходит через неделю или две. Заболеваемость действительно высока: по некоторым оценкам, до 40% населения земли хотя бы раз в жизни переносит головокружение. Некоторые люди живут всю жизнь с этим заболеванием или подобными симптомами, вызванными рядом болезней и синдромов, объединенных под общим термином «вестибулярные нарушения». При этом, 4% взрослых в США жалуются на хронические проблемы с равновесием, а ещё 1,1% — на хроническое головокружение, по данным Американской ассоциации речи, языка и слуха.

В моем случае болезнь продолжалась чуть больше месяца. Вот что я понял из преподанного мне урока.

Наклоны и скосы могут вызвать симптомы вестибулярных нарушений

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

Позже я узнал, что головокружение – это постоянная война между одним внутренним ухом, сообщающим мозгу: «Всё в порядке, мы твёрдо стоим на ногах и не движемся», и другим, кричащим: «О боже! Мы падаем, мы падаем!» Визуальные стимулы могут выступать в качестве посредников, поддерживая сообщение от одного или другого уха. Также существует противоположное проявление головокружения, когда оно мешает вашему зрению.

Я быстро обнаружил, что, когда симптомы усиливаются, взгляд на отдаленный объект несколько облегчает ощущение падения.

Точно таким же образом некоторые визуальные стимулы усиливают это ощущение.

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

Горизонтальные наклоны (независимо от их угла) и более резкие вертикальные не вызывали этих проблем.

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

Размер «мишени» имеет значение (даже на устройствах с поддержкой мыши)

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

Циннаризин блокирует кальциевые каналы. Проще говоря, он не позволяет неисправному «акселерометру» (внутреннему уху) отправлять неверную информацию в мозг.

И чудо свершилось! После десяти дней, в течение которых я едва мог встать с постели, моя жизнь наконец-то стала нормализовываться. Я также постоянно чувствовал головокружение, и в течение дня оно могло стать достаточно сильным, но в основном стало намного легче.

На этом этапе я, наконец, смог пользоваться компьютером, хоть и не мог написать ни единой строки кода. Чтобы извлечь из этого максимум пользы, я поставил перед собой задачу провести эксперимент по доступности для людей с нарушениями вестибулярного аппарата. В первую очередь меня поразило, что я всегда промахивался мимо «мишеней» (ссылок и кнопок).

Я из поколения, выросшего на стационарных компьютерах, поэтому не могу представить свою работу за ним без использования мыши. Для меня курсор — продолжение руки, как и для многих, кто им пользуется. Но хотя циннаризин помогает при головокружении, у него есть распространенный побочный эффект: негативное влияние на координацию и мелкую моторику (во время приема не рекомендуется водить машину и работать с каким-либо оборудованием, например, станками). Я понял, что будет гораздо сложнее заставить указатель мыши делать то, что я намереваюсь.

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

Во WCAG есть Критерий успеха 2.5.5 Размер «мишени» (уровень AAA), который рекомендует увеличить размер «мишеней», чтобы пользователи могли легко их активировать. Несомненная причина этого в том, что указателем сложнее попасть по «мишени» на небольших экранах, на которых курсором невозможно управлять при помощи мыши (например, на сенсорных экранах мобильных устройств). Для разработчиков установка «мишеней» увеличенного размера в окнах просмотра с меньшей шириной является довольно распространенной практикой (при условии, что проблемы возникают только при сенсорном управлении). При этом они игнорируют данную проблему в случае с большими экранами, поскольку ожидают, что люди будут использовать мышь в качестве указателя. Я знаю, потому что сам грешил этим.

Вместо того, чтобы настраивать «мишени» только для небольших экранов, существует множество причин, чтобы делать их большего размера под все экраны. Это будет удобно:

1. Пользователям с ограничениями по зрению (когда текст соответствующе масштабируется, а цвета имеют достаточный контраст).
2. Людям с нарушениями подвижности, такими как, например, тремором рук.
3. Пользователям с трудностями в мелкой моторике.

Интервалы и размер шрифта

Несмотря на «наслаждение» от облегчения симптомов в результате лечения, читать что-либо в течение следующих трех недель всё равно было сложно.

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

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

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

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

1. Высота строки должна быть как минимум в полтора раза больше, чем размер шрифта (line-height: 1.5).
2. Установите интервал между абзацами как минимум в 2 раза больше размера шрифта. Это можно сделать с помощью отступов (margin), используя относительные единицы CSS, такие как em.
3. Интервал между буквами должен быть не менее 0,12 размера шрифта. Это можно настроить посредством CSS-свойства letter-spacing и в относительных единицах измерения.
4. Убедитесь, что текст и его фон достаточно контрастны.
5. Поддерживайте насыщенность шрифта (font-weight) для выбранного семейства (font-family) на разумном уровне. Некоторые шрифты имеют более тонкое начертание, из-за чего их может труднее читать. При использовании тонких шрифтов постарайтесь соответственно улучшить контрастность и его размер, даже в большей степени, чем предлагает WCAG.
6. Выбирайте шрифты, которые легко читать. До сих пор ведутся безрезультатные споры о том, какие стили лучше для пользователей, но одно я могу сказать наверняка: популярные шрифты (с которыми человек, скорей всего, уже знаком), как правило, проще воспринимаются пользователями с трудностями в чтении.

Рекомендации WCAG в отношении текста довольно понятны и, к счастью, их часто соблюдают. Однако даже их бывает недостаточно. Так что лучше следовать специально написанным руководствам по доступному тексту и принимать взвешенное решение. Успешное прохождение автоматизированных тестов не является гарантией цифровой доступности.

Мой пользовательский опыт во время головокружения оказался схожим с опытом людей с дислексией или расстройствами внимания из-за ещё одной проблемы: мне было трудно удерживать внимание на чем-нибудь одном. В этом смысле…

Анимации — плохо, а параллакс — чистое зло

Вэл Хед (Val Head) в своей замечательной статье уже описывала симптомы вестибулярных нарушений, вызываемые визуальными элементами. Поэтому я бы рекомендовал внимательно прочитать статью, если вы ещё этого не сделали.

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

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

На самом деле, нет слов, чтобы описать, насколько плохо я себя чувствовал от простого эффекта параллакса, скролджекинга (прим. 2) или даже привязки фона с помощью background-attachment: fixed. Я бы предпочел прыгнуть на центрифугу с перегрузкой в 20 g (такие используют астронавты), чем смотреть веб-сайт с параллаксом.

Каждый раз, когда я с ним сталкивался, я ставил рядом с собой ведро (надеюсь, понимаете зачем), а потом был вынужден часами лежать в кровати, чувствуя, как комната вращается вокруг меня, и никакие лекарства не могли помочь мне избавиться от этого состояния. Все было НАСТОЛЬКО плохо.

Хотя обычные анимации не вызывали такой острой реакции, они всё равно представляли серьезную проблему. Неимоверные усилия, которые требовалось затратить на прочтение, приводили к тому, что любое движение на экране мгновенно отвлекало мое внимание и заставляло начинать абзац заново. И я имею в виду что угодно.

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

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

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

Так что в любом случае рассмотрите возможность сокращения анимации до минимума. Предоставьте пользователям возможность взаимодействовать с ними (Критерий WCAG 2.3.3 Анимации при взаимодействии), а также приостанавливать, отключать или скрывать их (Критерий WCAG 2.2.2 Пауза, приостановка или скрытие анимаций). Реализуйте эффекты и переходы таким образом, чтобы в случае их отключения, важные элементы веб-сайта по-прежнему отображались.

И будьте особенно осторожны с параллаксом! Я рекомендую, по крайней мере, ограничить его применение, например, использовать его только в шапке сайта (header или hero-блок) и следить за тем, чтобы добиться плавного и реалистичного параллакса. Вот, что сказало бы мое вертиго: «Никогда, слышите, даже и не думайте использовать этот эффект!» Но я полагаю, что эту идею будет сложно продать дизайнерам и всем заинтересованным лицам.

Также изучите, как использовать медиа-запрос prefers-reduced-motion. Это новое дополнение к спецификации медиа-запросов уровня 5, которое позволяет авторам применять выборочные стили, если пользователь попросил минимизировать уровень анимации в системе. Поддерживаются не все браузеры и операционные системы, но настанет день, когда можно будет поместить в запрос любую анимацию (для тех, кому они не нужны), а те, кому это будет необходимо, смогут блокировать эффекты.

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

Режим чтения

В некоторых браузерах есть функция «режим чтения», которая убирает лишние декоративные элементы, отвлекающие эффекты и обеспечивает идеальный (по WCAG) макет текста, который максимально комфортно читать.

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

Признаюсь, что до того, как у меня началось расстройство вестибулярного аппарата, я никогда не пользовался режимом чтения (название отличается в зависимости от браузеров) и не проверял свои проекты на совместимость с ним. Я даже не думал, что это настолько полезная функция. Когда я быстренько решил найти информацию о режиме чтения, оказалось, что на самом деле есть довольно много вопросов от пользователей, которые интересуются, как его отключить или как убрать из адресной строки Firefox кнопку, активирующую его. Похоже, некоторые случайно запускают эту функцию. Возможно, иконка недостаточно понятна или видна.

Отображение кнопки доступа к режиму чтения управляется эвристическими правилами браузера, которые основаны на использовании (или игнорировании) семантических тегов в HTML-коде страницы. К сожалению, это значит, что не на всех веб-сайтах есть такая «роскошь».

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

Пока вертиго продолжалось, режим чтения был чрезвычайно полезен. Но я нашел ещё кое-что получше.

Темные цветовые схемы

На четвертой неделе я начал чувствовать себя, по большей части, хорошо. Чтобы попытаться возобновить работу, я вернулся к написанию кода в Visual Studio Code. Но, как оказалось, полноценно трудиться я ещё не мог. Во время работы в VS Code, было сделано ещё одно открытие, сослужившее мне хорошую службу. Мне было намного легче читать светлый текст на темном фоне.

Данное обстоятельство было весьма удивительно, поскольку для чтения я всегда предпочитал светлую тему с темным текстом на светлом фоне, а для работы с кодом — темную тему со светлым текстом на темном фоне. Тогда я не знал, что страдаю светобоязнью (фотофобией), что являлось одной из причин, по которым мне было трудно читать, используя персональный компьютер и вообще пользоваться мобильными устройствами.

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

В будущем в CSS также появится медиа-запрос для переключения цветовых схем – prefers-color-scheme. В зависимости от настроек, выполненных пользователем, запрос позволяет применять различные стили при работе с темной или светлой темой. Prefers-color-scheme тоже входит в спецификации Media Queries Level 5, но на момент написания статьи эта функция доступна только в Safari Technology Preview, а Mozilla планирует выпустить ее в грядущем обновлении Firefox 67. К счастью, существует плагин PostCSS, благодаря которому Prefers-color-scheme можно использовать в большинстве современных браузеров, поскольку при помощи данного плагина запросы prefers-color-scheme можно переделать в запросы color-index. Они поддерживаются гораздо лучше.

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

Не фокусируйтесь на одном виде инвалидности

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

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

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

1. Нарушения вестибулярного аппарата.
2. Особенности интеллектуального или психологического развития.
3. Дислексия.
4. Дальтонизм.

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

После головокружения я в своей работе стал использовать подход, основанный на принципе accessibility first (цифровая доступность в первую очередь). Теперь, прежде чем удалить хоть одну строку кода, я спрашиваю себя: «Обо всех ли пользователях ты подумал?» Доступность никогда не должна отходить на второй план.

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

Что касается моего рабочего процесса в области разработки, то он стал гораздо более плавным. Хотя решение проблем с доступностью первоначально может стать причиной более медленного запуска проекта, но все равно это будет намного проще и быстрее, чем впоследствии пытаться исправлять проблемы, связанные с ней.

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

Источник: Accessibility for vestibular disorders: How My temporary Disability Changed My Perspective

Об авторе:

Факундо Коррадини — фронтенд-разработчик и специалист по CSS из Мар-дель-Плата, Аргентина. Он каждый день стремится сделать Интернет немного более доступным, независимым от устройств и производительным. Вероятно, сейчас он работает над «просто небольшим исправлением», как и делал последние 15 лет.

Перевёл Владислав Бондаренко

Примечания переводчика:

↑ Лабиринтит — воспалительное поражение структур внутреннего уха, возникающее в результате проникновения в него инфекции или являющееся следствием травмы. Лабиринтит включает в себя вестибулярные нарушения (головокружение, расстройство равновесия и координации) и симптомы поражения органа слуха (шум в ухе, снижение слуха).
↑ Scrolljacking (или scroll hijacking – вторжение в пролистывание) – это очень распространённый приём. Вместо того, чтобы спокойно листать страницу прокручиванием колёсика мыши, вы должны смотреть анимированные переходы и другие приёмы сайта. Чаще всего такие анимации просто расходуют ресурсы устройства и ваше время.