В начале ноября мы с Дмитрием Силаевым ездили в Центральный Банк РФ на очередное заседание Рабочей Группы по согласованию методики рейтингования доступности мобильных банков. В ходе заседания мы рассказали о том, как будем присваивать участникам места, как будет происходить оценка уровня доступности приложений и сколько времени это займёт. Дополнительно, озвучили самые часто встречающиеся проблемы, которые встретились нам в ходе сравнительного исследования доступности банковских приложений на iOS в 2018 году.
Банки, участвующие в рейтинге
Во время собрания и после него нам задавали много уточняющих вопросов, связанных с проблемами доступности. Мы поняли, что некоторые проблемы достаточно просты для понимания, а некоторые — нет. В этой статье мы расскажем о тех проблемах, к которым возникло больше всего вопросов, а также предложим пути их решения. Сразу скажу, что эти решения — не единственные, поэтому вы можете придумать другие. Главное, чтобы проблемы были решены, а пользователям было удобно.
Сложный или долгий доступ к элементам управления
Эта проблема актуальна только для пользователей экранного диктора. Принцип работы экранного диктора достаточно прост: он зачитывает все элементы, находящиеся на экране. Чтобы диктор корректно озвучил элемент, у него должны быть определены название, тип и состояние (если имеется).
Бинбанк, правильное озвучивание недоступной кнопки «Вход»
В зависимости от своих возможностей и навыков владения устройствами пользователи могут изучать содержимое экрана разными способами. Некоторые люди различают цветовые пятна и на основе этого могут сделать вывод о расположении элементов на экране, после чего установить фокус экранного диктора на конкретный элемент. Другие прослушивают содержимое экрана в режиме сканирования, т.е. экранный диктор озвучивает им всё, что есть на экране, по порядку, начиная с левого верхнего угла. Тогда возникает следующая проблема: если на экране расположено очень много элементов, доступ к целевому может занять продолжительное время.
Например, если в приложении используется нижнее меню, экранный диктор будет сначала зачитывать всё содержимое страницы, которое в некоторых случаях может быть очень большим. История операций может зачитываться бесконечно, и экранный диктор никогда не перейдёт к озвучке нижнего меню.
Сбербанк, главная страница авторизованной зоны. Для доступа к нижнему меню требуется преодолеть 18 элементов.
Экранный диктор имеет несколько режимов озвучивания страницы. Один из них — озвучивание элементов определенного типа. Это нужно для того, чтобы пользователь мог быстро пройтись по странице и понять что на ней можно сделать.
Например, если диктор озвучит все верхнеуровневые заголовки, пользователь сможет сделать вывод, что на странице присутствуют разделы «Переводы» и «Платежи».
Сбербанк. Страница «Платежи и переводы» с разделами «Платежи» и «Переводы», которые озвучиваются как заголовки
Бывает, что элементы на странице определены неправильно, что лишает пользователя возможности быстрой навигации по странице средствами экранного диктора.
Альфа-банк. Страница «Платежи и переводы» с разделами «Платежи» и «Переводы», которые озвучиваются как обычный текст
Рекомендации
-
Для каждой страницы можно задать последовательность озвучивания элементов. Если вы используете нижнее меню, она должна быть такая: Шапка страницы → Нижнее меню → Содержимое страницы.
-
Контент страницы должен быть поделен на логические блоки. Каждый блок должен быть отделен от другого заголовком соответствующего уровня.
-
Все кнопки, заголовки, ссылки и прочие элементы должны быть определены в соответствии со своим типом. Не допускается эмуляция стандартных элементов управления и оформления другими, визуально похожими на них. Например, кнопка не должна озвучиваться как ссылка, или заголовок первого уровня как заголовок второго.
Возможность выполнения операций только жестами
В приложениях для выполнения некоторых задач (переключение между экранами, взаимодействие с элементами и т.д.) требуются жесты. Часто жест оказывается единственным доступным способом решить конкретную задачу, потому что альтернативных методов взаимодействия в интерфейсе не предусмотрено.
Для управления экранным диктором тоже используются традиционные жесты, однако они интерпретируются по-своему. Например, чтобы прокрутить экран в обычном режиме, нужно провести по нему пальцем вверх или вниз. Но при работе с экранным диктором в iOS этот же жест необходим, чтобы переключаться между режимами озвучивания.Чтобы при работе с экранным диктором выполнить скролл в классическом понимании, нужно свайпнуть экран тремя пальцами, а это может быть сложно. К тому же для взаимодействия с элементами с помощью жестов в большинстве случаев нужно видеть сами элементы, потому что именно их внешний вид и окружение (контекст) даёт пользователю понимание того, как они работают и как с ними можно работать.
| Жест | Интерпретация при работе в обычном режиме | Интерпретация при работе с экранным диктором (VoiceOver на iOS) |
|---|---|---|
| Свайп двумя пальцами вверх или вниз | — | Автоматическое озвучивание всех элементов, находящихся на странице, сверху вниз, слева направо |
| Свайп вправо | Перелистывание страницы или экрана на предыдущий | Переход к озвучиванию следующего элемента |
| Свайп влево | Перелистывание страницы или экрана на следующий | Переход к озвучиванию предыдущего элемента |
| Свайп тремя пальцами в любом направлении | — | Имитация свайпа в обычном режиме (с выключенным экранным диктором) |
| Одиночный тап | Нажатие на элемент | Озвучивание элемента, расположенного на месте тапа |
| Двойной тап | — | Нажатие на элемент в фокусе |
| Перетаскивание пальца по экрану | Перемещает элементы | Озвучивает все элементы, попадающие под палец |
ВТБ, экран просмотра карты. Для переключения между картами требуется сделать свайп влево. При работе с экранным диктором такой жест будет интерпретирован как переход к озвучиванию предыдущего элемента
Управление жестами может быть затруднительно не только для пользователей экранного диктора, но и для людей с моторными нарушениями. Например, если у пользователя тремор рук или отсутствуют пальцы, жесты растягиваний, перетягиваний, долгих нажатий и т.д. будут невыполнимы.
Мы всегда говорим, что проблемы доступности на самом деле покрывают гораздо большую аудиторию, чем только люди с инвалидностью. Жестами, например, неудобно пользоваться пожилым людям, потому что этот паттерн им непривычен, а ещё затруднения испытывают люди с маленькими детьми — попробуйте держа в одной руке телефон, а в другой ребёнка, приблизить какую-нибудь карту или перетащить элемент из одного угла экрана в другой.
Юникредит, карта с банкоматами. Взаимодействовать с картой можно только с помощью жеста растягивания
Рекомендации
Для всех действий, выполняемых с помощью жестов, нужно по возможности предусмотреть альтернативные способы выполнения. В случае приближения карты это могут быть кнопки «плюс» и «минус», увеличивающие или уменьшающие масштаб карты соответственно. Для длинных списков можно сделать пагинацию.
Элементов, управляемых сложными жестами, такими как перетаскивания, лучше избегать в принципе, поскольку пользователям сложно обнаружить, как взаимодействовать с ними, и также тяжело запомнить новое поведение.
Использование изображения текста
В некоторых случаях информация, важная для пользователя, представлена не текстовым блоком, а изображением, на котором текст нарисован так же, как другие графические элементы. Эта проблема, как и многие другие проблемы, возникающие при работе с ассистивными технологиями, незаметна глазу. Однако экранный диктор в большинстве программ и приложений озвучивает только тип элемента «Изображение», не объясняя что на нём изображено.
Русский стандарт, главный экран неавторизованной зоны. Баннер «Управляйте своим бонусным…» озвучивается как «Изображение», поэтому пользователи экранного диктора не смогут узнать о предложении банка
Рекомендации
-
По возможности текст должен быть оформлен как текстовый блок, чтобы экранный диктор смог его озвучить. Если такое решение недопустимо, для каждой картинки можно задать описание (alt) в коде, в котором нужно передать смысл картинки.
-
Если изображение используется исключительно в декоративных целях, её лучше скрыть от диктора, чтобы не увеличивать время, требующееся пользователю на выполнение своих задач.
Отсутствует автоматическое переключение фокуса
При появлении на экране модального окна или при открытии вкладки фокус экранного диктора должен автоматически переключаться на их содержимое. Иначе экранный диктор продолжает зачитывать находящиеся на предыдущем экране элементы, и только после этого переходит к озвучиванию нового содержимого. Например, в случае с историей операций это может привести к тому, что диктор будет зачитывать её бесконечно и никогда не перейдет к модальному окну.
Телекард (Газпромбанк), экран с историей операций. По нажатию на операцию открывается модальное окно с её подробностями, но фокус не устанавливается на него автоматически. Экранный диктор продолжает зачитывать историю и переходит к подробностям операции только после того, как в истории закончатся записи
С системными уведомлениями такой проблемы не возникает, поскольку экранные дикторы без внешнего вмешательства сами устанавливают на них фокус.
Рекомендации
Автоматически устанавливать фокус на контент вкладок, модальных окон, панелей или клавиатуру при их появлении на экране. Кроме того, нужно предусмотреть возможность закрыть этот элемент и вернуться к прослушиванию предыдущего экрана.
Некорректная вёрстка составного элемента управления
Если для вёрстки элементов приложения используются слои, или элементы в коде объединены, хотя визуально и логически они разные, экранный диктор будет их озвучивать так, как это указано в коде. Это может привести к тому, что пользователь в лучшем случае сформирует ошибочное представление о содержимом страницы, а в худшем не сможет понять, что на ней находится.
ВТБ, просмотр информации о банкомате. Блок с выдаваемыми и принимаемыми валютами озвучивается как «Выдаёт принимает знак рубля знак рубля»
Райффайзен, главная страница авторизованной зоны. Кнопки, переключающие разделы, озвучиваются как «Кнопка, кнопка, кнопка, кнопка, главная, оплатить и перевести, пополнить, обменять»
Рекомендации
Объекты, являющиеся одним элементом управления, должны быть сверстаны таким образом, чтобы фокус устанавливался не на отдельные их части, а на весь элемент управления целиком.
Заключение
Мы разобрали некоторые важные, но неочевидные проблемы, возникающие при работе экранного диктора. Надеемся, что наши советы будут вам полезны и помогут вам сделать свои продукты доступнее.
Эта статья была посвящена банковским приложениям, однако мы считаем, что о доступности стоит задуматься представителям всех сфер бизнеса. Высокий уровень доступности цифрового продукта — показатель высокого уровня социальной зрелости и культуры разработки в компании. Если хотите сделать ваш продукт доступнее — напишите нам на info@usabilitylab.ru. Мы проведем аудит доступности вашего интерфейса, поможем грамотно поставить задачу разработчикам и включить требования по доступности в ТЗ.
