RN accessibility

Basic attributes

• Accessible Accessible elements

• AccessibilityLabel Indicates an accessible label

• AccessibilityHint Accessibility hints

instructions

• By default, all clickable components (TouchableSeries components, etc.) are barrier-free elements
• whenTextA parent element cannot be individually selected when setting accessibility attributesTextElements.
• When settingaccessibilityLabel 或 accessibilityHintWhen, direct children will not be readTextElement text content
• TouchableSeries of components containing text broadcast (accessibilityLabel 、 accessibilityHint,Text,Fonts Icon), if writtenonPressThe method will contain a default prompt:Click twice to activate.

Example:

TSX // font Icon with default tip <TouchableOpacity onPress={() => {}} > <Icon SVG ={false} type='shopping-cart' size={24} <TouchableOpacity onPress={() => {}} > <Icon SVG ={true} type='shopping-cart' size={24} color='#CC342C' /> </TouchableOpacity> ```Copy the code

• AccessibilityLiveRegion Frictionless Dynamic Regions (Android)

  When a component changes dynamically, the secondary service performs operations. For details, see the attribute value description below

• AccessibilityRole Barrier-free role

  Accessibility roles communicate the purpose of components to users of assistive technologies. If you set the corresponding role, the default role-related prompt information will be added for the corresponding component. For details, see the attribute value description below

• AccessibilityState Accessibility status

  Describes the current state of the component to users of assistive technologies. The accessibilityState value is an object.

• AccessibilityValue accessibilityValue

  Represents the current value of the component. It can be a textual description of component values, or for scope-based components such as sliders and progress bars, it can contain scoping information (minimum, current, and maximum). AccessibilityValue Is an object.

• accessibilityViewIsModal (ios)

  Whether VoiceOver should ignore elements in the receiver sibling view

  // View B elements will be ignored by VoiceOver
  <View>
    <View accessibilityViewIsModal={true}>
      <text>A</text>
    <View>
    <View>
      <text>B</text>
    <View>
  </View>
  Copy the code

• Priority of accessibility functions

  • importantForAccessibility(Android) [string]
  • accessibilityElementsHidden(ios) 【 Boolean 】

instructions

1. You can control whether a view triggers a accessibility event and reports it to a helper service (that is, whether the helper service ignores the element).
2. AndroidThe value can be set toauto.yes.no 和 no-hide-descendants(The last value forces the secondary service to ignore the current component and all its children)

• OnAccessibilityEscape Gesture Event (ios)

  An escape gesture (that is, a two-finger Z gesture) fires a function that walks up the element or page from the current page until it finds the location of the element bound to the onAccessibilityEscape method

• OnAccessibilityTap Accessibility element click events

  Called when the user double-clicks an already selected accessibility element

• OnMagicTap (ios) Double finger double-click event

  Called when the user double-clicks an already selected accessibility element

• Accessibility Actions

  Components need to define the following two properties :(platform limited)

  1. accessibilityActionsthroughaccessibilityActionsProperty defines the list of actions it supports
  2. onAccessibilityActionTo implement aonAccessibilityActionFunction to process action requests

<View
  accessible={true}
  // Operate on the arraylist
  accessibilityActions={[ 
    { name: 'magicTap'.label: 'magicTap' },
    { name: 'longpress'.label: 'longpress'}}]// Process the action request function.
  onAccessibilityAction={(event) = > { 
    switch (event.nativeEvent.actionName) {
      case 'magicTap':
        Alert.alert('Alert'.'magicTap action success');
        break;
      case 'longpress':
        Alert.alert('Alert'.'longpress action success');
        break;
    }
  }}
/>
Copy the code

Attribute value Description

AccessibilityLiveRegion Frictionless Dynamic Regions (Android)

• The None helper service should not alert the user to changes in the current view.
• The artificial service should alert the user to changes in the current view.
• The secondary service should immediately interrupt the current voice session, alerting the user to the change in the current view.

AccessibilityRole Barrier-free role

• Adjustable Is used when the element can be “adjusted” (for example, a slider).
• Alert is used when an element contains important text to present to the user.
• Button is used when the element should be treated as a button.
• Checkbox Is used when an element represents a checkbox that can be checked, unchecked, or have mixed checked status.
• Combobox is used when an element represents a combobox, allowing the user to select among multiple options.
• Header Is used when an element acts as the title of a content part, such as the title of a navigation bar.
• Image is used when the element should be treated as an image. For example, it can be used in combination with buttons or links.
• Imagebutton is used when the element should be treated as a button and also as an image.
• Keyboardkey is used when an element is used as a keyboardkey.
• Link is used when an element should be treated as a link.
• Menu Is used when the component is a menu of options.
• Menubar is used when a component is a container for multiple menus.
• Menuitem is used to represent items in a menu.
• None is used when the element has no role.
• Progressbars are used to represent components that indicate the progress of a task.
• Radio is used for radio buttons.
• Radiogroup is used to represent a set of radio buttons.
• Scrollbar is used to represent the scrollbar.
• Search is used when text field elements should also be considered search fields.
• The spinbutton is used to represent a button that opens a list of options.
• Summary is used when an element can be used to provide a quick summary of the current conditions in the application when it is first started.
• Switch Indicates the switch that can be turned on or off.
• TAB is used to represent a TAB.
• Tablist is used to represent a list of tabs.
• Text is used when the element should be treated as static text that cannot be changed.
• Timer indicates a timer.
• The toolbar is used to represent a toolbar (a container that acts on a button or component).

AccessibilityState Accessibility status

• Disabled indicates whether the element is disabled.
• Selected indicates whether optional elements are currently selected.
• checkedIndicates the state of the element that can be checked. This field can take a Boolean value ormixedString to represent mixed checkboxes.
• Busy indicates whether the element is currently busy.
• Expanded indicates whether an expandable element is currently expanded or collapsed

AccessibilityValue accessibilityValue

• minThe minimum value of the component range,nowThis parameter must be set after being set
• maxThe maximum value of the component range,nowThis parameter must be set after being set
• Now The current value of the component scope
• Text Specifies the text description of the component value

AccessibilityActions (name) Barrier-free operations

• magicTap(onlyios) whenVoiceOverWhen the focus is on or within the component, the user double-clicks with two fingers.
• escape(onlyios) whenVoiceOverWhen the focus is on or within the component, the user performs a two-finger scrub gesture (left, right, left).
• Activate Activates the component. In general, this should perform the same actions as when the user touches or clicks a component without assistive technology. This is generated when the screen reader user double-clicks the component.
• incrementAdd an adjustable component.
  • iniosWhen the component has an “adjustable” role and the user focuses on it and slides up,VoiceOverThis operation is generated.
  • inAndroidWhen the user puts the accessibility focus on the component and presses the volume up button,TalkBackThis operation is generated.
• Decrement reduces one adjustable component.
• iniosWhen the component hasCan be adjustedAnd the user puts focus on it and swipes down,VoiceOverThis operation is generated.
• inAndroidWhen the user puts the accessibility focus on the component and presses the volume down button,TalkBackThis operation is generated.
• longpress(onlyAndroidThis action is generated when the user puts accessibility focus on the component and double-clicks it and holds down the screen with one finger. In general, this should perform the same action as when the user holds down a finger on the component without using assistive technology. labelFields are optional for standard operations and are not typically used by assistive technologies. For a custom operation, it is a localized string that contains a description of the operation to be presented to the user.

AccessibilityInfo

AccessibilityInfo Is used to query the current status of screen readers and monitor their status changes

• addEventListener()

Add an event listener function. For the supported event types, see the following Listener Event Types

static addEventListener(eventName, handler)
Copy the code

• setAccessibilityFocus()

Sets the focus of the screen reader software to an element that needs to be accessible

static setAccessibilityFocus(reactTag)
Copy the code

Example:

const reactTag = findNodeHandle(elementRef.current);
// reactTag is of type number and identifies the element index
if (reactTag) {
    AccessibilityInfo.setAccessibilityFocus(reactTag);
}
Copy the code

• announceForAccessibility()

Sends a string to the reader screen to be read aloud

static announceForAccessibility(announcement)
Copy the code

• removeEventListener()

Removes a listener function

static removeEventListener(eventName, handler)
Copy the code

• IsBoldTextEnabled () (ios)

Query whether bold text is enabled

static isBoldTextEnabled()
Copy the code

• IsGrayscaleEnabled () (ios)

Query whether gray scale is enabled

static isGrayscaleEnabled()
Copy the code

• IsInvertColorsEnabled () (ios)

Query whether the color reversal function is enabled

static isInvertColorsEnabled()
Copy the code

• isReduceMotionEnabled()

Queries whether reduced motion is currently enabled

static isReduceMotionEnabled()
Copy the code

• IsReduceTransparencyEnabled () (ios)

Query whether transparency reduction is currently enabled

static isReduceTransparencyEnabled()
Copy the code

• isScreenReaderEnabled()

Queries whether the screen reader application is currently enabled, returns a promise, and resolves to a Boolean

static isScreenReaderEnabled()
Copy the code

Listening event type

• boldTextChanged(onlyiosTriggered when the state of the bold text switch changes. The argument to the event handler is a Boolean value. Boolean true when bold text is enabled, false otherwise.
• grayscaleChanged(onlyios) triggered when the state of gray switching changes. The argument to the event handler is a Boolean value. Boolean true when grayscale is enabled, false otherwise.
• invertColorsChanged(onlyiosTriggered when the state of the reverse color switch changes. The argument to the event handler is a Boolean value. Boolean true when reverse color is enabled, false otherwise.
• ReduceMotionChanged Is triggered when reducing the state change of exercise switching. The argument to the event handler is a Boolean value. The Boolean value is true when reducing motion is enabled (or when the transition animation scale in the developer option is animation off) and false otherwise.
• ScreenReaderChanged Triggers read when the screen application status changes. The parameter of dynamic listener function is Boolean, true on state, false vice versa.
• ReduceTransparencyChanged * * * * (onlyiosTriggered when the state of the lower transparency toggle changes. The argument to the event handler is a Boolean value. Boolean true when Reduce transparency is enabled, false otherwise.
• announcementFinished(onlyios) triggered when the screen reader finishes reading once. The argument passed to the listener is a dictionary containing the following two fields:
• Announcement Specifies the string read by the screen reader.
• Whether the reading was completed successfully.

Monitor the status change of the screen reading application

import React, { useState } from 'react';
import { AccessibilityInfo } from 'react-native';

const [accessibilityEnabled, setAccessibilityEnabled] = useState(false); // Whether the screen reader is enabled. The default value is false

useEffect(() = > {
  AccessibilityInfo.fetch().done((enabled) = > {
    setAccessibilityEnabled(enabled);
  });
}, [])

useEffect(() = > {
  // Listen on the edge of the screen reading application
	AccessibilityInfo.addEventListener('change', handleAccessibilityChange);
  
  return () = > {
    // Remove listens for events before component destruction
		AccessibilityInfo.removeEventListener('change', handleAccessibilityChange); }})// Listen on events
const handleAccessibilityChange = (enabled) = > {
	setAccessibilityEnabled(enabled);
}
Copy the code

Android

Slide up and down to switch operation types

How to enable accessibility Services

Android (TalkBack)

1. Please open the Settings, enter barrier-free in the search bar at the top, open barrier-free shortcut on the barrier-free page, and use the switch when the screen is locked.
2. On the lock screen or desktop, press the volume up button and the volume down button for more than 3 seconds to automatically turn on the barrier-free mode (the same operation can also be turned off).

IOS (VoiceOver)

1. Open the Settings option on the iOS device. Click On General, and then go to accessibility options to open narrator.

2. Click VoiceOver under the visual menu and turn the switch on to enable it.

3. At the very bottom of accessibility, there is an accessibility shortcut that allows you to quickly turn off or on the VoiceOver tool by clicking the Home button three times.

References: Official Documents Chinese official documents