Разработка удобного интерфейса для пользователей с ограниченными возможностями
Советы от дизайнера компании 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. Фокус
Фокус — один из самых важных атрибутов доступного интерфейса. Именно он позволяет пользователям управлять компьютером только при помощи клавиатуры (без подключения мыши). Однако единственная строка в коде страницы стилей может перечеркнуть всю ассистивность продукта.
Это антипаттерн, старайтесь избегать его как чумы. Пользователи, которые работают только с помощью клавиатуры, узнают, с какими элементами на странице они взаимодействуют, благодаря именно фокус-стилям.
Фокусное подчёркивание должно использоваться только для интерактивных компонентов внутри страницы (элементы формы, кнопки и так далее).
Существуют сайты, где заголовки и сам текст выделяются программными средствами. Это делается с благими намерениями, но в таком выделении нет смысла. Пользователи в любом случае прочитают содержимое, и никакая фокусировка для этого не нужна. Однако есть пара исключений, о них мы поговорим чуть позже.
Фокусный контраст
Как показывает опыт, фокусный элемент должен как можно сильнее отличаться от остального фона. Этого можно добиться с помощью цвета.
Внеэкранный контент
Если на странице присутствует внеэкранный контент (в виде «гамбургер-меню», всплывающих окон и так далее), есть риск, что пользователи будут терять фокус, когда он будет направлен на элемент вне рабочей области. Это может дезориентировать пользователя и заставить его потерять свою текущую позицию.
Есть два способа решить эту проблему: скрывать элементы интерфейса, когда меню закрыто (это можно сделать с помощью CSS display: none) или убедиться, что фокус не попадает на меню, когда оно закрывается (это можно сделать, если программировать движения фокуса на JavaScript).
Всплывающие окна
Всплывающие окна — ещё один тип внеэкранных элементов, которые могут навредить доступности вашего интерфейса. Когда пользователь перемещается в границах всплывающего окна, фокус не должен перемещаться на элементы позади него.
Это один из тех редких пользовательских кейсов, когда следует настроить фокус на заголовок всплывающего окна программными средствами, чтобы пользователи не отклонялись от назначенного сценария.
Hover States и фокус
Hover States (состояния наведения) и фокус выполняют разные функции. Многие цифровые продукты скрывают под Hover States какие-то действия. В качестве примера можно привести Facebook.
Плохой пример — это карточки ProductHunt. Они показывают множественные действия, которые становятся видимыми только в состоянии наведения, а оно недоступно для клавиатурных пользователей.
Сценарии смены фокуса
Когда элемент пользовательского интерфейса на странице удаляется при действиях пользователя, важно переместить фокус на другой элемент внутри текущей рабочей области. Пользователь решает удалить какой-то пункт, а фокус исчезает с текущего элемента и передвигается на самый верх страницы. Логичнее было бы после удаления пункта вернуть фокус на этот элемент.
3. Целевые действия
Карточки
Карточки очень популярны в современных цифровых продуктах. Material Design содержит множество руководств и шаблонов для их изготовления. Важно, чтобы эти карточки соответствовали принципу доступности, потому что они могут быстро усложняться при различных манипуляциях.
Карточки, которые используются на странице ProductHunt, — пример плохой доступности. Только представьте, как вы будете просматривать их без использования мыши.
Отличный пример доступных карточек — это Google Inbox.
- Когда вы на них переходите, им присваивается особое фокусное состояние.
- Действие наведения заканчивается в состоянии фокуса.
- Фокусируются только целевые действия, а не все элементы на карточке.
Целевые области
Людям с нарушенной моторикой трудно точно выбирать нужные элементы. Мы как дизайнеры должны позаботиться о том, чтобы целевые области не были слишком узкими.
4. Быстрый доступ к контенту
Пользователи, которые работают только с клавиатуры, тоже хотят как можно быстрее добраться до нужного контента. Но множество пунктов меню или сложная навигация могут сильно затруднить этот путь. Никому не хочется перелистывать тысячу вкладок, чтобы узнать о продукте.
Сайт Airbnb — пример того, как можно обеспечить быстрый доступ к продукту.
5. Обобщение информации
Сложнее всего обеспечить качественный опыт пользователям с проблемами доступа, когда они проходят сценарии из множества шагов:
- Бронирование авиарейса.
- Поиск с фильтрацией по каким-то опциям.
- Добавление элементов на карточку и их проверка.
Важно дать пользователю краткую сжатую информацию перед тем или после того, как он перейдёт к целевому действию.
Это правило применимо к таким компонентам пользовательского интерфейса, как выбор даты, степпер (двухклавишный переключатель значения — vc.ru) или мастер установки. Но не хочется предоставлять эту информацию пользователям, которым она не понадобится.
Подходящим решением могут стать так называемые «призрачные» элементы, которые показываются только при прохождении пользователем сложных компонентов пользовательского интерфейса вроде выбора даты. Эти призрачные элементы содержат краткую информацию для подтверждения, которую экранный помощник может прочитать пользователям вслух.
Такой подход не особенно популярен, так как опытным пользователям, которые быстрее работают с клавиатурой, для перехода на следующий элемент приходится делать двойной клик. В этом случае может пригодиться тумблер доступности.
6. Тумблер доступности
У большинства продуктов есть небольшая, но всё же очень важная аудитория, которой требуется более доступный интерфейс. Тумблер доступности, который переключается между режимом по умолчанию и более ассистивным режимом, обеспечит им удобное взаимодействие с сайтом и не затруднит работу для большинства пользователей.
Режим доступности должен содержать цветную схему, которая обеспечит высокий контраст и простую навигацию между элементами страницы, в том числе когда речь идёт о взаимодействии только через клавиатуру.
Работа над доступностью цифровых продуктов — важнейший этап их разработки. Задумываться о доступности нужно на самых ранних стадиях проектирования, ведь потом будет трудно выделить на это ресурсы и время. При этом на доступность следует проверять все без исключения компоненты дизайна интерфейса.
© vc.ru
