Доступность

Как Android, так и iOS предоставляют API для интеграции приложений с технологиями поддержки пользователей, такими как встроенные программы чтения с экрана VoiceOver (iOS) и TalkBack (Android). React Native имеет дополнительные API, которые позволяют вашему приложению учитывать всех пользователей.

Android и iOS несколько различаются в своих подходах, поэтому реализации React Native могут отличаться в зависимости от платформы.

Свойства доступности

accessible

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

В Android свойство accessible={true} для react-native View будет переведено в нативное focusable={true}.

<View accessible={true}>
  <Text>text one</Text>
  <Text>text two</Text>
</View>

В приведенном выше примере мы не можем получить фокус доступности отдельно на «текст один» и «текст два». Вместо этого мы получаем фокус на родительском виджете со свойством «доступность».

accessibilityLabel

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

Для использования задайте свойство accessibilityLabel настраиваемой строкой для вашего View, Text или Touchable:

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Tap me!"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>

В приведенном выше примере значение accessibilityLabel для элемента TouchableOpacity будет по умолчанию «Нажми меня!». Метка формируется путём конкатенации всех дочерних узлов Text, разделённых пробелами.

accessibilityLabelledBy

Android

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

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput
    accessibilityLabel="input"
    accessibilityLabelledBy="formLabel"
  />
</View>

В приведенном выше примере, при фокусировке на TextInput, программа чтения с экрана объявляет Input, Edit Box for Label for Input Field.

accessibilityHint

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

Для использования задайте свойство accessibilityHint настраиваемой строкой для вашего View, Text или Touchable:

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Go back"
  accessibilityHint="Navigates to the previous screen"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Back</Text>
  </View>
</TouchableOpacity>

В приведенном выше примере VoiceOver прочтет подсказку после метки, если у пользователя включены подсказки в настройках VoiceOver устройства. Подробнее о рекомендациях для accessibilityHint см. в документации разработчика iOS.

В приведенном выше примере TalkBack прочтет подсказку после метки. В настоящее время подсказки отключить на Android нельзя.

accessibilityLanguage

iOS

Используя свойство accessibilityLanguage, программа чтения с экрана поймет, какой язык использовать при чтении метки, значения и подсказки элемента. Указанная строка значения должна соответствовать спецификации BCP 47.

<View
  accessible={true}
  accessibilityLabel="Pizza"
  accessibilityLanguage="it-IT">
  <Text>🍕</Text>
</View>

accessibilityIgnoresInvertColors

iOS

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

accessibilityLiveRegion

Android

Когда компоненты динамически изменяются, мы хотим, чтобы TalkBack уведомлял конечного пользователя. Это становится возможным благодаря свойству accessibilityLiveRegion. Его можно установить в значения none, polite и assertive:

• none Услуги доступности не должны объявлять изменения в этом виджете.
• polite Услуги доступности должны объявлять изменения в этом виджете.
• assertive Услуги доступности должны прервать текущую речь, чтобы немедленно объявить изменения в этом виджете.

<TouchableWithoutFeedback onPress={addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
  Clicked {count} times
</Text>

В приведенном выше примере метод addOne изменяет переменную состояния count. Как только конечный пользователь нажмет TouchableWithoutFeedback, TalkBack прочтет текст в виджете Text из-за его свойства accessibilityLiveRegion="polite".

accessibilityRole

accessibilityRole сообщает пользователю вспомогательной технологии назначение компонента.

accessibilityRole может быть одним из следующих:

• adjustable Используется, когда элемент может быть «отрегулирован» (например, ползунок).
• alert Используется, когда элемент содержит важную информацию для отображения пользователю.
• button Используется, когда элемент должен обрабатываться как кнопка.
• checkbox Используется, когда элемент представляет собой флажок, который может быть отмечен, снят с отметки или иметь смешанное состояние.
• combobox Используется, когда элемент представляет собой раскрывающийся список, позволяющий пользователю выбрать среди нескольких вариантов.
• header Используется, когда элемент выполняет функцию заголовка раздела контента (например, заголовок строки навигации).
• image Используется, когда элемент должен обрабатываться как изображение. Может использоваться совместно с кнопкой или ссылкой, например.
• imagebutton Используется, когда элемент должен обрабатываться как кнопка, а также является изображением.
• keyboardkey Используется, когда элемент выполняет функцию клавиши клавиатуры.
• link Используется, когда элемент должен обрабатываться как ссылка.
• menu Используется, когда компонент является меню с выбором.
• menubar Используется, когда компонент является контейнером нескольких меню.
• menuitem Используется для представления элемента в меню.
• none Используется, когда элемент не имеет роли.
• progressbar Используется для представления компонента, который показывает прогресс выполнения задачи.
• radio Используется для представления радиокнопки.
• radiogroup Используется для представления группы радиокнопок.
• scrollbar Используется для представления полосы прокрутки.
• search Используется, когда элемент текстового поля также должен обрабатываться как поле поиска.
• spinbutton Используется для представления кнопки, открывающей список вариантов.
• summary Используется, когда элемент может использоваться для быстрого отображения текущего состояния приложения при его первом запуске.
• switch Используется для представления переключателя, который может быть включен или выключен.
• tab Используется для представления вкладки.
• tablist Используется для представления списка вкладок.
• text Используется, когда элемент должен обрабатываться как статический текст, который не может изменяться.
• timer Используется для представления таймера.
• togglebutton Используется для представления переключающейся кнопки. Следует использовать со свойством accessibilityState checked для указания, включена ли кнопка или выключена.
• toolbar Используется для представления панели инструментов (контейнера кнопок или компонентов действий).

accessibilityState

Описывает текущее состояние компонента пользователю вспомогательной технологии.

accessibilityState — это объект. Он содержит следующие поля:

Для использования установите значение accessibilityState в объект со специфическим определением.

accessibilityValue

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

accessibilityValue — это объект. Он содержит следующие поля:

accessibilityViewIsModal

iOS

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

Например, в окне, содержащем соседние виджеты A и B, установка свойства accessibilityViewIsModal в true на виджете B приводит к тому, что VoiceOver игнорирует элементы в виджете A. С другой стороны, если виджет B содержит дочерний виджет C и вы установите accessibilityViewIsModal в true на виджете C, VoiceOver не игнорирует элементы в виджете A.

accessibilityElementsHidden

iOS

Булево значение, указывающее, скрыты ли элементы доступности, содержащиеся в этом элементе доступности.

Например, в окне, содержащем соседние виджеты A и B, установка свойства accessibilityElementsHidden в true на виджете B приводит к тому, что VoiceOver игнорирует элементы в виджете B. Это аналогично свойству Android importantForAccessibility="no-hide-descendants".

importantForAccessibility

Android

В случае двух перекрывающихся компонентов пользовательского интерфейса с одним родителем, фокус по умолчанию на доступность может иметь непредсказуемое поведение. Свойство importantForAccessibility решит эту проблему, контролируя, вызывает ли представление события доступности и сообщается ли оно службам доступности. Его можно установить на значения auto, yes, no и no-hide-descendants (последнее значение заставит службы доступности игнорировать компонент и все его дочерние элементы).

<View style={styles.container}>
  <View
    style={[styles.layout, { backgroundColor: 'green' }]}
    importantForAccessibility="yes">
    <Text>First layout</Text>
  </View>
  <View
    style={[styles.layout, { backgroundColor: 'yellow' }]}
    importantForAccessibility="no-hide-descendants">
    <Text>Second layout</Text>
  </View>
</View>

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

onAccessibilityEscape

iOS

Назначьте это свойство пользовательской функции, которая будет вызываться, когда кто-то выполнит жест «escape» — это жест в форме буквы «Z» двумя пальцами. Функция escape должна перемещаться по иерархии пользовательского интерфейса вверх. Это может означать перемещение вверх или назад в иерархии навигации или закрытие модального пользовательского интерфейса. Если выбранный элемент не имеет функции onAccessibilityEscape, система попытается перейти по иерархии представления до тех пор, пока не найдёт представление, которое имеет её, или выдаст сообщение об ошибке, чтобы указать на невозможность найти такое.

onAccessibilityTap

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

onMagicTap

iOS

Назначьте это свойство пользовательской функции, которая будет вызываться, когда кто-то выполнит жест «magic tap» — это двойное нажатие двумя пальцами. Функция magic tap должна выполнять наиболее релевантное действие, которое пользователь может совершить с компонентом. В приложении «Телефон» на iPhone двойное нажатие двумя пальцами отвечает на звонок или завершает текущий звонок. Если выбранный элемент не имеет функции onMagicTap, система будет проходить по иерархии представлений до тех пор, пока не найдёт представление, которое имеет её.

Действия доступности

Действия доступности позволяют вспомогательной технологии программно вызывать действия компонента. Для поддержки действий доступности компонент должен выполнить два действия:

• Определить список поддерживаемых действий через свойство accessibilityActions.
• Реализовать функцию onAccessibilityAction для обработки запросов на выполнение действий.

Свойство accessibilityActions должно содержать список объектов действий. Каждый объект действия должен содержать следующие поля:

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

При добавлении поддержки стандартных действий name должно быть одним из следующих:

• 'magicTap' — только для iOS — Когда фокус VoiceOver находится на или внутри компонента, пользователь дважды нажал двумя пальцами.
• 'escape' — только для iOS — Когда фокус VoiceOver находится на или внутри компонента, пользователь выполнил жест прокрутки двумя пальцами (влево, вправо, влево).
• 'activate' — Активировать компонент. Обычно это должно выполнять то же действие, что и при нажатии или щелчке по компоненту без использования вспомогательной технологии. Это генерируется, когда пользователь, использующий средство чтения экрана, дважды нажимает на компонент.
• 'increment' — Увеличить значение настраиваемого компонента. На iOS VoiceOver генерирует это действие, когда у компонента роль 'adjustable', пользователь помещает фокус на него и проводит пальцем вверх. На Android TalkBack генерирует это действие, когда пользователь помещает фокус доступности на компонент и нажимает кнопку увеличения громкости.
• 'decrement' — Уменьшить значение настраиваемого компонента. На iOS VoiceOver генерирует это действие, когда у компонента роль 'adjustable', пользователь помещает фокус на него и проводит пальцем вниз. На Android TalkBack генерирует это действие, когда пользователь помещает фокус доступности на компонент и нажимает кнопку уменьшения громкости.
• 'longpress' — только для Android — Это действие генерируется, когда пользователь помещает фокус доступности на компонент и дважды нажимает и удерживает один палец на экране. Обычно это должно выполнять то же действие, что и при удержании одного пальца на компоненте без использования вспомогательной технологии.

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

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

<View
  accessible={true}
  accessibilityActions={[
    { name: 'cut', label: 'cut' },
    { name: 'copy', label: 'copy' },
    { name: 'paste', label: 'paste' }
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
      case 'paste':
        Alert.alert('Alert', 'paste action success');
        break;
    }
  }}
/>

Проверка, включён ли средство чтения экрана

API AccessibilityInfo позволяет определить, активен ли в настоящее время средство чтения экрана. Подробности см. в документации AccessibilityInfo.

Отправка событий доступности

Android

Иногда бывает полезно инициировать событие доступности на компоненте пользовательского интерфейса (например, при появлении пользовательского представления на экране или установке фокуса доступности на представление). Модуль UIManager предоставляет метод «sendAccessibilityEvent» для этой цели. Он принимает два аргумента: тег представления и тип события. Поддерживаемые типы событий — typeWindowStateChanged, typeViewFocused и typeViewClicked.

import {
  Platform,
  UIManager,
  findNodeHandle
} from 'react-native';

if (Platform.OS === 'android') {
  UIManager.sendAccessibilityEvent(
    findNodeHandle(this),
    UIManager.AccessibilityEventTypes.typeViewFocused
  );
}

Проверка поддержки TalkBack

Android

Чтобы включить TalkBack, перейдите в приложение «Настройки» на вашем устройстве Android или эмуляторе. Нажмите Доступность, затем TalkBack. Переключите переключатель «Использовать службу», чтобы включить или отключить его.

В Android-эмуляторах TalkBack по умолчанию не установлен. Вы можете установить TalkBack на свой эмулятор через Google Play Маркет. Убедитесь, что вы выбрали эмулятор с установленным Google Play Маркетом. Они доступны в Android Studio.

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

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

Кроме того, если вы предпочитаете, вы можете переключать TalkBack через командную строку с помощью:

# disable
adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService

# enable
adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService

Проверка поддержки VoiceOver

iOS

Чтобы включить VoiceOver, перейдите в приложение «Настройки» на вашем iOS-устройстве (его нет в эмуляторе). Нажмите Общие, затем Доступность. Там вы найдете множество инструментов, которые люди используют для повышения удобства использования своих устройств, таких как увеличение шрифта, увеличение контрастности и VoiceOver.

Чтобы включить VoiceOver, коснитесь VoiceOver в разделе «Зрение» и переключите переключатель, который появляется вверху.

В самом низу настроек доступности есть «Сочетание клавиш доступности». Вы можете использовать его для переключения VoiceOver, трижды нажав кнопку «Домой».

Дополнительные ресурсы

• Обеспечение доступности приложений React Native