Разработка удобного интерфейса для пользователей с ограниченными возможностями

Советы от дизайнера компании OpenDNS.

Что такое доступность и почему она так важна

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

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

Разработка удобного интерфейса для пользователей с ограниченными возможностями

Мы изучили статистику и обнаружили, что 56,7 млн американцев, 18,7% населения страны, живут с одной из форм инвалидности. 38,3 миллиона американцев (12,6% населения) имеют тяжёлую степень инвалидности. Это данные 2012 года, только для одной страны. Если подняться до мирового масштаба, показатели достигнут тревожных значений, и это уже не будет проблемой «меньшинства пользовательской базы».

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

Срезанный пандус
Срезанный пандус

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

«Нажмите, чтобы открыть дверь»
«Нажмите, чтобы открыть дверь»

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

Раздел 508 федерального закона США об инвалидах предписывает государственным агентствам создавать специальные цифровые приложения для людей с ограниченными возможностями.

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

Они рассматривают доступность своих продуктов не как навязанное и формальное обязательство, но как инструмент заботы о тех людях, которых общество так долго игнорировало.

Современные ассистивные технологии

Прежде чем вникать в закономерности, преимущества и недостатки, посмотрим, как работают в веб-пространстве ассистивные технологии (технологии, которые обеспечивают жизнь и социальную адаптацию людей с ограниченными возможностями — vc.ru). Например, macOS вышла с функцией озвучивания Voice Over, а пользователи Windows могут использовать специальную программу для слабовидящих NVDA (NonVisual Desktop Access).

​Настоятельно рекомендуется тестировать сайт: уменьшить яркость экрана и внедрить ассистивные технологии вроде Voice Over или NVDA. Это поможет дизайнерам понять, что чувствуют пользователи с ограниченными возможностями, когда используют компьютер.

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

Атрибуты значения, роли и имени отображаются в нижней части экрана
Атрибуты значения, роли и имени отображаются в нижней части экрана

Рекомендации по разработке ассистивного интерфейса

1. Цветовой контраст

Первый шаг к ассистивному пользовательскому интерфейсу — это создание правильного цветового контраста.

Рекомендуемый контраст для веб-приложений
Рекомендуемый контраст для веб-приложений

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

Инструменты для оценки цветового контраста

Если вы только начинаете свой проект и хотите проверить, какие цвета обеспечивают доступность интерфейса, вам пригодится инструмент Color Safe.

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

Как быстро определить области с недостаточным контрастом

Проверка контраста даже с помощью WebAim — довольно сложная задача. Если же нужно быстро представить возможные проблемы в дизайне, в браузере Chrome есть удобный инструмент Color Contrast Analyzer, разработанный специалистами из Университета Северной Каролины.

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

Color Contrast Analyzer позволяет быстро определить проблемные области. Участки экрана с хорошим контрастом выделены белыми линиями, а области с плохим контрастом обозначены бледными, малозаметными границами.

2. Фокус

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

Разработка удобного интерфейса для пользователей с ограниченными возможностями

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

Фокусное подчёркивание должно использоваться только для интерактивных компонентов внутри страницы (элементы формы, кнопки и так далее).​

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

Фокусный контраст

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

<b>

Слева:</b> фокусный элемент плохо контрастирует с фоном, из-за этого пользователю трудно на нём сосредоточиться. <b>Справа:</b> контраст достаточно яркий, фокусный элемент явно выделяется на общем фоне
Слева: фокусный элемент плохо контрастирует с фоном, из-за этого пользователю трудно на нём сосредоточиться. Справа: контраст достаточно яркий, фокусный элемент явно выделяется на общем фоне

Внеэкранный контент

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

<b>

Слева:</b> вот что видят пользователи, когда листают внеэкранные элементы. <b>Справа:</b> реальное положение фокуса. Когда меню закрыто, движение фокуса дезориентирует пользователя
Слева: вот что видят пользователи, когда листают внеэкранные элементы. Справа: реальное положение фокуса. Когда меню закрыто, движение фокуса дезориентирует пользователя

Есть два способа решить эту проблему: скрывать элементы интерфейса, когда меню закрыто (это можно сделать с помощью CSS display: none) или убедиться, что фокус не попадает на меню, когда оно закрывается (это можно сделать, если программировать движения фокуса на JavaScript).

Всплывающие окна

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

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

Разработка удобного интерфейса для пользователей с ограниченными возможностями

Hover States и фокус

<b>

Слева:</b> после нескольких кликов фокус смещается за пределы всплывающего окна, и пользователь перестаёт контролировать свои действия.<b> Справа:</b> фокус устанавливается на одну из двух доступных опций до тех пор, пока пользователь не закроет это всплывающее окно
Слева: после нескольких кликов фокус смещается за пределы всплывающего окна, и пользователь перестаёт контролировать свои действия. Справа: фокус устанавливается на одну из двух доступных опций до тех пор, пока пользователь не закроет это всплывающее окно

Hover States (состояния наведения) и фокус выполняют разные функции. Многие цифровые продукты скрывают под Hover States какие-то действия. В качестве примера можно привести Facebook.

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

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

В ProductHunt выделенные рамкой действия, напротив, показываются только при наведении. Эти действия не доступны для фокуса, поэтому их не могут осуществлять пользователи, которые работают на клавиатуре
В ProductHunt выделенные рамкой действия, напротив, показываются только при наведении. Эти действия не доступны для фокуса, поэтому их не могут осуществлять пользователи, которые работают на клавиатуре
<b>Слева:</b> в состояниях наведения фокус перемещается на следующий элемент фокуса. <b>Справа:</b> наличие фокуса позволяет совершать действия, которые скрыты в состоянии наведения
Слева: в состояниях наведения фокус перемещается на следующий элемент фокуса. Справа: наличие фокуса позволяет совершать действия, которые скрыты в состоянии наведения

Сценарии смены фокуса

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

<b>Слева:</b> после удаления элемента списка фокус теряется. Пользователю приходится повторять весь путь, чтобы его найти. <b>Справа:</b> фокус сдвигается на следующий элемент списка и позволяет пользователю действовать более последовательно
Слева: после удаления элемента списка фокус теряется. Пользователю приходится повторять весь путь, чтобы его найти. Справа: фокус сдвигается на следующий элемент списка и позволяет пользователю действовать более последовательно

3. Целевые действия

Карточки

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

Карточки, которые используются на странице ProductHunt, — пример плохой доступности. Только представьте, как вы будете просматривать их без использования мыши.

Затрудняетесь определить карточку, на которой стоит фокус? Если присмотреться, можно определить, что это вторая карточка. Но это трудно сделать даже людям со здоровым зрением
Затрудняетесь определить карточку, на которой стоит фокус? Если присмотреться, можно определить, что это вторая карточка. Но это трудно сделать даже людям со здоровым зрением

Отличный пример доступных карточек — это Google Inbox.

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

Целевые области

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

<b>

Слева:</b> слишком узкая (и поэтому труднокликабельная) целевая область. <b>Справа:</b> более доступная для нажатия область
Слева: слишком узкая (и поэтому труднокликабельная) целевая область. Справа: более доступная для нажатия область

4. Быстрый доступ к контенту

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

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

Сайт Airbnb — пример того, как можно обеспечить быстрый доступ к продукту.

Разработка удобного интерфейса для пользователей с ограниченными возможностями

5. Обобщение информации

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

  • Бронирование авиарейса.
  • Поиск с фильтрацией по каким-то опциям.
  • Добавление элементов на карточку и их проверка.​

Важно дать пользователю краткую сжатую информацию перед тем или после того, как он перейдёт к целевому действию.​

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

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

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

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

6. Тумблер доступности

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

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

Разработка удобного интерфейса для пользователей с ограниченными возможностями

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

44
2 комментария

Попробовал найти подсветку фокуса непосредственно тут. Не вышло ;D

Ответить

Кнопка "назад", не нажимается у вас в приложении на платформе iOS

Ответить