Доступность: Как Яндекс Создает Доступные Интерфейсы

Денис Кузнецов, менеджер отдела разработки поисковых интерфейсов Яндекса, рассказал vc.ru о том, как разрабатываются интерфейсы для людей с ограниченными возможностями: что нужно учитывать в процессе проектирования, какие проверки проводить и какая доступность средства обслуживания.



Доступность: как Яндекс создает доступные интерфейсы

Все сервисы Яндекса созданы для упрощения и улучшения жизни людей.

С их помощью мы стараемся помочь людям решить повседневные проблемы.

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

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

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

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

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

Интернет. Комплексная работа над доступностью значительно облегчает таким пользователям использование наших сервисов.

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

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

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

Доступность: как Яндекс создает доступные интерфейсы

Катаракта:

Доступность: как Яндекс создает доступные интерфейсы

Глаукома:

Доступность: как Яндекс создает доступные интерфейсы

Адаптация сервиса для чтения с экрана — большая и серьезная задача для менеджеров и разработчиков интерфейсов.



С чего начать

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

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

Но нам изначально повезло: огромное количество людей интересуется Яндексом и его сервисами, многие из них интересуются технологиями.

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

Наличие в команде адаптации человека из целевой аудитории крайне важно для положительного результата.

Конечно, вы всегда можете выключить монитор, включить программу чтения с экрана и попытаться найти и исправить недочёты интерфейса.

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

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

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



Графический компонент доступности

Конечно, правильнее встроить доступность в сервисы на этапе создания.

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

Гораздо проще сделать сервис доступным сразу, чем потом адаптировать его.

Исходя из нашего опыта, существует три основных правила графической составляющей доступности:

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

  2. Дизайн сервиса должен содержать достаточно контрастную цветовую гамму.

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

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

С опасным сочетанием цветов мы в полной мере столкнулись при разработке интерфейса Яндекс.

Трафика.

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

Доступность: как Яндекс создает доступные интерфейсы

Их можно отличить друг от друга уже при нарушении цветового зрения (встречается у 8% мужчин и 0,8% женщин):

Доступность: как Яндекс создает доступные интерфейсы



Невизуальный дизайн и технические аспекты

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

Невизуальный дизайн — это отображение интерфейса для невизуальных средств доступа.

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

Чтобы сделать невизуальное оформление страницы удобным для пользователя, используются специальные HTML-теги, описывающие иерархию и структуру контента (например, заголовки, таблицы, списки).

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

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

Термин «семантическая разметка» или «семантическая структура» относится к разметке страницы специальными семантическими зонами, несущими дополнительную информацию для программ чтения с экрана.

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

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

При применении семантической разметки WAI-ARIA следует придерживаться двух основных принципов:

  • Любой контент страницы должен принадлежать какой-то смысловой зоне.

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

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

Здесь используются и другие средства выразительности:

  • Вместо размера шрифта важность блоков текста обозначается заголовком соответствующего уровня иерархии.

  • Вместо визуального выделения блоков страницы используются смысловые зоны.

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

    Например, вам нужно подписать пояснительный текст ниже.

Отсутствие клавиатурного управления, а также CAPTCHA, Flash, неоднозначные ссылки, сложные формы и изменяющееся содержимое страниц — основные проблемы доступности веб-сайтов в Интернете.

Дизайнеры интерфейса напрямую влияют на управление клавиатурой и передачу изменений на странице.



О доступности Яндекса

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

В настоящее время нет технических средств для подсчета количества таких людей.

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

Это означает, что мы точно не знаем и, скорее всего, не узнаем, какой процент наших пользователей использует программы чтения с экрана.

Однако для нас было очень важно установить постоянный контакт с этой аудиторией.

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

Наши тестеры также помогли нам установить эту связь.

В целом слепые и слабовидящие люди активно пользуются Интернетом и имеют достаточно сильное сообщество.

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

Теперь наше общение стало регулярным.

Недавно мы провели очередной опрос незрячих пользователей, ставший ежегодным, где мы охватили 549 респондентов, что составляет примерно от 1,7% до 3,9% нашей аудитории (по данным о количестве слепых или людей на грани слепоты).

полная слепота в РФ) и позволяет экстраполировать результаты опроса на всю целевую аудиторию.

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

Наш процесс адаптации сервиса для слепых и слабовидящих пользователей мало чем отличается от стандартного цикла разработки.

  • С помощью наших тестировщиков мы проводим первичный аудит сервиса и выявляем наиболее проблемные места.

  • Разработчики вносят улучшения в интерфейс.

  • Мы проводим повторное тестирование, смотрим измененный интерфейс, проверяем масштаб изменений и выявляем новые проблемы.

  • Повторяем шаги 2-3 до устранения всех проблем с доступностью (в зависимости от сложности работы).

  • Мы выкатываем все изменения и говорим о доступности следующего сервиса Яндекса.

Здесь важно добавить, что продукты Яндекса могут выпускаться без статуса «Доступно».

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

Мы берем на себя ответственность за присвоение данного статуса товару.

Теперь в Яндексе для людей с ограниченными возможностями доступны главная страница в доменах .

ru, .

ua, .

kz, .

by, «Почта» (ее облегченная версия) и «Яндекс.

Браузер».

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

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

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



Что впереди

Мы тратим много времени и усилий на то, чтобы наши сервисы были читаемы программами чтения с экрана.

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

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

Вместе с данным постом часто просматривают: