[React Native] Guide - Trợ năng

Trợ năng của ứng dụng Native (iOS và Android)

Cả iOS và Android đều cung cấp các API để làm cho các ứng dụng có thể tiếp cận được với người khuyết tật. Ngoài ra, cả hai nền tảng cung cấp công nghệ trợ giúp kèm theo, như người đọc màn hình VoiceOver (iOS) và TalkBack (Android) dành cho người khiếm thị. Tương tự, trong bản phản hồi, chúng tôi đã bao gồm các API được thiết kế để cung cấp cho các nhà phát triển hỗ trợ làm cho các ứng dụng dễ truy cập hơn. Lưu ý, iOS và Android khác nhau theo cách tiếp cận của họ, và do đó triển khai React Native có thể thay đổi theo nền tảng.

Trong phần bổ sung cho tài liệu này, bạn có thể tìm thấy bài đăng trên blog về khả năng tiếp cận React Native sẽ có ích.

Tạo ứng dụng hỗ trợ

Các thuộc tính hỗ trợ

accessible (iOS, Android)

Khi true, cho biết rằng chế độ xem là một yếu tố truy cập. Khi một khung nhìn là một thành phần truy cập, nó sẽ nhóm các con của nó vào một thành phần có thể lựa chọn duy nhất. Theo mặc định, tất cả các phần tử có thể chạm được đều có thể truy cập.

Trên Android, thuộc tính ‘accessible={true}’ để một View của React Native sẽ chuyển đổi trong ứng dụng native ‘focusable={true}’.

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

Trong ví dụ trên, chúng ta không thể tập trung khả năng truy cập vào 'text one' và 'text two'. Thay vào đó, chúng ta tập trung vào một khung nhìn cha với thuộc tính 'accessible'.

accessibilityLabel (iOS, Android)

Khi chế độ xem được đánh dấu là có thể truy cập được, nên thực hiện tốt để thiết lập một accessLabel trên chế độ xem để mọi người sử dụng VoiceOver biết họ đã chọn thành phần nào. VoiceOver sẽ đọc chuỗi này khi người dùng chọn phần tử liên quan.

Để sử dụng, cài đặt tuộc tính accessibilityLabel tới một chuỗi tùy chọn trong View của bạn:

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

Trong ví dụ bên trên, thuộc tính accessibilityLabel trên thành phần TouchableOpacity sẽ được mặc định tới "Press me!". Nhãn được xây dựng bằng cách nối tất cả các thẻ Text con cách nhau bằng dấu cách.

accessibilityTraits (iOS)

Các tính năng trợ năng cho người dùng VoiceOver biết họ đã chọn loại phần tử nào. Đây có phải là một phần của nhãn? Một nut bâm? Một tiêu đề? Những câu hỏi này được trả lời bởi accessibilityTraits.

Để sử dụng, cài đặt accessibilityTraits tới một (hoặc nhiều) của chuỗi trợ năng

• none được sử dụng khi phần tử không có đặc điểm.
• button được sử dụng khi phần tử được coi như một nút.
• link được sử dụng khi phần tử được coi như một liên kết.
• header được sử dụng khi một phần tử hoạt động như phần đầu của phần nội dung (ví dụ tiêu đề thanh điều hướng).
• search được sử dụng khi phần tử trường văn bản cũng phải được coi như là một trường tìm kiếm.
• image Được sử dụng khi các yếu tố nên được đối xử như một hình ảnh. Có thể kết hợp với nút hoặc liên kết, ví dụ.
• selected Sử dụng khi phần tử được chọn. Ví dụ: một hàng được chọn trong một bảng hoặc một nút được chọn trong một điều khiển phân đoạn.
• plays được sử dụng khi phần tử phát âm thanh của riêng mình khi kích hoạt.
• key được sử dụng khi phần tử hoạt động như một phím.
• text được sử dụng khi các phần tử nên được coi như là văn bản tĩnh mà không thể thay đổi.
• summary được sử dụng khi một phần tử có thể được sử dụng để cung cấp một bản tóm tắt nhanh các điều kiện hiện tại trong ứng dụng khi ứng dụng được khởi chạy lần đầu tiên. Ví dụ: khi Thời tiết mở đầu tiên, yếu tố có điều kiện thời tiết hôm nay được đánh dấu bằng đặc tính này.
• disabled được sử dụng khi điều khiển không được kích hoạt và không đáp ứng với đầu vào của người dùng.
• frequentUpdates được sử dụng khi phần tử thường xuyên cập nhật nhãn hoặc giá trị, nhưng thường xuyên gửi thông báo. Cho phép khách hàng khả năng truy cập tìm kiếm các thay đổi. Một stopwatch sẽ là ví dụ.
• startsMedia được sử dụng khi kích hoạt một phần tử bắt đầu phiên media (ví dụ như phát phim, ghi âm) không được gián đoạn bởi đầu ra từ một công nghệ trợ giúp, như VoiceOver.
• adjustable được sử dụng khi một phần tử có thể được "điều chỉnh" (ví dụ như thanh trượt).
• allowsDirectInteraction được sử dụng khi một phần tử cho phép tương tác cảm ứng trực tiếp cho người dùng VoiceOver (ví dụ như chế độ xem thể hiện một bàn phím piano).
• pageTurn thông báo cho VoiceOver rằng nó sẽ di chuyển tới trang tiếp theo khi nó đọc xong nội dung của phần tử.

accessibilityViewIsModal (iOS)

Giá trị Boolean cho biết liệu VoiceOver nên bỏ qua các phần tử trong các chế độ xem là ngang hàng của người nhận.

Ví dụ: trong cửa sổ chứa các khung nhìn A và B của thành phần cùng hàng, thiết lập accessibilityViewIsModal thành true trên khung nhìn B làm cho VoiceOver bỏ qua các phần tử trong khung nhìn A. Mặt khác, nếu khung nhìn B chứa một khung nhìn con C và bạn thiết lập accessibilityViewIsModal là true trên chế độ xem C, VoiceOver không bỏ qua các phần tử trong chế độ xem A.

onAccessibilityTap (iOS)

Sử dụng thuộc tính này để chỉ định một hàm tùy chỉnh để được gọi khi người nào đó kích hoạt một phần tử có thể truy cập bằng cách nhấn đúp vào nó khi nó được chọn.

onMagicTap (iOS)

Gán thuộc tính này cho một chức năng tùy chỉnh sẽ được gọi khi ai đó thực hiện cử chỉ "magic tap", đó là một double-tap bằng hai ngón tay. Chức năng magic tap phải thực hiện hành động có liên quan nhất mà người dùng có thể thực hiện trên một thành phần. Trong ứng dụng trên iPhone, một tập magic tap sẽ trả lời cuộc gọi điện thoại hoặc kết thúc cuộc gọi hiện tại. Nếu phần tử đã chọn không có chức năng onMagicTap, hệ thống sẽ đi qua phân cấp chế độ xem cho đến khi nó tìm ra chế độ xem đó.

accessibilityComponentType (Android)

Trong một số trường hợp, chúng tôi cũng muốn cảnh báo người dùng cuối về loại thành phần đã chọn (nghĩa là nó là một "Button"). Nếu chúng tôi sử dụng các nút mặc định, điều này sẽ hoạt động tự động. Vì chúng ta đang sử dụng javascript, chúng ta cần cung cấp thêm một ngữ cảnh cho TalkBack. Để làm như vậy, bạn phải chỉ định thuộc tính 'accessibilityComponentType' cho bất kỳ thành phần UI nào. Đối với trường hợp, chúng tôi hỗ trợ 'Button', 'radiobutton_checked' và 'radiobutton_unchecked' v.v.

<TouchableWithoutFeedback accessibilityComponentType=”button”
  onPress={this._onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableWithoutFeedback>

Trong ví dụ trên, TouchableWithoutFeedback đang được TalkBack sử dụng như button mặc định.

accessibilityLiveRegion (Android)

Khi các thành phần tự động thay đổi, chúng tôi muốn TalkBack cảnh báo người dùng cuối. Điều này được thực hiện bởi thuộc tính 'accessibilityLiveRegion'. Nó có thể được đặt thành ‘none’, ‘polite’ và ‘assertive’:

• none Dịch vụ trợ năng không nên thông báo thay đổi cho chế độ xem này.
• polite Các dịch vụ trợ năng cần thông báo thay đổi cho chế độ xem này.
• assertive Các dịch vụ trợ năng nên ngắt lời nói đang diễn ra để ngay lập tức thông báo những thay đổi cho quan điểm này.

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

Trong ví dụ trên, phương thức _addOne thay đổi biến state.count. Ngay khi người dùng click vào TouchableWithoutFeedback, TalkBack sẽ đọc văn bản trong chế độ xem văn bản do thuộc tính 'accessibilityLiveRegion=”polite”'.

importantForAccessibility (Android)

Trong trường hợp hai thành phần giao diện chồng chéo với cùng một cha, tập trung khả năng tiếp cận mặc định có thể có hành vi không thể đoán trước. Thuộc tính 'importantForAccessibility' sẽ giải quyết vấn đề này bằng cách kiểm soát nếu một lượt xem kích hoạt sự kiện truy cập và nếu nó được báo cáo về các dịch vụ khả năng truy cập. Nó có thể được đặt thành 'auto', 'yes', 'no' và 'no-hide-descendants' (giá trị cuối cùng sẽ buộc các dịch vụ truy xuất phải bỏ qua thành phần này và tất cả các con của nó).

<View style={styles.container}>
  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    <Text> First layout </Text>
  </View>
  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
    <Text> Second layout </Text>
  </View>
</View>

Trong ví dụ trên, bố cục màu vàng và con của nó hoàn toàn không thể thấy được với TalkBack và tất cả các dịch vụ trợ năng khác. Vì vậy, chúng tôi có thể dễ dàng sử dụng các lượt xem chồng chéo với cùng một cha mẹ mà không gây nhầm lẫn cho TalkBack.

Kiểm tra nếu như Screen Reader đã được kích hoạt

AccessibilityInfo API cho phép bạn xác định xem trình đọc màn hình có đang hoạt động hay không. Xem tài liệu AccessibilityInfo để biết chi tiết.

Sending Accessibility Events (Android)

Đôi khi rất hữu ích để kích hoạt sự kiện truy cập vào thành phần UI (tức là khi một chế độ xem tùy chỉnh xuất hiện trên màn hình hoặc một nút radio tùy chỉnh đã được chọn). Module UIManager cung cấp một phương thức 'sendAccessibilityEvent' cho mục đích này. Phải mất hai đối số: view tag và type sự kiện.

_onPress: function() {
  this.state.radioButton = this.state.radioButton === “radiobutton_checked” ?
  “radiobutton_unchecked” : “radiobutton_checked”;
  if (this.state.radioButton === “radiobutton_checked”) {
    RCTUIManager.sendAccessibilityEvent(
      ReactNative.findNodeHandle(this),
      RCTUIManager.AccessibilityEventTypes.typeViewClicked);
  }
}

<CustomRadioButton
  accessibleComponentType={this.state.radioButton}
  onPress={this._onPress}/>

Trong ví dụ trên, chúng tôi đã tạo nút radio tuỳ chỉnh hiện hoạt động giống như thành phần gốc. Cụ thể hơn, TalkBack đã thông báo chính xác những thay đổi đối với lựa chọn nút radio.

Testing VoiceOver Support (iOS)

Để bật VoiceOver, hãy chuyển đến ứng dụng Settings >> General >> Accessibility. Ở đó bạn sẽ tìm thấy nhiều công cụ mà mọi người sử dụng để làm cho thiết bị của họ có thể sử dụng hữu ích hơn, chẳng hạn như bolder văn bản, độ tương phản tăng lên và VoiceOver.

Để bật VoiceOver, chạm vào VoiceOver bên dưới "Vision" và bật công tắc xuất hiện ở trên cùng.

Ở dưới cùng của các cài đặt Accessibility, có một "Accessibility Shortcut". Bạn có thể sử dụng tính năng này để bật/tắt VoiceOver bằng cách nhấp đúp vào nút Home.

Nguồn tham khảo: Accessibility