{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 2, "likes": 9, "favorites": 6, "is_advertisement": false, "section_name": "default", "id": "26498", "is_wide": "" }
Редакция vc.ru
1 021

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

Советы от дизайнера компании 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.

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

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

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

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

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

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

Карточки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#Интерфейсы

{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } } ]