Удобная навигация, интуитивно понятный интерфейс, оформление заказа в пару кликов — ежедневно мы упрощаем жизнь клиентов наших приложений, учитывая их пожелания и боли. Из-за отсутствия нужной аналитики в этом процессе мы упускаем запросы большой категории потенциальных пользователей с ограничениями по здоровью, которым не удается воспользоваться мобильными сервисами просто потому, что вы не уделили внимание вопросам доступности. Как сделать ваше приложение комфортным для людей с нарушениями зрения, рассказывают сотрудники Додо Пиццы в расшифровке нового выпуска AppsCast.
Алексей Кудрявцев: Сегодня мы говорим о доступности мобильных приложений сразу с двумя гостями из Додо Пиццы — Михаилом Рубановым (akaDuality) и Арменом Хатаяном. Ребята, расскажите о себе подробнее.
Михаил Рубанов: Я iOS-программист нашего основного приложения по заказу пиццы. Моя цель — развивать интерфейсную часть сервиса, добиваясь technical excellence, что невозможно без поддержки VoiceOver и реализации доступности приложения.
Армен Хатаян: Для меня тема Accessibility особенно близка, так как во время учебы в техническом университете я потерял зрение.
С Додо Пицца вышла интересная история. Ребята выпустили игру CMAN, доступную в телеграме, по результатам которой мне удалось прийти в офис компании пообщаться с разработчиками, и после меня пригласили на интервью. Сейчас я занимаюсь вопросами доступности, тестированием универсального доступа, составлением тест-планов, сбором недочетов, а также технической поддержкой пользователей.
Алексей Кудрявцев: Давайте для начала определим, что такое доступность.
Михаил Рубанов: Доступность бывает разных видов. Во многие игры нам нужно играть двумя руками и, если вы повредили руку, то игра перестает быть доступной. Крайний случай — это потеря слуха, зрения, подвижности. Для таких ситуаций возможна адаптация приложения.
Алексей Кудрявцев: Насколько сильно это отличается от usability?
Алексей Кудрявцев: Для людей с какими ограничениями необходимо адаптировать приложения?
Армен Хатаян: Ограничения делятся на функциональные и ментальные. Функциональные подразумевают нарушения зрения, слуха, подвижности. Ментальные предполагают нарушение психики, возможности адекватно воспринимать мир. Решения для этих двух категорий ограничений абсолютно разные.
Михаил Рубанов: Приведу пару примеров. VoiceOver может подходить как незрячим, так и людям с нарушением моторики, как, например, у Сталингулага или Стивена Хокинга. В этом случае VoiceOver помогает сфокусироваться на конкретных элементах, активировать их и взаимодействовать со всем приложением с помощью специального устройства.
Другой пример. Одна из наших пиццерий в Челябинске берет на работу людей с нарушением слуха. В нашем рабочем процессе голосовой ассистент озвучивает поступление на трекер новой пиццы, но этот звуковой сигнал недоступен для таких сотрудников и, чтобы не пропустить заказ, им приходится проводить больше времени у планшета. Для них отличным решением проблемы будет лампочка, которая включается при появлении заказа.
По поводу когнитивных проблем. Во время релиза iOS 7 фон на рабочем столе стал двигаться согласно акселерометру и многие писали, что их укачивает. Тогда появилась настройка движения, которая позволяет уменьшить движение экрана и в том числе количество анимаций. Это полезно, например, для страдающих эпилепсией.
Алексей Кудрявцев: Какие проблемы с приложениями испытывают люди?
Армен Хатаян: Проблем много. Часто в приложении не подписаны кнопки и приходится тыкать наугад, проверять, что это. Ситуация упрощается, если у кнопки есть фоновое изображение, тогда VoiceOver наследует у него название и, зная английский, можно догадаться о назначении элемента.
Кнопка может быть вообще недоступна. Если разработчик отлавливает нажатие на какой-то View, например, на картинку, и так обрабатывает нажатие, то я с своим VoiceOver на это нажать не смогу.
Михаил Рубанов: При попытке сделать мессенджер и расположить начало диалога внизу экрана часто переворачивают collections и таблицы вверх ногами, а потом переворачивают ячейки обратно. Казалось бы, все работает, но при такой операции в VoiceOver жест скролла переворачивается вверх ногами.
Бывает, что для показа нового экрана вместо реализации transition с помощью controllers добавляют View, но не вешают на нее firstResponder. В результате View полностью недоступна и, так как на ней невозможно сфокусироваться, закрывается весь сценарий.
Алексей Кудрявцев: Улучшается ли ситуация с доступностью приложений на рынке? Становится ли их больше?
Армен Хатаян: Мне кажется, что да.
Алексей Кудрявцев: Как этот вопрос регулируется в других странах и в России?
Армен Хатаян: В той же Америке есть Web Content Accessibility Guidelines, помогающий разрабатывать продукты доступными. В России это пока носит рекомендательный характер, но чувствуется, что и общество, и государство старается делать жизнь людей с ограничениями доступнее. Например, недавно была новость, что у нас появился автозак для людей на инвалидных креслах, оборудованный подъемником.
Алексей Кудрявцев: Как в Додо Пицца началась работа над доступностью?
Михаил Рубанов: Год назад Сбербанк адаптировал свое приложение и начал продвигать эту идею в массы. К ним пришел Анатолий Попко, незрячий, который популяризирует идею, что нет лучше времени быть слепым чем сейчас, потому что смартфон стал лучшим источником помощи. Я посмотрел видео с его участием и понял, что хоть и умею делать хорошие интерфейсы, но мои решения не работают для определенного числа людей.
Даниил Попов: Крутая аналогия с crash rate. Когда у нас полпроцента пользователей страдает от крэшей, мы об этом заботимся, а когда полпроцента не может пользоваться вообще приложением, мы об этом даже не знаем.
Михаил Рубанов: Есть проблема общей аналитики, так как нет чистой статистики сколько незрячих вообще в России и СНГ. Можно самостоятельно подсчитать количество пользователей, у которых включен VoiceOver на устройствах. Есть метод isVoiceOverRunning в классе UIAccessibility, который можно поставить на запуск приложения.
Алексей Кудрявцев: Насколько сильно вы адаптировали приложение, прежде чем удалось продать идею руководству?
Михаил Рубанов: Помогло то, что тема доступности совпадает с ценностями компании: «Пицца — это праздник», «Пицца для всех». Идея импонировала разработчикам, продакту и не отнимала много времени и денег.
План по внедрению может быть достаточно прост: завести основной сценарий и посмотреть, какая будет реакция. У незрячих сильное коммьюнити, есть группы, где обсуждают приложения и взаимодействие с ними. Мы не анонсировали нашу адаптацию через release notes, люди в соцсетях сами начали писать о приложении, информация распространялась по сарафанному радио. В этом и есть деньги.
Армен Хатаян: Вначале доступность воспринимается как благотворительность. Нужно выделять время и ресурсы и непонятно, какую пользу это принесет. Затем приходит понимание, что деньги от слепых пользователей абсолютно такие же как и от зрячих.
Даниил Попов: Давайте разберемся с технической составляющей. Что такое VoiceOver и как он работает?
Армен Хатаян: VoiceOver предоставляет визуальную информацию в звуковом формате. Он озвучивает мета-информацию, которая находится на элементах интерфейса и, возможно, даже графически недоступна.
Есть несколько путей включения VoiceOver. Самый простой — попросить об этом Siri фразой «Siri, включи VoiceOver». Можно его активировать через настройку в пункте Accessibility и по тройному нажатию на кнопку Home или на кнопку блокировки (на старших устройствах, где кнопки Home нет) VoiceOver включится, либо отключится. После включения меняется способ управления устройством: при единичном касании экрана озвучивается то, что находится на этом месте экрана; по двойному клику элемент активируется (нажатие на кнопку или иное целевое действие); для скролла нужно использовать три пальца.
Даниил Попов: Применяете ли вы accessibility в Android-версии приложения? И насколько фичи совпадают между платформами?
Армен Хатаян: В Android есть свои службы доступности. За зрение отвечает TalkBack. Функциональность идентична VoiceOver, хотя бывает, что в Android какая-то фича работает лучше, чем в iOS. Пока на наше Android-приложение времени не хватает, но скоро приступим к адаптации.
Даниил Попов: Часто в приложении бывает ситуация, что некоторые элементы интерфейса заблокированы, потому что не введены значения в поля ввода. Как VoiceOver позволяет сообщить слабовидящему пользователю, что кнопка заблокирована и нужно выполнить другое действие для разблокировки?
Михаил Рубанов: В iOS есть Accessibility Traits Collection — несколько настроек, которые позволяют изменить способ взаимодействия с элементом. Можно подписать каждому элементу его название, значение и проставить одно из свойств. Есть значение selected для обработки списков или disabled для обозначения недоступного элемента. Есть интересный трейт adjustable, который применяется к различным слайдерам, степперам, когда свайпами вверх/вниз можно поменять значение элемента и он снова проговорится.
Есть опция на прямое включение взаимодействия, например, панели, на которой можно рисовать, чтобы оставить подпись на чеке в ресторане. Существуют несколько настроек для мультимедиа: после нажатия на кнопку сразу начинается воспроизведение звука или фильма, и VoiceOver должен выключиться, пока снова не начнется взаимодействовать с экраном.
Алексей Кудрявцев: Ты говорил, что работа с доступностью меняет сознание и не так проста, как можешь показаться на первый взгляд. С чем предстоит столкнуться разработчику при погружении в процесс?
Михаил Рубанов: Если говорить о сложностях работы с VoiceOver, то мы обнаружили, что нужно проговаривать некоторые элементы. Например, появление всплывающего сообщения в приложении (не стандартного пуша, а сообщения панели об оформлении заказа) нужно проговорить через post accessibility notification. Мы столкнулись с тем, что при нажатии кнопки VoiceOver перебивает наш текст и произносит название кнопки. Мы решили проблему: обернув все в dispatch after, подвинули на 100 миллисекунд и самостоятельно перебили VoiceOver.
Основная сложность, что в поисках решения пытаешься отыскать его в интернете, но те способы, которые предлагают другие, почти всегда не работают.
Само приложение мы вычистили от костылей. При работе с доступностью важно правильно показывать контроллеры. Как я упоминал ранее, в части проектов при создании нового экрана просто добавляли новую View в иерархию, не позаботившись о том, чтобы firstResponder работал верно. Как следствие, VoiceOver ее не видел. Мы переделали на нормальный контроллер и сходу все починилось.
В нашей дизайн-системе есть контролы по изменению размера, количества, и раньше они были разделены на несколько кнопок. Например, степпер количества оформлялся кнопками «минус», «плюс», количество и итоговая цена за товар. Мы объединили все в один контрол. Теперь вертикальным свайпом можно увеличить количество, и сразу проговорится новая цена. Этот контрол используется в нескольких местах приложения, поэтому одним решением удалось улучшить сразу несколько экранов.
Даниил Попов: В Инстаграме большая часть приложения завязана на изображения. Как VoiceOver работает с таким контентом?
Михаил Рубанов: Инстаграм предлагает при загрузке фотографии сделать подпись для незрячих. Кроме того, сервис уже эволюционировал из просто показа фотографий в истории, сопровождающиеся картинками. Плюс сейчас там можно использовать видео со звуком. iPhone также пытается распознавать фотографии и лица, сообщает, что есть на снимке, насколько он четкий.
Технологии развиваются. На Netflix, например, можно смотреть фильмы с специальными субтитрами, которые дополнительно рассказывают, что происходит на экране.
Даниил Попов: Как соблюсти баланс? Для обычных пользователей хочется показать максимум красивых анимаций с плавными переходами, 3D-эффектами, но хочется и чтобы люди с ограничениями по зрению могли полноценно пользоваться приложением.
Михаил Рубанов: Если говорить об оптимизации ресурсов, то многие методы в iOS передают параметр animated. Можно опираться на него или самому его задавать, например, через isVoiceOverRunning отключать анимацию. При этом можно запилить фичу, протестировать, придумать обходной путь. У VoiceOver много разных технологий, которые позволяют адаптировать контент. Есть даже возможность управлять интонацией голоса озвучки. Нужно просто изучить фреймворк.
Даниил Попов: Мне не очень нравится вариант тыкать в каждую кнопку на экране. В том же Facebook этих кнопок десятки, и процесс превращается в издевательство. Есть более удобные механизмы?
Армен Хатаян: Интерфейс для слепого пользователя радикально отличается от графического. В VoiceOver есть возможность изучать интерфейс двумя способами: последовательно и наугад. Если изучать последовательно, то курсор перемещается по каждому элементу так, как они заданы в иерархии. Свайп вправо перемещает на следующий элемент, свайп влево — на предыдущий. Свайпом вправо можно полностью протапать весь интерфейс и понять, где что недоступно.
В ином варианте можно просто водить по экрану и смотреть, где что находится. По моему опыту большинство незрячих использует последовательную навигацию, так как это удобнее.
В Facebook, например, есть лента новостей с публикациями, к каждой из которых привязаны кнопки like, share, фотографии, ссылки. Facebook сделал каждую публикацию отдельным элементом. Все, что связано с действиями с этой публикацией вынесено в custom action. Свайп вправо удаляет ячейку или сообщение, вертикальные свайпы могут выбрать это действие. В публикациях вертикальные свайпы помогают перемещаться по всем действиям: поставить реакцию, поделиться, посмотреть подробную информацию.
Михаил Рубанов: С технической стороны VoiceOver не идет поперек бизнес-фич, а даже помогает понять, как нужно их сделать. Например, многие двигаются к дизайн-системе, где все контролы сведены к минимуму и используются только они. Работа над базовыми контролами позволяет обеспечить доступность большинства экранов. Выпиливание костылей в случае transitions и правильного показа контроллеров обеспечивает поддержку VoiceOver и делает приложение чище.
Протестировать приложение несложно. Выберете успешный сценарий и попытайтесь пройтись по нему. Вы увидите огромное количество проблем. Адаптировав один полноценный успешный сценарий, вы решите большинство проблем. Останутся сценарии ошибок и нестандартного поведения, и тут уже нужна консультация человека, который в этом специализируется.
Нам в этом помогал Армен и, хоть мы были уверены, что наше приложение хорошо адаптировано, он нас переубедил.
Армен Хатаян: Да, человек, который сталкивается с ограничениям в своей повседневной жизни, расскажет об этом намного больше.
Михаил Рубанов: С этим вопросом в компании легко справится технический писатель, если он есть.
Кстати, Apple на WWDC показывала фишку в MacOS, когда с операционной системой можно работать с помощью голоса: попросить ее показать все подписи на экране, пронумеровать и сказать, какую из них надо адаптировать. Если ваше приложение уже работает с VoiceOver, то нововведение заведется автоматически после перекомпиляции. К сожалению, пока это работает только в Америке и с английским языком.
Алексей Кудрявцев: Какие инструменты кроме VoiceOver помогают людям с иными ограничениями здоровья пользоваться приложениями?
Михаил Рубанов: Есть DymanicType, позволяющий задать размер шрифта. Это развивает компетенции iOS-разработчика в написании контролов, потому что, когда контролу сказали, что он может увеличиться в 3-4 раза, нужно придумывать другие решения и вместо горизонтального скролла ячеек сделать выпадающий список и его адаптировать.
Есть такие опции как reduse transparency или reduce motion — адаптации для людей с нарушениями зрения или тех, кого укачивает, но мы пока до них не дошли. В сторону других технологий мы тоже пока не копали.
Алексей Кудрявцев: Насколько хороша API Accessibility от Apple? Есть ли в ней недостатки?
Михаил Рубанов: Она довольна крута и заставила прокачиваться в написании контролов и transitions. Там довольно сложный дебаг, потому если у тебя кнопки недоступны или их порядок стал другим, то починить это можно только догадавшись, как оно работает. Мне помогло, что я представил, как я сам написал такую технологию, если бы у меня была иерархия вьюшек с вьюшками и возможность извлечь из них лейбл.
Алексей Кудрявцев: У разработчиков часто возникают трудности с построением правильной иерархии. Как вы с этим справляетесь?
Михаил Рубанов: Многие элементы можно обобщить. Если совсем не адаптировать приложение, то вы начнете переключаться между автором приложения, текстом, потом по каждой кнопке, а тот же Facebook это свел к двум вариантам свайпов.
Чтобы сделать такой action, нужно указать название и селектор, который вы вызовете, уложить actions в массив и передать VoiceOver.
В случае Додо Пицца в ячейках меню есть картинка пиццы, название, ингредиенты, цена и кнопка «купить» — это можно обобщить так, что выбирается вся ячейка для озвучки всей информации за раз. В лейбле озвучивается название и цена, в accessibility value — состав. Не нужно копаться внутри контролов. Обобщайте, пока вам не станет очевидно, что нужно дробить.
Проблемы все типовые и мало освещены. Для работы с иерархией можно выставить accessibility elements и управлять. Важно понимать, что контейнеры для разных элементов сами не являются контролами. Ячейка — это контейнер, который при isAccessibilityElement == false будет переключаться по всем контроллам внутри самой ячейки., а при isAccessibilityElement == true, VoiceOver будет у самой ячейки спрашивать все нужные параметры. Здесь важен скилл разработчика и умение развиваться от простых элементов к сложным.
Алексей Кудрявцев: Как настроить практики в компании так, чтобы не разваливалось, хорошо работало и было удобно?
Михаил Рубанов: Нужен человек в команде, который понимает важность вопроса и может пройти по основным сценариям приложения, адаптировать, погрузиться в фреймворк. Если это начнет делать вся команда, то она столкнется со сложностями и потратит лишнее время на обсуждение. Мне в одиночку было проще.
Когда часть приложения будет готова, стоит рассказать о вопросах доступности дизайнерам, программистам, продакту и посмотреть их реакцию.
После определенного процесса адаптации мне стало просто отдавать задачи по доступности другим разработчикам. Сопротивления внутри платформы не было. Сложности бывают с другими платформами: Android или сайтом, потому что они ограничены в ресурсах по количеству разработчиков, но достаточно заразить одного, показать проблему и как ее решать.
Когда Армен впервые запустил наш сайт, то спросил, почему на нем вообще ничего нет. Он видел пустой экран и снизу подписи «button», «button», «button». Оказалось, что в это время на сайте был баннер-листалка с акциями, который занимал две трети страницы, а сама пицца была ниже. Подписи «button» принадлежали точкам перехода на отдельные блоки баннера.
Даниил Попов: Я потратил время, чтобы адаптировать flow под accessibility. Как мне в будущем убедиться, что этот flow никто не сломал? Можно ли написать тесты или зафиксировать результат?
Армен Хатаян: Надо привлекать людей, которые профессионально этим занимаются и проводят регресс, либо самому включать VoiceOver и протыкивать изменения.
Даниил Попов: Есть ли фреймворки для тестирования VoiceOver в приложении?
Михаил Рубанов: Отдельного фреймворка я не видел, но тут работают стандартные UI-тесты, только у них другое назначение. Если совсем сломать VoiceOver, то контролы не будут доступны в UI-тестах. Все свойства, которые вы проставляете как accessibility value, accessibility label доступны из unit-тестов. Это можно автоматизировать. У нас был случай, когда доступность сломала UI-тест и пришлось добавлять #if UITEST это или реальный продакшн.
Алексей Кудрявцев: Стоит ли пытаться оптимизировать доступность без помощника с ограничениями?
Армен Хатаян: Визуально это может выглядеть удобно, но в повседневной жизни это окажется совсем не то, что нужно. Например, в русской локализации VoiceOver зачитывается слово папка, а потом ее название. Когда я провожу пальцем по столбцу папок, то слышу «папка, папка, папка…» вместо ее названия. Такие мелкие детали можно распознать только когда реально пользуешься приложением.
Михаил Рубанов: Можно начать самостоятельно. Проблема легко познается, достаточно включить VoiceOver, разобраться с его навигацией и попробовать пользоваться приложением. Оно «закричит» в тех местах, где нужно исправить. Вам тут же захочется это сделать, так как вы увидите свое детище с уродливой стороны.
Даниил Попов: Где можно посмотреть примеры приложений с хорошей accessibility?
Михаил Рубанов: Сначала стоит открыть документацию к файлу UIAccessibility.h и познакомиться с инструментами. Этих файлов несколько, они отличаются по сложности. Стоит прочитать документ Apple по адаптации доступности: там разбираются все основные проблемы по наименованию, по удобству контролов, группировке и обобщению. Документ не исчерпывающий, но подходит для старта.
Алексей Кудрявцев: Какие сессии WWDC стоит посмотреть на тему доступности?
Михаил Рубанов: Все, что содержат слово accessibility. Они короткие, а в базовой лекции полноценно раскрывают возможности фреймворка.
Алексей Кудрявцев: А что насчет книг, статей?
Армен Хатаян: Могу посоветовать Applevis: там собирается много незрячих и говорят о своих проблемах, есть статьи с примерами кода.
Когда реализуешь какую-либо функциональность, возникает вопрос, кто этим будет пользоваться и где таких пользователей найти. Для этого подойдут группы в соцсетях, например, «Доступная среда» — можно рассказать о своем приложении и попросить помощи с тестированием.
Вот советы от меня. Первым делом подпишите контролы и проверьте это. Затем сгруппируйте, чтобы их не было много. Исправьте те положения, когда приложение совсем не работает. Если вы чувствуете, что достаточно знаний, то сделайте сервис удобным.
Алексей Кудрявцев: Сегодня мы говорим о доступности мобильных приложений сразу с двумя гостями из Додо Пиццы — Михаилом Рубановым (akaDuality) и Арменом Хатаяном. Ребята, расскажите о себе подробнее.
Михаил Рубанов: Я iOS-программист нашего основного приложения по заказу пиццы. Моя цель — развивать интерфейсную часть сервиса, добиваясь technical excellence, что невозможно без поддержки VoiceOver и реализации доступности приложения.
Армен Хатаян: Для меня тема Accessibility особенно близка, так как во время учебы в техническом университете я потерял зрение.
В какой-то момент я понял, что если люди не пытаются улучшить ситуацию с доступностью приложений, то надо самому популяризировать этот вопрос и помочь в его решении.Я начал знакомиться с различными приложениями, тестировать их и найденные недочеты отправлять в компании.
С Додо Пицца вышла интересная история. Ребята выпустили игру CMAN, доступную в телеграме, по результатам которой мне удалось прийти в офис компании пообщаться с разработчиками, и после меня пригласили на интервью. Сейчас я занимаюсь вопросами доступности, тестированием универсального доступа, составлением тест-планов, сбором недочетов, а также технической поддержкой пользователей.
Введение в Accessibility
Алексей Кудрявцев: Давайте для начала определим, что такое доступность.
Михаил Рубанов: Доступность бывает разных видов. Во многие игры нам нужно играть двумя руками и, если вы повредили руку, то игра перестает быть доступной. Крайний случай — это потеря слуха, зрения, подвижности. Для таких ситуаций возможна адаптация приложения.
Алексей Кудрявцев: Насколько сильно это отличается от usability?
Армен Хатаян: Usability- это удобство использования интерфейса. Accessibility — возможность использования интерфейса при наличии ограничений. Внутри accessibility может быть usability.Михаил Рубанов: Можно выделить несколько стадий адаптации приложения. Первый этап предполагает, что приложение сломано везде и можно только зайти и начать сценарий заново. После небольшой адаптации можно пройти по приложению до целевого действия, при этом выполнение действия возможно, но сам процесс неудобен. Последний этап — это адаптация самого целевого действия с учетом комфортности и быстроты использования.
Алексей Кудрявцев: Для людей с какими ограничениями необходимо адаптировать приложения?
Армен Хатаян: Ограничения делятся на функциональные и ментальные. Функциональные подразумевают нарушения зрения, слуха, подвижности. Ментальные предполагают нарушение психики, возможности адекватно воспринимать мир. Решения для этих двух категорий ограничений абсолютно разные.
Михаил Рубанов: Приведу пару примеров. VoiceOver может подходить как незрячим, так и людям с нарушением моторики, как, например, у Сталингулага или Стивена Хокинга. В этом случае VoiceOver помогает сфокусироваться на конкретных элементах, активировать их и взаимодействовать со всем приложением с помощью специального устройства.
Другой пример. Одна из наших пиццерий в Челябинске берет на работу людей с нарушением слуха. В нашем рабочем процессе голосовой ассистент озвучивает поступление на трекер новой пиццы, но этот звуковой сигнал недоступен для таких сотрудников и, чтобы не пропустить заказ, им приходится проводить больше времени у планшета. Для них отличным решением проблемы будет лампочка, которая включается при появлении заказа.
По поводу когнитивных проблем. Во время релиза iOS 7 фон на рабочем столе стал двигаться согласно акселерометру и многие писали, что их укачивает. Тогда появилась настройка движения, которая позволяет уменьшить движение экрана и в том числе количество анимаций. Это полезно, например, для страдающих эпилепсией.
Проблемы доступности приложений
Алексей Кудрявцев: Какие проблемы с приложениями испытывают люди?
Армен Хатаян: Проблем много. Часто в приложении не подписаны кнопки и приходится тыкать наугад, проверять, что это. Ситуация упрощается, если у кнопки есть фоновое изображение, тогда VoiceOver наследует у него название и, зная английский, можно догадаться о назначении элемента.
Кнопка может быть вообще недоступна. Если разработчик отлавливает нажатие на какой-то View, например, на картинку, и так обрабатывает нажатие, то я с своим VoiceOver на это нажать не смогу.
Михаил Рубанов: При попытке сделать мессенджер и расположить начало диалога внизу экрана часто переворачивают collections и таблицы вверх ногами, а потом переворачивают ячейки обратно. Казалось бы, все работает, но при такой операции в VoiceOver жест скролла переворачивается вверх ногами.
Бывает, что для показа нового экрана вместо реализации transition с помощью controllers добавляют View, но не вешают на нее firstResponder. В результате View полностью недоступна и, так как на ней невозможно сфокусироваться, закрывается весь сценарий.
Алексей Кудрявцев: Улучшается ли ситуация с доступностью приложений на рынке? Становится ли их больше?
Армен Хатаян: Мне кажется, что да.
Для того, чтобы доступных приложений стало больше, нужны либо пользователи, которые об этом попросят, либо разработчики, в культуре которых уже есть понимание, что на доступность надо уделять часть времени разработки.В США, например, есть The Americans with Disabilities Act (ADA), по которому все компании, особенно такие гигантские корпорации как Google и Facebook, обязаны создавать продукты с учетом доступности для всех категорий. Несоблюдение этого закона позволяет американцам подавать в суд на компании.
Алексей Кудрявцев: Как этот вопрос регулируется в других странах и в России?
Армен Хатаян: В той же Америке есть Web Content Accessibility Guidelines, помогающий разрабатывать продукты доступными. В России это пока носит рекомендательный характер, но чувствуется, что и общество, и государство старается делать жизнь людей с ограничениями доступнее. Например, недавно была новость, что у нас появился автозак для людей на инвалидных креслах, оборудованный подъемником.
Предпосылки для адаптации приложений
Алексей Кудрявцев: Как в Додо Пицца началась работа над доступностью?
Михаил Рубанов: Год назад Сбербанк адаптировал свое приложение и начал продвигать эту идею в массы. К ним пришел Анатолий Попко, незрячий, который популяризирует идею, что нет лучше времени быть слепым чем сейчас, потому что смартфон стал лучшим источником помощи. Я посмотрел видео с его участием и понял, что хоть и умею делать хорошие интерфейсы, но мои решения не работают для определенного числа людей.
Когда мы видим crash rate в 98%, нас начинают сильно волновать люди, которые не могут сделать заказ. При этом есть люди, которые вообще не могут пользоваться нашим приложением, но аналитику об этом никто не дает.Самолюбие было уязвлено, и я пошел разбираться в фреймворке. Оказалось, что материалов по теме мало и написаны они поверхностно. Я закопался, по пятницам вечером по пару часов ходил по приложению, старался что-то поправить. Начал с простых вещей — делал подписи к кнопкам с картинками, закончил экранами, которые были недоступны. Спустя месяц погружения подготовил презентацию про доступность, которую увидели наши продакты, осознали проблему и дали зеленый свет на вольное развитие технологии, адаптацию фреймворка. Три месяца назад в нашей команде появился Армен и это сильно помогло улучшить приложение.
Даниил Попов: Крутая аналогия с crash rate. Когда у нас полпроцента пользователей страдает от крэшей, мы об этом заботимся, а когда полпроцента не может пользоваться вообще приложением, мы об этом даже не знаем.
Вывод логичен: думайте о всех категориях людей, которые потенциально могут пользоваться вашим приложением.Алексей Кудрявцев: Есть ли у вас аналитика по количеству таких пользователей?
Михаил Рубанов: Есть проблема общей аналитики, так как нет чистой статистики сколько незрячих вообще в России и СНГ. Можно самостоятельно подсчитать количество пользователей, у которых включен VoiceOver на устройствах. Есть метод isVoiceOverRunning в классе UIAccessibility, который можно поставить на запуск приложения.
Алексей Кудрявцев: Насколько сильно вы адаптировали приложение, прежде чем удалось продать идею руководству?
Михаил Рубанов: Помогло то, что тема доступности совпадает с ценностями компании: «Пицца — это праздник», «Пицца для всех». Идея импонировала разработчикам, продакту и не отнимала много времени и денег.
План по внедрению может быть достаточно прост: завести основной сценарий и посмотреть, какая будет реакция. У незрячих сильное коммьюнити, есть группы, где обсуждают приложения и взаимодействие с ними. Мы не анонсировали нашу адаптацию через release notes, люди в соцсетях сами начали писать о приложении, информация распространялась по сарафанному радио. В этом и есть деньги.
Армен Хатаян: Вначале доступность воспринимается как благотворительность. Нужно выделять время и ресурсы и непонятно, какую пользу это принесет. Затем приходит понимание, что деньги от слепых пользователей абсолютно такие же как и от зрячих.
Неважно, кто покупает пиццу, важно дать возможность это сделать.
Взаимодействие с VoiceOver
Даниил Попов: Давайте разберемся с технической составляющей. Что такое VoiceOver и как он работает?
Армен Хатаян: VoiceOver предоставляет визуальную информацию в звуковом формате. Он озвучивает мета-информацию, которая находится на элементах интерфейса и, возможно, даже графически недоступна.
Есть несколько путей включения VoiceOver. Самый простой — попросить об этом Siri фразой «Siri, включи VoiceOver». Можно его активировать через настройку в пункте Accessibility и по тройному нажатию на кнопку Home или на кнопку блокировки (на старших устройствах, где кнопки Home нет) VoiceOver включится, либо отключится. После включения меняется способ управления устройством: при единичном касании экрана озвучивается то, что находится на этом месте экрана; по двойному клику элемент активируется (нажатие на кнопку или иное целевое действие); для скролла нужно использовать три пальца.
Даниил Попов: Применяете ли вы accessibility в Android-версии приложения? И насколько фичи совпадают между платформами?
Армен Хатаян: В Android есть свои службы доступности. За зрение отвечает TalkBack. Функциональность идентична VoiceOver, хотя бывает, что в Android какая-то фича работает лучше, чем в iOS. Пока на наше Android-приложение времени не хватает, но скоро приступим к адаптации.
Даниил Попов: Часто в приложении бывает ситуация, что некоторые элементы интерфейса заблокированы, потому что не введены значения в поля ввода. Как VoiceOver позволяет сообщить слабовидящему пользователю, что кнопка заблокирована и нужно выполнить другое действие для разблокировки?
Михаил Рубанов: В iOS есть Accessibility Traits Collection — несколько настроек, которые позволяют изменить способ взаимодействия с элементом. Можно подписать каждому элементу его название, значение и проставить одно из свойств. Есть значение selected для обработки списков или disabled для обозначения недоступного элемента. Есть интересный трейт adjustable, который применяется к различным слайдерам, степперам, когда свайпами вверх/вниз можно поменять значение элемента и он снова проговорится.
Есть опция на прямое включение взаимодействия, например, панели, на которой можно рисовать, чтобы оставить подпись на чеке в ресторане. Существуют несколько настроек для мультимедиа: после нажатия на кнопку сразу начинается воспроизведение звука или фильма, и VoiceOver должен выключиться, пока снова не начнется взаимодействовать с экраном.
Не надо городить костыли: ставите настройку и система все сама скажет с нужной интонацией.
Особенности работы с VoiceOver
Алексей Кудрявцев: Ты говорил, что работа с доступностью меняет сознание и не так проста, как можешь показаться на первый взгляд. С чем предстоит столкнуться разработчику при погружении в процесс?
Михаил Рубанов: Если говорить о сложностях работы с VoiceOver, то мы обнаружили, что нужно проговаривать некоторые элементы. Например, появление всплывающего сообщения в приложении (не стандартного пуша, а сообщения панели об оформлении заказа) нужно проговорить через post accessibility notification. Мы столкнулись с тем, что при нажатии кнопки VoiceOver перебивает наш текст и произносит название кнопки. Мы решили проблему: обернув все в dispatch after, подвинули на 100 миллисекунд и самостоятельно перебили VoiceOver.
Основная сложность, что в поисках решения пытаешься отыскать его в интернете, но те способы, которые предлагают другие, почти всегда не работают.
Само приложение мы вычистили от костылей. При работе с доступностью важно правильно показывать контроллеры. Как я упоминал ранее, в части проектов при создании нового экрана просто добавляли новую View в иерархию, не позаботившись о том, чтобы firstResponder работал верно. Как следствие, VoiceOver ее не видел. Мы переделали на нормальный контроллер и сходу все починилось.
В нашей дизайн-системе есть контролы по изменению размера, количества, и раньше они были разделены на несколько кнопок. Например, степпер количества оформлялся кнопками «минус», «плюс», количество и итоговая цена за товар. Мы объединили все в один контрол. Теперь вертикальным свайпом можно увеличить количество, и сразу проговорится новая цена. Этот контрол используется в нескольких местах приложения, поэтому одним решением удалось улучшить сразу несколько экранов.
Даниил Попов: В Инстаграме большая часть приложения завязана на изображения. Как VoiceOver работает с таким контентом?
Михаил Рубанов: Инстаграм предлагает при загрузке фотографии сделать подпись для незрячих. Кроме того, сервис уже эволюционировал из просто показа фотографий в истории, сопровождающиеся картинками. Плюс сейчас там можно использовать видео со звуком. iPhone также пытается распознавать фотографии и лица, сообщает, что есть на снимке, насколько он четкий.
Технологии развиваются. На Netflix, например, можно смотреть фильмы с специальными субтитрами, которые дополнительно рассказывают, что происходит на экране.
Даниил Попов: Как соблюсти баланс? Для обычных пользователей хочется показать максимум красивых анимаций с плавными переходами, 3D-эффектами, но хочется и чтобы люди с ограничениями по зрению могли полноценно пользоваться приложением.
Михаил Рубанов: Если говорить об оптимизации ресурсов, то многие методы в iOS передают параметр animated. Можно опираться на него или самому его задавать, например, через isVoiceOverRunning отключать анимацию. При этом можно запилить фичу, протестировать, придумать обходной путь. У VoiceOver много разных технологий, которые позволяют адаптировать контент. Есть даже возможность управлять интонацией голоса озвучки. Нужно просто изучить фреймворк.
Даниил Попов: Мне не очень нравится вариант тыкать в каждую кнопку на экране. В том же Facebook этих кнопок десятки, и процесс превращается в издевательство. Есть более удобные механизмы?
Армен Хатаян: Интерфейс для слепого пользователя радикально отличается от графического. В VoiceOver есть возможность изучать интерфейс двумя способами: последовательно и наугад. Если изучать последовательно, то курсор перемещается по каждому элементу так, как они заданы в иерархии. Свайп вправо перемещает на следующий элемент, свайп влево — на предыдущий. Свайпом вправо можно полностью протапать весь интерфейс и понять, где что недоступно.
В ином варианте можно просто водить по экрану и смотреть, где что находится. По моему опыту большинство незрячих использует последовательную навигацию, так как это удобнее.
В Facebook, например, есть лента новостей с публикациями, к каждой из которых привязаны кнопки like, share, фотографии, ссылки. Facebook сделал каждую публикацию отдельным элементом. Все, что связано с действиями с этой публикацией вынесено в custom action. Свайп вправо удаляет ячейку или сообщение, вертикальные свайпы могут выбрать это действие. В публикациях вертикальные свайпы помогают перемещаться по всем действиям: поставить реакцию, поделиться, посмотреть подробную информацию.
Михаил Рубанов: С технической стороны VoiceOver не идет поперек бизнес-фич, а даже помогает понять, как нужно их сделать. Например, многие двигаются к дизайн-системе, где все контролы сведены к минимуму и используются только они. Работа над базовыми контролами позволяет обеспечить доступность большинства экранов. Выпиливание костылей в случае transitions и правильного показа контроллеров обеспечивает поддержку VoiceOver и делает приложение чище.
Протестировать приложение несложно. Выберете успешный сценарий и попытайтесь пройтись по нему. Вы увидите огромное количество проблем. Адаптировав один полноценный успешный сценарий, вы решите большинство проблем. Останутся сценарии ошибок и нестандартного поведения, и тут уже нужна консультация человека, который в этом специализируется.
Нам в этом помогал Армен и, хоть мы были уверены, что наше приложение хорошо адаптировано, он нас переубедил.
Армен Хатаян: Да, человек, который сталкивается с ограничениям в своей повседневной жизни, расскажет об этом намного больше.
У VoiceOver есть функциональность, которая поможет стать ближе к незрячим людям. Вам нужно три раза тапнуть по экрану и он погаснет. Таким нехитрым способом вы сможете легче понять незрячих.При адаптации важно придерживаться определенных правил в назначении подписей. Если это кнопка, не нужно еще раз повторять, что это кнопка. Должно быть лишь действие, которое кнопка совершает. Например, «создать заметку» вместо «создать новую заметку». Перед тем как добавить лейбл, подумайте, реально ли он отражает его суть.
Михаил Рубанов: С этим вопросом в компании легко справится технический писатель, если он есть.
Кстати, Apple на WWDC показывала фишку в MacOS, когда с операционной системой можно работать с помощью голоса: попросить ее показать все подписи на экране, пронумеровать и сказать, какую из них надо адаптировать. Если ваше приложение уже работает с VoiceOver, то нововведение заведется автоматически после перекомпиляции. К сожалению, пока это работает только в Америке и с английским языком.
Алексей Кудрявцев: Какие инструменты кроме VoiceOver помогают людям с иными ограничениями здоровья пользоваться приложениями?
Михаил Рубанов: Есть DymanicType, позволяющий задать размер шрифта. Это развивает компетенции iOS-разработчика в написании контролов, потому что, когда контролу сказали, что он может увеличиться в 3-4 раза, нужно придумывать другие решения и вместо горизонтального скролла ячеек сделать выпадающий список и его адаптировать.
Есть такие опции как reduse transparency или reduce motion — адаптации для людей с нарушениями зрения или тех, кого укачивает, но мы пока до них не дошли. В сторону других технологий мы тоже пока не копали.
Алексей Кудрявцев: Насколько хороша API Accessibility от Apple? Есть ли в ней недостатки?
Михаил Рубанов: Она довольна крута и заставила прокачиваться в написании контролов и transitions. Там довольно сложный дебаг, потому если у тебя кнопки недоступны или их порядок стал другим, то починить это можно только догадавшись, как оно работает. Мне помогло, что я представил, как я сам написал такую технологию, если бы у меня была иерархия вьюшек с вьюшками и возможность извлечь из них лейбл.
Алексей Кудрявцев: У разработчиков часто возникают трудности с построением правильной иерархии. Как вы с этим справляетесь?
Михаил Рубанов: Многие элементы можно обобщить. Если совсем не адаптировать приложение, то вы начнете переключаться между автором приложения, текстом, потом по каждой кнопке, а тот же Facebook это свел к двум вариантам свайпов.
Чтобы сделать такой action, нужно указать название и селектор, который вы вызовете, уложить actions в массив и передать VoiceOver.
В случае Додо Пицца в ячейках меню есть картинка пиццы, название, ингредиенты, цена и кнопка «купить» — это можно обобщить так, что выбирается вся ячейка для озвучки всей информации за раз. В лейбле озвучивается название и цена, в accessibility value — состав. Не нужно копаться внутри контролов. Обобщайте, пока вам не станет очевидно, что нужно дробить.
Проблемы все типовые и мало освещены. Для работы с иерархией можно выставить accessibility elements и управлять. Важно понимать, что контейнеры для разных элементов сами не являются контролами. Ячейка — это контейнер, который при isAccessibilityElement == false будет переключаться по всем контроллам внутри самой ячейки., а при isAccessibilityElement == true, VoiceOver будет у самой ячейки спрашивать все нужные параметры. Здесь важен скилл разработчика и умение развиваться от простых элементов к сложным.
Как начать применять Accessibility?
Алексей Кудрявцев: Как настроить практики в компании так, чтобы не разваливалось, хорошо работало и было удобно?
Михаил Рубанов: Нужен человек в команде, который понимает важность вопроса и может пройти по основным сценариям приложения, адаптировать, погрузиться в фреймворк. Если это начнет делать вся команда, то она столкнется со сложностями и потратит лишнее время на обсуждение. Мне в одиночку было проще.
Когда часть приложения будет готова, стоит рассказать о вопросах доступности дизайнерам, программистам, продакту и посмотреть их реакцию.
После определенного процесса адаптации мне стало просто отдавать задачи по доступности другим разработчикам. Сопротивления внутри платформы не было. Сложности бывают с другими платформами: Android или сайтом, потому что они ограничены в ресурсах по количеству разработчиков, но достаточно заразить одного, показать проблему и как ее решать.
Когда Армен впервые запустил наш сайт, то спросил, почему на нем вообще ничего нет. Он видел пустой экран и снизу подписи «button», «button», «button». Оказалось, что в это время на сайте был баннер-листалка с акциями, который занимал две трети страницы, а сама пицца была ниже. Подписи «button» принадлежали точкам перехода на отдельные блоки баннера.
Даниил Попов: Я потратил время, чтобы адаптировать flow под accessibility. Как мне в будущем убедиться, что этот flow никто не сломал? Можно ли написать тесты или зафиксировать результат?
Армен Хатаян: Надо привлекать людей, которые профессионально этим занимаются и проводят регресс, либо самому включать VoiceOver и протыкивать изменения.
Даниил Попов: Есть ли фреймворки для тестирования VoiceOver в приложении?
Михаил Рубанов: Отдельного фреймворка я не видел, но тут работают стандартные UI-тесты, только у них другое назначение. Если совсем сломать VoiceOver, то контролы не будут доступны в UI-тестах. Все свойства, которые вы проставляете как accessibility value, accessibility label доступны из unit-тестов. Это можно автоматизировать. У нас был случай, когда доступность сломала UI-тест и пришлось добавлять #if UITEST это или реальный продакшн.
Алексей Кудрявцев: Стоит ли пытаться оптимизировать доступность без помощника с ограничениями?
Армен Хатаян: Визуально это может выглядеть удобно, но в повседневной жизни это окажется совсем не то, что нужно. Например, в русской локализации VoiceOver зачитывается слово папка, а потом ее название. Когда я провожу пальцем по столбцу папок, то слышу «папка, папка, папка…» вместо ее названия. Такие мелкие детали можно распознать только когда реально пользуешься приложением.
Михаил Рубанов: Можно начать самостоятельно. Проблема легко познается, достаточно включить VoiceOver, разобраться с его навигацией и попробовать пользоваться приложением. Оно «закричит» в тех местах, где нужно исправить. Вам тут же захочется это сделать, так как вы увидите свое детище с уродливой стороны.
Best practices
Даниил Попов: Где можно посмотреть примеры приложений с хорошей accessibility?
Михаил Рубанов: Сначала стоит открыть документацию к файлу UIAccessibility.h и познакомиться с инструментами. Этих файлов несколько, они отличаются по сложности. Стоит прочитать документ Apple по адаптации доступности: там разбираются все основные проблемы по наименованию, по удобству контролов, группировке и обобщению. Документ не исчерпывающий, но подходит для старта.
Алексей Кудрявцев: Какие сессии WWDC стоит посмотреть на тему доступности?
Михаил Рубанов: Все, что содержат слово accessibility. Они короткие, а в базовой лекции полноценно раскрывают возможности фреймворка.
Алексей Кудрявцев: А что насчет книг, статей?
Армен Хатаян: Могу посоветовать Applevis: там собирается много незрячих и говорят о своих проблемах, есть статьи с примерами кода.
Когда реализуешь какую-либо функциональность, возникает вопрос, кто этим будет пользоваться и где таких пользователей найти. Для этого подойдут группы в соцсетях, например, «Доступная среда» — можно рассказать о своем приложении и попросить помощи с тестированием.
Дам еще несколько советов. Если действительно хочется заняться доступностью, то начните с малого: посмотрите в Accessibility Inspector в Xcode, он покажет, какие элементы не подписаны и что недоступно.Михаил Рубанов: Accessibility — это интересный фреймворк из-за необычности набора проблем, которые он решает. Его внедрение поможет глубже разобраться с тем, как работает iOS и что лежит в основе интерфейса. Это отдельная ветка развития разработчика, требующая времени на освоение.
Во-вторых, попытайтесь уделять несколько минут доступности при реализации новой функциональности.
В-третьих, рассказывайте коллегам об accessibility, пока не войдет в привычку уделять немного внимания этому вопросу в каждом спринте.
Вот советы от меня. Первым делом подпишите контролы и проверьте это. Затем сгруппируйте, чтобы их не было много. Исправьте те положения, когда приложение совсем не работает. Если вы чувствуете, что достаточно знаний, то сделайте сервис удобным.
Если прочитав эту статью, вы открыли для себя новый мир, то обязательно отправляйтесь 21-22 октября в Санкт-Петербург на AppsConf. Тему доступности обещает подхватить iOS-разработчик Антон Силюк и рассказать о практике применения accessibility в работе над приложением Juno.
Выпуски AppsCast выходят раз в две недели по средам и, если звуковая версия вам привычнее текстовой, то подписывайтесь на нас в SoundCloud, ставьте лайки и обсуждайте темы в нашем чате.