Люди и интерфейсы. Рассказ незрячего тестировщика о том, как сервисы Яндекса становятся доступнее

w1nk9llivv81jfguljv8kz51dc0.jpeg

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

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


Как смотрят мультфильмы

Однажды, ещё задолго до того, как я начал сотрудничать с Яндексом, мы с коллегами организовывали показ мультфильма «Шрек» для незрячих ребят из школы-интерната. Наверное вы слышали, что на таких показах мультфильмы сопровождают тифлокомментариями — закадровыми описаниями того, что происходит на экране. Комментарии звучат в промежутках между диалогами и описывают действия, предметы и даже внешность героев. Но нам такого описания показалось недостаточно — захотелось действительно показать юным зрителям главного героя, этого забавного великана со странными ушами. Ведь у многих незрячих детей ничего со словом «Шрек» не ассоциировалось. 

Я подумал — дать пощупать его, что ли? И мы позвали ростовых кукол. Живые и настоящие, Шрек с Ослом подверглись, скажем так, тщательному тактильному изучению и произвели фурор. Мы (будучи организаторами) расщупали Шрека раньше, поэтому за детьми просто наблюдали, радуясь их ажиотажу.

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

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

А теперь давайте поговорим о том, что такое цифровая доступность и как с ней «борются» в Яндексе. :)


Доступность — это для всех

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

Когда мы говорим о цифровой доступности, первыми на ум приходят именно незрячие пользователи, потому что:


  • Полное отсутствие зрения — очень понятное и однозначное ограничение. Оно не вызывает вопросов о квалификации пользователя, не зависит от внешних факторов (освещённости), а главное, его никак нельзя преодолеть (хоть надевай очки, хоть нет).
  • Программы экранного доступа (англ. screen reader), которыми пользуются незрячие люди — наглядный инструмент для тестирования на доступность: бесплатный, не такой сложный, как айтрекеры, и не зависящий от индивидуальных ограничений, как, например, система Стивена Хокинга. 

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

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

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

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

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

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

Теперь давайте для примера возьмём элемент интерфейса, который открывает меню настроек и часто выглядит как шестерёнка. Как понять, что этот элемент доступен? Всё просто — с ним могут взаимодействовать разные пользователи:


  1. Незрячий пользователь устанавливает на шестерёнку курсор программы экранного доступа и слышит: «Настройки, кнопка» или читает «Настройки КНП» на брайлевском дисплее.
  2. Пользователь клавиатуры может переместить системный фокус на шестерёнку и убедиться, что фокус установлен именно на ней, увидев рамку (синюю обводку).
  3. Пользователь с нарушениями мелкой моторики также может без труда открыть настройки, так как шестерёнка занимает достаточно места на экране и по ней легко попасть пальцем.
  4. Слабовидящий пользователь замечает её, потому что есть необходимый уровень контраста.
  5. А условно здоровый пользователь (без каких-либо ограничений жизнедеятельности, которые мешают воспринимать цифровой контент и управлять им) видит всё ту же шестерёнку и также успешно заходит в настройки.


Программы экранного доступа

Программы экранного доступа есть для всех популярных операционных систем:


  • Windows: NVDA, JAWS, Narrator;
  • Linux: Orca;
  • macOS и iOS: VoiceOver;
  • Android: TalkBack.


Как сделать интерфейс доступным для незрячих

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

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

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


Уровни погружения в проблему

Чтобы понять, что такое доступный цифровой контент, стоит заглянуть в стандарты доступности. В России это ГОСТ-Р 52872–2019, основанный на созданном W3C руководстве по обеспечению доступности веб-контента (WCAG 2.1).

Чтобы сделать доступными конкретные элементы интерфейса, нужно следовать техническим спецификациям: HTML, CSS, WAI-ARIA (описывает цифровой контент для программы экранного доступа).

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

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

Для интерактивных элементов важно, чтобы программа экранного доступа понимала, какие у элемента:


  • Тип или роль («кнопка»).
  • Название («настройки»).
  • Состояние. Например, у флажка (check box) это: «отмечен» и «не отмечен».
  • Значение. Пример — уровень громкости.

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

,

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

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


  1. Начать с клавиатуры. Если вы разрабатываете веб-приложение или сайт, попробуйте пройти базовые кейсы без мыши. Клавиатурный доступ отлично работает и без программы экранного доступа.
  2. Использовать инструменты автоматизированного выявления дефектов доступности (например, Lighthouse, AXE, Wave). Они помогают найти до 40 процентов всех проблем и существенно облегчают последующее ручное тестирование.
  3. Провести ручное тестирование с профессиональным пользователем программы экранного доступа. Историю про ручное тестирование я расскажу чуть позже.


Чтобы доступность не страдала


История 1. Применяйте стандарты

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

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