Гайд по цифровой доступности Andoroid-приложений

Android:

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

1
1.1

Изучите работу TalkBack

TalkBack — функция чтения контента с экрана устройств на Android. Благодаря ей пользователь может управлять устройством, используя речь и клавиатуру.

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

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

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

Изучите руководства о доступной Android-разработке

В гайде «Практик доступности» собраны самые важные рекомендации по доступности Android-приложений.

Для более детального погружения посмотрите гайдлайн доступности Android, Material Design и Google Accessibility Help.

1.3

Указывайте доступность элемента для TalkBack

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

В этом случае используйте параметр importantForAccessibility:

  • Параметр importantForAccessibility = yes — элемент доступен для TalkBack и имеет фокус;
  • Параметр importantForAccessibility = no — элемент недоступен для TalkBack и не имеет фокус.
1.4

Подписывайте названия элементов

Подписывайте все интерактивные элементы в свойстве contentDescription. Так TalkBack озвучит пользователю правильное название элементов.

Если у элемента есть и текстовое содержимое и сontentDescription, TalkBack отдаст приоритет сontentDescription и озвучит пользователю то, что указано в нем.

Иконка Назад в фокусе
  • XML
<ImageButton
    android:contentDescription = "Назад"/>

TalkBack скажет:

Назад, кнопка

1.5

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

Старайтесь называть элемент одним словом или короткой фразой: «Добавить», «Удалить» или «Добавить событие», «Удалить фото», чтобы экономить время пользователя.

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

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

1.6

Указывайте тип View

Указанные типы у View помогают TalkBack идентифицировать элемент, понять, как с ним взаимодействовать и определить, какую информацию в итоге зачитывать пользователю.

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

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

1.7

Указывайте состояние элемента

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

TalkBack определяет состояние элемента из атрибутов View. Чтобы он озвучил пользователю, что элемент не активен, задайте ему свойство isEnabled со значением false в AccessibilityNodeInfo.

Чтобы TalkBack сказал пользователю, что текущий элемент выбран, задавайте ему свойство setCheckable и setChecked в AccessibilityNodeInfo.

1.8

Управляйте TalkBack с помощью оповещений

Чтобы TalkBack сообщал об изменениях на экране, используйте атрибут accessibilityLiveRegiona со значениями polite или assertive.

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

2.1

Проверьте порядок фокуса

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

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

2.2

Размечайте заголовки

Задавайте заголовкам атрибут accessibilityHeading со значением true. Благодаря этому у интерфейса появятся структура и смысловые блоки. TalkBack добавит элементам слово «заголовок», а пользователь сможет настроить элементы управления чтением и перемещаться по заголовкам вертикальными свайпами.

Иконка Назад в фокусе

TalkBack скажет:

Мои платежи, заголовок

2.3

Увеличивайте рамку фокуса

TalkBack позволяет перемещать фокус с помощью касания: пользователь водит пальцем по экрану, а TalkBack озвучивает элементы.

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

Объединяйте элементы и увеличивайте рамку фокуса с помощью свойства screenReaderFocusable.

ПРАВИЛЬНО

Найти кнопку пальцем легко благодаря большой области нажатия

НЕПРАВИЛЬНО

Найти кнопку пальцем сложно из-за ее маленькой области нажатия

Кнопка на всю ширину экрана телефона

TalkBack скажет:

Мобильный телефон, кнопка

Кнопка с маленькой областью нажатия

TalkBack скажет:

Мобильный телефон

2.4

Группируйте элементы

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

Объединить элементы можно с помощью атрибута focusable со значениями «true» или «false». Скрыть — с помощью параметра importantForAccessibility со значением «no».

ПРАВИЛЬНО

Блок сгруппирован, перейти на экран оформления кредита можно одним тапом

НЕПРАВИЛЬНО

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

Заголовок описание и кнопка объединены

TalkBack скажет:

Кредиты, Оформите заявку на кредит по выгодным ставкам за 5 минут, кнопка

Заголовок описание и кнопка по раздельности

TalkBack скажет:

Кредиты

Android:

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

3
3.1

Скрывайте неважный контент от TalkBack

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

3.2

Делайте важные изображения доступными для TalkBack

Как правило, в приложениях картинки не несут ценного смысла. Поэтому они по умолчанию скрыты от TalkBack.

Но иногда бывает важно сообщить пользователю о наличии изображений. В этом случае нужно добавить imageView свойство importantForAccessibility со значением yes и описание в contentDescription.

Ванная. Раковина, зеркало и ванна
  • XML
<ImageView
    android:importantForAccessibility="Ванная. 
    Раковина, зеркало и ванна"/>

TalkBack скажет:

Ванная. Раковина, зеркало и ванна, изображение

3.3

Подписывайте поля ввода

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

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

Поле ввода телефона

TalkBack скажет:

+7 (999) 5, окно редактирования, введите номер

3.4

Используйте подсказки

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

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

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

Например, действие ACTION_CLICK — это стандартный двойной тап для активации элемента. Если добавить к элементу подсказку, то TalkBack сначала скажет «Нажмите дважды, чтобы» и только потом озвучит то, что вы прописали текстом в коде.

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

3.5

Убедитесь, что у видео со звуком есть субтитры

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

Все, что сказано в видео, должно быть в субтитрах. А все, что написано в субтитрах, должно быть в видео.

3.6

Откажитесь от мерцающего контента

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

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

Android:

Даже если вы учли все нюансы, ошибки все равно могут всплыть. Чтобы сократить количество возможных проблем, проводите отладку кода

4
4.1

Используйте инспектор кода

Сканер доступности в Google Play — инструмент от Google для автоматического аудита доступности приложений.

У него есть много возможностей, которые помогут улучшить доступность приложений. Сканер может:

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

Вручную протестируйте приложение

Убедитесь, что:

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

Гайды доступности