React Native - доступность

React Native - это мобильная разработка, основанная на React, которую мы можем использовать для разработки мобильных приложений.

В этой статье мы рассмотрим, как использовать его для создания приложения с React Native.

Доступность

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

Например, мы можем написать:

import React from 'react';
import { Text, View } from 'react-native';
export default function App() {
  return (
    <View accessible={true}>
      <Text>text one</Text>
      <Text>text two</Text>
    </View>
  );
}

Мы устанавливаем свойство accessible на true, чтобы сделать View доступным.

AccessbilityLabel

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

Например, мы можем написать:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <TouchableOpacity
        accessible={true}
        accessibilityLabel="Tap me!"
        onPress={() => alert('hello world')}>
        <View>
          <Text>Press me!</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

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

Мы также можем добавить опору accessibilityHint, чтобы пользователь мог понять, что делает кнопка.

Например, мы можем написать:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <TouchableOpacity
        accessible={true}
        accessibilityLabel="Tap me!"
        accessibilityHint="Shows alert"
        onPress={() => alert('hello world')}>
        <View>
          <Text>Press me!</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

доступность

Свойство accessibilityLiveRegion доступно только для приложений Android.

Он используется для уведомления пользователя об изменениях компонента.

Возможные значения: 'none', 'polite' и 'assertive'.

'none' означает, что изменения не объявлять.

'polite' означает объявление об изменениях в представлении.

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

Например, мы можем написать:

import React from 'react';
import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <View accessible={true} style={styles.container}>
      <TouchableWithoutFeedback onPress={() => setCount(c => c + 1)}>
        <View>
          <Text>Click me</Text>
        </View>
      </TouchableWithoutFeedback>
      <Text accessibilityLiveRegion="polite">
        Clicked {count} times
      </Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

для добавления компонента Text с опорой accessibilityLiveRegion к компоненту Text.

Теперь будет объявлено об изменениях в тексте этого компонента.

доступность

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

Список возможных значений находится по адресу https://reactnative.dev/docs/accessibility#accessibilityrole.

accessibilityState

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

Это объект, и он может иметь свойства disabled, selected, checked, busy и expanded.

disabled указывает, отключена ли она.

selected указывает, выбрано ли оно.

checked указывает, проверено ли оно.

busy указывает, занят ли он.

expanded указывает, развернут ли он.

Например, мы можем написать:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <Text accessibilityState={{
        disabled: false,
        selected: false,
        checked: false,
        busy: false,
        expanded: false,
      }}>
        hello world
      </Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

для установки значений.

Заключение

Мы можем установить метки доступности для компонентов с помощью React Native, чтобы сделать наше приложение доступным.