Android-разработка

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

Ознакомьтесь с имеющимся руководством. За детальной информацией обратитесь к руководству операционной системы Android.

Следите за корректностью верстки: от нее зависит доступность и правильная работа скринридера.

Проводите автоматизированное тестирование доступности в процессе разработки.

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

Пользователи

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

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

При проектировании учитывайте особенности людей

Нарушение зрения

Слепота, близорукость или дальнозоркость, дальтонизм.

Нарушение слуха

Глухота или тугоухость, звон в ушах.

Нарушение моторики

Дрожание рук, деформация или отсутствие конечностей.

Проблемы восприятия

Дислексия, деменция, депривация сна.

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

Вспомогательные технологии

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

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

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

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

Для взаимодействия с компьютером и смартфоном незрячие люди используют голосовой интерфейс программ экранного доступа. Попробуйте в действии программы экранного доступа (VoiceOver на Маке, VoiceOver на iOS, TalkBack на Android, NVDA или JAWS для Windows) — так вы узнаете, как люди взаимодействуют с интерфейсом и сможете самостоятельно проводить первичное тестирование.

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

В большинстве случаев после секундной паузы скринридер подскажет, как взаимодействовать с этим типом элементов. Например в системе Android, если это что-то кликабельное (кнопка или ссылка), то скринридер озвучит: «Нажмите дважды, чтобы активировать». На заголовке, очевидно, этого не будет — программа скажет: «Заголовок».

Базовые жесты при работе с TalkBack на Android

Активация выбранного объекта.

Двойное нажатие.

Выбор следующего или предыдущего объекта.

Вправо или влево.

Переключение настроек навигации.

Вверх или вниз.

Перейти к первому или последнему объекту на экране.

Вверх, затем вниз или вверх.

Перейти на главный экран.

Вверх, затем влево.

Нажать кнопку «Назад».

Вниз, затем вправо.

Навигация

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

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

Обеспечьте логичный переход фокуса на странице.

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

Плохо: «Доброе утро, Валерия!»

Хорошо: «Доброе утро, Валерия, подождите, идет загрузка».

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

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

Обеспечьте логичный переход фокуса между элементами.

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

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

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

Предоставьте несколько способов поиска содержимого.

WCAG 2.1

Элементы интерфейса

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

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

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

У Васи медленный интернет, поэтому картинки и иконки не загружаются. Для него, как и для Веры, важны подписи в коде.

Старайтесь использовать нативные элементы управления, такие как <button>. Они обладают встроенной доступностью, откликаются на события и обладают семантическими ролями, состояниями и свойствами, которые используются инструментами доступности. Кастомные компоненты интерфейса не всегда обладают встроенной функциональностью, включая доступность. Поэтому при создании таких компонентов надо следить, чтобы они были доступны для пользователей скринридера.

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

У кастомных или более сложных элементов тип элемента может быть определен неверно; тогда необходимо определить тип самостоятельно.

Для управления представлением элемента, его типом и состоянием в проекте используется класс android.support.v4.view. AccessibilityDelegateCompat.

ru/sberbank/mobile/core/view/textinput/RoboTextInputLayout.java

ru/sberbankmobile/Widget/ImageKeyboardView.java

(с виртуальным представлением view)

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

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

Для элементов подпись задается программно с помощью метода setContentDescription(), в xml используется атрибут android:contentDescription.

Недекоративный элемент

<ImageView
android:id="@+id/imageView"
android:contentDescription = "Молодежная карта с подписью Егора Крида "Это мое"/>

Кнопка-иконка

ImageButton imageButton = findViewById(R.id.imageButton);

imageButton.setImageResource (R.drawable.ic_my_location);

imageButton.setContentDescription ("Моё местоположение");

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

Позвонить иконка

ImageView imageView = findViewById(R.id.imageView_call);

imageView.setContentDescription ("Позвонить в банк");

Для текстовых элементов, таких как TextView, в случае если свойство contentDescription не установлено, то TalkBack озвучивает текст, указанный в свойстве text. Если же значения для обоих свойств не заданы, то TalkBack озвучивает: «Без ярлыка».

50 рублей

TextView textView = findViewById(R.id.textView);

textView.setText("50 \u20BD"); // 50 ₽

textView.setContentDescription("50 рублей");

Свойство hint обычно используется для полей ввода при объявлении описания, когда поле ввода не заполнено. Аналог — placeholder в HTML. Нельзя использовать hint для указания общего описания элемента, так как после заполнения поля ввода установленное описание озвучиваться не будет. Программно задается с помощью метода setHint(), в xml используется атрибут android:hint.

EditText loginEditText = findViewById(R.id.editText_login);

loginEditText.setHint("Введите логин");

Если элемент не представляет ценности для пользователя скринридера, его «видимость» для пользователя нужно отключить. Например, если картинка декоративная.

Добавить значение возможно через атрибут XML android:importantForAccessibility и программно с помощью метода setImportantForAccessibility.

android:importantForAccessibility="no"

mImageView.setImportantForAccessibility (View.IMPORTANT_FOR_ACCESSIBILITY_NO);

Подписывайте элементы с одинаковой функциональностью одинаково всегда.

Карта виза

Хорошо: «Тип карты, платежная система, последние 4 цифры, способ оплаты, слово «баланс», озвучка баланса с рублями и копейками, валюта»

Озвучка: Дебетовая Карта, VISA Classic, 4678, бесконтактная, баланс 20900 рублей 80 копеек

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

Плохо: "ЖКХ и домашний телефон. Нажмите, чтобы просмотреть список поставщиков услуг ЖКХ или стационарной связи."

Хорошо: "ЖКХ и домашний телефон."

Следите за раскладкой клавиатуры. Помните, что английская буква C и русская буква С – это 2 абсолютно разных символа. Программа экранного доступа прочитывает символ, исходя из его кода в таблице символов, а не из начертания на экране. Наличие подобных опечаток сильно усложняет работу с текстом с помощью скринридеров незрячим людям. Например, назначая встречу в переговорке 15.C.04 следует даже ради одной буквы переключить раскладку клавиатуры, иначе пользователь программ экранного доступа будет искать переговорку «Эс», а не «Си».

Когда нужно установить один элемент в качестве источника метки для другого элемента, используйте метод setLabelFor(), в xml используется атрибут android:labelFor.

info.setLabelFor(mEditText);

Если на экране в результате действий пользователя появилась какая-то информация, которой до этого не было – пользователь должен об этом узнать. Это может быть появление клавиатуры при активации поля ввода, автоматическая замена символа «8» на «+7» при вводе номера телефона и т. п.

WCAG 2.1

Тестирование

Тестируйте автоматизированно и с пользователями.

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

Автоматизированное тестирование

Быстрая проверка: используйте инструменты для быстрой проверки на частые ошибки — Accessibility Inspector.

Тестирование с незрячими пользователями

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

Убедитесь, что контент воспроизводится в правильно порядке: лейбл до поля, заголовки до контента и т.д.

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

По теме