Как сделать доступным контент
Accessibility. Как сделать приложение доступным для пользователей с ограниченными возможностями
Обо мне
Меня зовут Аня Ковтун, я UX/UI дизайнер и работаю в компании Arcadia с 2015 года. Помимо проектирования пользовательских интерфейсов, я общаюсь с заказчиками и занимаюсь составлением требований для команды разработчиков.
Предыстория
В 2018 году я работала над одним масштабным проектом по автоматизации управления ресурсами для европейского рынка. Со стороны заказчика поступил запрос на внедрение accessibility при разработке следующих версий. На тот момент для меня этот термин (в контексте IT) был незнакомым, и после нескольких часов в гугле в моем блокноте появилось много судорожно выписанных вопросов:
Что такое accessibility? А как пользователи с ограниченными возможностями взаимодействуют с вебом? Пользуются специальными приложениями? Или могут воспринимать тот же контент, что и мы? Кто заботится о них? Кто является ответственным за то, чтобы они могли полноценно воспринимать контент? Как можно сделать контент доступным? Это сложно? Можем ли мы помочь?
Уже через пару месяцев я знала ответы на все эти вопросы и сейчас поделюсь этой информацией с вами. Меня удивляет: как получилось, что я так долго оставалась в неведении. Хочется сделать эту тему более популярной, чтобы таких, как я, было как можно меньше…
Я уверена, что каждая IT-компания может легко применять принципы accessibility при разработке приложений и делать их доступными для всех пользователей.
Что такое web accessibility?
Фактически термин accessibility является подмножеством более общего и общеизвестного термина usability.
Usability — эффективность и удовлетворенность, с которыми пользователь достигает поставленных целей.
Accessibility (доступность) — равноценный доступ к контенту у всех пользователей, в том числе с какими-либо нарушениями.
Таким образом, увеличивая доступность продукта, мы в том числе повышаем его usability. Достижение 100% доступности означает возможность использования полного функционала продукта абсолютно любыми пользователями (в том числе с ограниченными возможностями). Важно понимать, что «ограниченные возможности» при использовании приложений могут возникать как при хронических нарушениях здоровья (по данным статистики ООН, у
15% мирового населения присутствует какая-либо форма ограничений), так и при временных жизненных обстоятельствах.
Поговорим об ограничениях подробнее.
Об «ограниченных возможностях»
Основные типы хронических нарушений здоровья:
Зрение.
Полная/частичная слепота/дальтонизм.
Слух.
Полная/частичная глухота.
Опорно-двигательный аппарат.
Различные виды параличей/тремор/отсутствие конечностей.
Ментальное развитие.
Нарушения, связанные с восприятием информации/запоминанием.
Помимо постоянных нарушений здоровья, препятствия при использовании приложений могут быть временными и ситуационными. Рассмотрим примеры препятствий, когда человек может пользоваться продуктом только с помощью одной руки:
Даже такие факторы, как плохой интернет, демонстрация экрана по проектору с низкой контрастностью или потерянная мышка (а значит, взаимодействие с интерфейсом с помощью клавиатуры) являются ситуационными препятствиями при использовании приложений, и одна из важных задач IT-специалистов состоит в нивелировании их влияния на работу пользователей.
Ну и конечно, со временем каждый из нас столкнется с некоторыми ограничениями — с возрастом моторные реакции, зрение и слух ослабевают, а уровень автоматизации и функциональности приложений растет. Так что, делая интерфейсы доступными сейчас, мы в том числе заботимся о себе в будущем.
Наверное, для пользователей с ограниченными возможностями есть специальные приложения и сервисы?
Нет. Чаще всего они пользуются теми же приложениями — правда, это возможно, только если приложения для этого адаптированы. Одна из важных составляющих адаптивности — совместимость со вспомогательными технологиями, о которых мы подробнее поговорим чуть позже.
Как люди с ограниченными возможностями пользуются привычными и простыми для нас приложениями, эффектно продемонстрировал Apple:
Кто и зачем должен внедрять accessibility?
Специального человека, который внедрит доступность в ваш продукт, не существует. Для этого необходима вовлеченность всей команды:
Основные мотивации внедрения accessibility:
Как внедрять accessibility?
Спойлер: достаточно следовать существующим стандартам!
Большую часть работы уже сделали за нас. Существуют стандарты с гайдлайнами, следуя которым можно сделать любой контент доступным:
В этой статье мы сфокусируемся на WCAG (Section 508 и WCAG очень похожи и во многом пересекаются, про отличия можно почитать здесь). WCAG состоит из 4 основных принципов:
Каждый принцип включает в себя набор гайдлайнов, разделенных по уровням соответствия на:
A — минимальная доступность
AA — рекомендательный уровень
AAA — максимальный уровень доступности, покрывающий специфические случаи
Таким образом, для внедрения accessibility вашей команде необходимо изучить стандарты с гайдлайнами, выбрать подходящий уровень доступности и учитывать данные требования в процессе разработки.
Ниже я приведу наглядные примеры применения и игнорирования основных гайдлайнов и подробнее расскажу о работе вспомогательных технологий.
Основные гайдлайны (A/АА) и вспомогательные технологии
Вспомогательные технологии выступают «мостиком» между людьми с ограниченными возможностями и контентом, поэтому часть гайдлайнов посвящена совместимости приложений с этими мостиками. Основные типы вспомогательных технологий:
Итак, перейдем к основным гайдлайнам:
Доступ с клавиатуры
Гайдлайн, актуальный для пользователей с нарушением зрения и/или нарушениями опорно-двигательного аппарата. Такие пользователи не имеют возможности использовать мышку при работе за компьютерами, вместо нее используется клавиатура. Например, навигация по контенту в основном осуществляется клавишей Tab.
Для данных пользователей ключевую роль играют следующие 4 правила:
Весь контент должен быть доступен с клавиатуры. Если правило не выполняется, пользователь физически не сможет добраться до поля «Контакты» на вашем сайте или закончить оформление заказа.
Недопустимость ловушек: если доступ с клавиатуры не протестирован, могут возникать замкнутые круги — при нажатии на Tab пользователь застревает между ограниченным набором информационных блоков или элементов, не имея возможности продвинуться вперед или вернуться назад.
Фокус на текущем блоке: пользователи с нарушением опорно-двигательного аппарата и с ограниченным зрением должны понимать, на каком элементе они находятся прямо сейчас.
Последовательность информации: при работе с контентом с клавиатуры пользователь должен получать информацию в логичной и понятной для него последовательности.
Например, компания Booking специально ввела на своем сайте кнопку «Перейти к основному содержанию» для пользователей, работающих с клавиатуры. Это позволяет быстро и эффективно получать результат на запрос, не прибегая к табуляции через все уровни навигации и дополнительные информационные блоки.
Более радикально поступил Facebook: при первом нажатии на Tab или комбинации клавиш Alt+/ открывается специальное меню с 3 выпадающими списками (правда на данный момент эта функциональность недоступна в новой тестовой версии интерфейса). Они помогают быстро перемещаться внутри конкретной страницы, переходить на другие разделы и так же быстро обратиться в поддержку с отзывом или вопросом. Упрощенное меню дает пользователям возможность эффективно взаимодействовать с достаточно обширным функционалом социальной сети. 
Названия элементов
При использовании скрин-ридера в комбинации с клавиатурным доступом, устройство оповещает пользователя об элементах, с которыми он взаимодействует. Пользователям с ограничениями критически важно понимать, на каком элементе экрана (тексте, кнопке, картинке, видеозаписи) он находится прямо сейчас и какие действия он может совершить. Для обеспечения доступности важно указывать четкие и понятные названия для всех элементов контента.
Показательным примером является история из Израиля, где в рамках конференции программисты крупных компаний и пользователи с ограниченными возможностями обсуждали существующие проблемы использования контента. Так, приложение GetTaxi в 2015 году оказалось абсолютно недоступным для незрячих пользователей — при открытии приложения появлялся маркетинговый баннер без присвоенного названия. Несмотря на соответствие стандартам контента внутри приложения, незрячие пользователи не имели возможности вызвать такси, так как не слышали обратной связи от приложения.
С проблемами цветовосприятия сталкивается существенная часть населения Земли: так, от 7 до 10% мужчин страдают нарушениями в области красного и зеленого спектров. (FAQ от медузы про дальтонизм).
Тем не менее, следуя простым правилам, мы можем сделать контент доступным вне зависимости от возможных нарушений цветовосприятия.
Первое правило — нельзя преподносить важную информацию исключительно с помощью цвета, следует использовать дополнительные маркеры. Например, на этой картинке проще и быстрее (не только для пользователей с нарушениями) считать информацию со второго пайчарта, где информацию несет не только цвет:
*данные выдуманы (хотя, надеюсь, мало кто поверит, что 50% опрошенных любят гавайскую пиццу)
Другой пример — трекер задач Trello: если пользователь сообщает о дальтонизме, к цветным тегам добавляется текстура. Согласитесь, это сильно облегчает восприятие, если вы не различаете красный и зеленый цвета.
Второе правило касается контрастности изображений. На картинке показана визуализация матча американской футбольной лиги глазами дальтоника. 
Тут уже ни текстура, ни дополнительный текст ситуацию не спасут. Гайдлайны WCAG позволяют избежать подобных недоразумений: используя минимальное рекомендованное соотношение контрастности между соседствующими на экране цветами, мы сможем помочь пользователям с дальтонизмом эффективно взаимодействовать с контентом.
Кстати, посмотреть, как контент выглядит глазами человека с дальтонизмом, можно здесь.
А проверить контрастные сочетания цветов WCAG здесь.
Вспышки
Даже незначительная вспышка в уголке экрана может сделать весь контент страницы недоступным для восприимчивого пользователя. Следует избегать любых мерцаний, вспышек и миганий. В первую очередь, это касается красного спектра.
Сложная знаковая система, естественно или искусственно созданная и соотносящая понятийное содержание и типовое звучание (написание)
Как вы думаете, что за термин кроется за столь длинным заголовком?
Вы удивитесь, но это формальное определение простого слова «язык». Информационный текст в вашем продукте должен быть коротким, понятным и содержательным (Пиши, сокращай!). Доступность изложения материала значительно облегчает восприятия контента пользователями.
В США существует движение Plain Language, которое занимается тестированием лаконичности и содержательности текстов. Разработанные метрики позволяют производить оценку сложности восприятия для пользователей.
Тестирование существующих и новых продуктов
Используя вспомогательные технологии и следуя стандартам, можно создавать новые продукты с хорошим уровнем доступности. Для этого не нужны значительные финансовые вложения, а дополнительное время на разработку ограничится выбором конкретного уровня доступности и ознакомлением с гайдлайнами.
Но что делать, если продукт давно выпущен или находится в процессе разработки, а об accessibility вы узнали только сейчас? Я призываю IT-команды держать в голове 2 простых правила:
Как тестировать
Попробуйте (в идеале с закрытыми глазами) воспринимать контент приложения или сайта без помощи мышки, ориентируясь только на слух. Узнаете много нового про ваш продукт!
Для десктопа бесплатный и один из самых распространенных:
NVDA
Для мобильных устройств даже скачивать ничего не нужно, существуют встроенные скрин-ридеры. А вместо клавиатурного доступа в мобильных версиях используют специальный набор жестов (свайпы и тапы).
Voice Over
Talkback
При тестировании остальных гайдлайнов помогают расширения для браузеров. В Google Chrome есть встроенный аудит:
Lighthouse (Google Chrome)
В accessibility репорт включены ошибки, которые были найдены с помощью алгоритма, а также указаны гайдлайны, которые необходимо проверить вручную (например, понятные тексты).
В Firefox можно воспользоваться панелью разработчика для базового теста, ну или скачать дополнение для полноценного отчета:
Wave
Отчет о доступности в мобильном приложении можно получить в
a11y Tools (правда, приложение платное)
P.S Логотип этого приложения — общепринятая иконка accessibility, а a11y — аббревиатура. Догадываетесь, почему аббревиатура именно такая?
В слове AccessibilitY между A и Y 11 букв.
Получив отчет о доступности, важно понимать, что автоматическое тестирование необходимо комбинировать с мануальным. В идеале можно привлечь людей с ограниченными возможностями для помощи в тестировании. Существуют сообщества с инициативными людьми, которые будут очень рады помочь вам — например, библиотека для слепых в Санкт-Петербурге.
Заключение
Главное — помнить, что accessibility — это не про людей с ограниченными возможностями, а про каждого из нас.
Уделив внимание простым правилам при разработке продукта, IT-сообщество может помочь огромному количеству пользователей, предоставив им равноценный доступ к функционалу современных приложений и сервисов.
Какой контент продавать, а какой давать бесплатно.
Как не спамить и выполнять КPI. Какие инструменты маркетинга лучше, а какие хуже. Как отправлять красивые и понятные письма.
С одной стороны, бесплатный контент приносит отличные результаты: чеклисты и письма, видео и PDF-книги могут привлекать посетителей лучше, чем скидки и подарки. С другой, контенту нужны время и ресурсы. Маркетинговый бюджет уходит на написание статей, съемку видеороликов, продвижение в соцсетях.
Должен ли весь контент быть бесплатным? За какой контент можно просить деньги? Популярный ресурс для интернет-маркетологов Copyblogger рассказал о платном и бесплатном контенте. Делимся переводом.
10 причин делиться контентом бесплатно
Какую цель преследует бесплатный контент? Что мы получаем, раздавая его просто так?
Причина 1. Привлекает аудиторию
Мы хотим привлечь максимум потенциальных клиентов. Чтобы как можно больше людей заходило к нам в блог, подписывалось на рассылку, добавлялось в соцсети и становилось клиентами. Если контент прятать, достичь этой цели будет сложнее. Чем больше контента в свободном доступе, тем больше шансов вас увидеть.
Вывод: нужно «сеять» бесплатный контент.
Причина 2. Приводит друзей
Мы хотим, чтобы клиенты приводили друзей. Рекомендовать компанию и рассказывать о ней легко, когда вы производите полезный контент и выкладываете его в открытый доступ.
Вывод: больше открытого контента — больше рекомендаций.
Причина 3. Находит единомышленников
Ведь вам нужны не только потенциальные клиенты. Делясь своими идеями, опытом и знаниями в интернете, вы можете наладить деловые контакты.
Вывод: общайтесь с теми, кому интересен ваш контент, и кто создает похожий.
Причина 4. Раскрывает вашу ценность
Какую проблему клиентов вы решаете? В чем вы помогаете им? Сложно заставить человека платить, если он не понимает, что вы можете сделать для него. Люди ищут ответ на вопросы в поисковиках. Пусть они находят ваши ответы на свои вопросы.
Вывод: создавайте ценный контент и делитесь им.
Причина 5. Выделяет вас на фоне конкурентов
Ваш бесплатный контент не только обучает и помогает решить проблемы. В глазах потребителя он формирует эксперта, который владеет и охотно делится информацией. Этот эксперт — вы.
Расскажите, почему нужно обращаться именно к вам, чем вы отличаетесь от остальных, почему ваши решения принесут пользу.
Вывод: создавайте контент, чтобы быть к аудитории ближе, чем конкуренты.
Причина 6. Работает с возражениями
Когда потенциальный клиент знакомится с вашим ресурсом, у него возникает всё больше вопросов из разряда «звучит здорово, но…» Лучше поработать с этими возражениями и заручиться доверием потенциальных клиентов до того, как эти сомнения станут причиной отказов.
Вывод: ваша рассылка — отличная площадка для отработки возражений.
Причина 7. Показывает ваши результаты
Бесплатный контент — способ развеять сомнения и показать, что вы профи.
Вывод: расскажите об удачных или неудачных кейсах, покажите, как вы решили проблему клиента, с какими трудностями столкнулись и как их преодолели.
Причина 8. Объясняет, почему надо выбрать именно вас
Иногда потенциальные клиенты не готовы сразу же принять ваше предложение. Им важно знать, о чём вы говорите, и почему это имеет для них значение.
Примеры использования и кейсы помогают потенциальным клиентам понять, как и для чего им пользоваться вашим продуктом, какие преимущества они получат. Путеводители и фишки показывают существующим клиентам, за что они заплатили.
Вывод: бесплатный контент продает.
Причина 9. Рассказывает вашу историю
Мы хотим работать с теми, на кого можно положиться. Кроме профессиональных навыков нам важны личные качества. Бесплатный контент в рассылках — это шанс рассказать о себе, показать не только компанию, но и людей. Личным историям доверяют. И рассказывать их лучше простым языком, «от себя» и с юмором.
Вывод: честные истории о себе — отличный контент!
Причина 10. Награждает клиентов за внимание
Мы хотим, чтобы пользователи читали статьи, смотрели видео, слушали подкасты и приходили на семинары. Но это значит, что время, которое они тратят на нас, должно быть потрачено с пользой.
Они должны быть увлечены вами. Потенциальные клиенты должны понимать, что вы будете им полезны. Тогда они захотят развивать и углублять взаимоотношения.