移動(dòng)應(yīng)用程序開發(fā)市場取決于全球用戶的偏好，這意味著隨著優(yōu)先級(jí)的變化，趨勢也在演變。在這些變化和演變中，React Native Accessibility 是開發(fā)人員中最熱門的技術(shù)棧。因此，這篇博文涵蓋了 React Native Accessibility 的各個(gè)方面，包括功能、屬性等，可以幫助企業(yè)為最終用戶提供更好的結(jié)果和可訪問性。

React Native 無障礙功能介紹

可訪問性是指訪問某些東西。這個(gè)術(shù)語已經(jīng)存在了很長時(shí)間，但最近隨著移動(dòng)應(yīng)用程序開發(fā)超越編碼而變得越來越重要。輔助功能側(cè)重于無法利用移動(dòng)應(yīng)用程序開發(fā)市場的技術(shù)進(jìn)步的身體殘障用戶。全球的開發(fā)者社區(qū)和企業(yè)主也已經(jīng)意識(shí)到可訪問性對于上述受眾的重要性。因此，引入屏幕閱讀器、語音增強(qiáng)、導(dǎo)航器等輔助功能選項(xiàng)，使小眾受眾能夠利用上述技術(shù)棧的優(yōu)勢。

React Native Accessibility為為身體受損的觀眾開發(fā)具有多種功能的應(yīng)用程序做出了重大貢獻(xiàn)。所有主要平臺(tái)，無論是 Android、iOS 還是任何其他媒體，都具有輔助功能選項(xiàng)，例如 iOS 中的畫外音和 Android 中的 Talkback，以將應(yīng)用程序與輔助技術(shù)集成，例如適用于 iOS 的捆綁式屏幕閱讀器 VoiceOver 和適用于 Android 的 Talkback。React Native 還具有互補(bǔ)的 API，可讓您容納所有用戶。

React Native 可訪問性隨時(shí)間的演變

React Native Accessibility自問世以來出現(xiàn)了顯著的熱潮，并且一直在增長。每個(gè)產(chǎn)品所有者以及企業(yè)所有者都意識(shí)到他們對社會(huì)的責(zé)任，并為具有不同可訪問性需求的用戶創(chuàng)建移動(dòng)應(yīng)用程序。隨著時(shí)間的推移，React Native 引入了許多輔助功能和改進(jìn)，包括：

內(nèi)置可訪問組件

React Native 包括一組內(nèi)置的可訪問組件，例如按鈕、文本輸入和圖像，您可以使用它們來創(chuàng)建可訪問的用戶界面。

詠嘆調(diào)支持

它還包括 ARIA 規(guī)范，該規(guī)范提供了一種通過定義元素的角色、狀態(tài)和屬性來創(chuàng)建可訪問的 Web 內(nèi)容的方法。

輔助功能API

它提供了一個(gè)可訪問性 API，允許開發(fā)人員訪問和修改組件的可訪問性信息，包括設(shè)置可訪問性標(biāo)簽、提示和特征。

可自定義的輔助功能設(shè)置

它提供用于自定義輔助功能設(shè)置的 API，例如字體大小、顏色對比度和字幕選項(xiàng)，這有助于提高應(yīng)用程序?qū)堈嫌脩舻妮o助功能。

手勢識(shí)別

React Native 提供手勢識(shí)別支持，您可以使用它為用戶提供與應(yīng)用程序交互的替代方式，例如滑動(dòng)手勢或雙擊。

輔助功能審核工具

有幾種工具可以幫助您審核 React Native 應(yīng)用程序的可訪問性。這些工具包括 Android Studio 中的輔助功能掃描器，它可以幫助識(shí)別您需要關(guān)注的輔助功能問題。

以可訪問性為中心的測試

使用屏幕閱讀器、放大鏡和語音命令等輔助技術(shù)測試 React Native 應(yīng)用程序的可訪問性，以確保您的應(yīng)用程序?qū)哂胁煌稍L問性需求的用戶的可訪問性。

無障礙指南

React Native 開發(fā)人員的輔助功能指南，例如 W3C 的Web 內(nèi)容輔助功能指南(WCAG) 和 Apple 的人機(jī)界面指南，提供了創(chuàng)建可訪問的移動(dòng)應(yīng)用程序的最佳實(shí)踐。

想要構(gòu)建一個(gè)打破障礙并與所有用戶聯(lián)系的 React Native 應(yīng)用程序？聘請對可訪問性原則有深刻理解并能完美實(shí)施它們的
React Native 開發(fā)人員。

React Native 可訪問性的屬性

輔助功能屬性通過向屏幕閱讀器等輔助技術(shù)提供有關(guān) UI 元素的信息，提高殘障用戶的移動(dòng)應(yīng)用程序輔助功能。React Native 提供了一系列可訪問性屬性來增強(qiáng)移動(dòng)應(yīng)用程序的可訪問性。

無障礙

當(dāng)可訪問性元素屬性設(shè)置為 true 時(shí)，表示您可以使用輔助技術(shù)訪問視圖。此屬性還將視圖的子項(xiàng)分組為單個(gè)可選擇的組件。除非另有說明，否則可觸摸元素會(huì)自動(dòng)變?yōu)榭稍L問。

無障礙標(biāo)簽

React Native 中的accessibilityLabel屬性為屏幕閱讀器等輔助技術(shù)提供了一個(gè)描述 UI 組件的標(biāo)簽。通過設(shè)置 accessibilityLabel 屬性，開發(fā)人員可以確保屏幕閱讀器在用戶與之交互時(shí)能夠充分識(shí)別 UI 元素，例如按鈕。它使依賴輔助技術(shù)的用戶能夠理解 UI 元素的用途，為他們提供更易于訪問和包容的用戶體驗(yàn)。

輔助功能提示

accessibilityHint 向用戶提供有關(guān)對可訪問性元素執(zhí)行操作的結(jié)果的附加信息，當(dāng)僅從可訪問性標(biāo)簽中看不出來時(shí)。它可以幫助殘障用戶理解該元素的用途以及如何與之交互以實(shí)現(xiàn)特定結(jié)果。

accessibility角色

React Native 中的 accessibilityRole 屬性將組件的預(yù)期用途傳達(dá)給依賴輔助技術(shù)的用戶。

可達(dá)性狀態(tài)

React Native 中的 accessibilityState 屬性將當(dāng)前組件狀態(tài)傳達(dá)給依賴輔助技術(shù)的用戶。

可達(dá)性價(jià)值

組件的 value 屬性指示其當(dāng)前值。它可以包含值的文本表示或組件，例如進(jìn)度條和帶有范圍的滑塊；它包括范圍信息，例如最小值、最大值和當(dāng)前值。

accessibilityActions

輔助功能操作允許輔助技術(shù)以編程方式調(diào)用組件的操作。組件必須做兩件事來支持可訪問性操作，

• 通過 accessibilityActions 屬性定義它支持的操作列表。

• 實(shí)施 onAccessibilityAction 函數(shù)來處理操作請求。

accessibilityViewIsModal：此屬性指示 UI 組件是否為模態(tài)視圖，這可以幫助輔助技術(shù)了解組件的上下文。

在 React Native 中啟用輔助功能的功能

React Native 擁有多種工具和技術(shù)，使開發(fā)人員能夠創(chuàng)建可供殘障用戶使用的移動(dòng)應(yīng)用程序。因此，它們可以迎合包括殘障人士在內(nèi)的大量受眾，從而通過改進(jìn)的包容性和可訪問性為所有人提供更好的用戶體驗(yàn)。其中一些功能是：

無障礙道具

您可以將 AccessibilityProps 稱為道具，開發(fā)人員可以使用這些道具來提供有關(guān) UI 組件的附加信息，以訪問屏幕閱讀器等服務(wù)。AccessibilityProps 包括 accessibility、accessibilityLabel、accessibilityHint、accessibilityRole、accessibilityStates 等。下面是一個(gè)簡單的代碼示例，解釋了如何在 React Native 組件中使用 AccessibilityProps。

從“反應(yīng)”導(dǎo)入反應(yīng)；從'react-native'導(dǎo)入{文本，視圖}；const MyComponent = () => {
  返回 （
    <視圖>
      <文字
        可訪問= {真}
        accessibilityLabel="你好世界"
        accessibilityHint="這是一條問候信息"
        accessibilityRole="header"
        accessibilityStates={['selected']}
      >
        你好世界
      </文本>
    </查看>
  );};導(dǎo)出默認(rèn)的 MyComponent；

無障礙信息

AccessibilityInfo 正是一個(gè) React 本機(jī) API，提供有關(guān)設(shè)備輔助功能設(shè)置的信息。無論屏幕閱讀器或用戶是否啟用了更大的文本（放大鏡），它都會(huì)起作用。它允許開發(fā)人員根據(jù)他們的可訪問性設(shè)置調(diào)整他們的應(yīng)用程序行為。下面是如何在 React Native 組件中設(shè)置 AccessibilityInfo API 的示例。

從“反應(yīng)”中導(dǎo)入反應(yīng)，{useState，useEffect}；import { Text, View, AccessibilityInfo } from 'react-native';const MyComponent = () => {
  const [isScreenReaderEnabled, setIsScreenReaderEnabled] = useState(false);
  使用效果（（）=> {
    const getAccessibilityInfo = async () => {
      const screenReaderEnabled = await AccessibilityInfo.isScreenReaderEnabled();
      setIsScreenReaderEnabled(screenReaderEnabled);
    };
    getAccessibilityInfo();
  }, []);
  返回 （
    <視圖>
      <文本>
        {isScreenReaderEnabled
          ？'屏幕閱讀器已啟用'
          : '屏幕閱讀器未啟用'}
      </文本>
    </查看>
  );};導(dǎo)出默認(rèn)的 MyComponent；

VoiceOver 和 TalkBack 支持

“VoiceOver”和“TalkBack Support”都屬于屏幕閱讀器服務(wù)，專門用于為視障用戶提供口頭反饋。React Native 通過 AccessibilityProps 擁有對這些服務(wù)的內(nèi)置支持。下面是如何在 React Native 組件中使用 VoiceOver 和 TalkBack 支持的代碼示例。

從“反應(yīng)”導(dǎo)入反應(yīng)；從'react-native'導(dǎo)入{文本，視圖}；const MyComponent = () => {
  返回 （
    <視圖>
      <文字
        可訪問= {真}
        accessibilityLabel="你好世界"
        accessibilityHint="這是一條問候信息"
        accessibilityRole="header"
        accessibilityStates={['selected']}
        accessibilityTraits={['header']}
      >
        你好世界
      </文本>
    </查看>
  );};導(dǎo)出默認(rèn)的 MyComponent；

輔助功能事件

AccessibilityEvent API 使 React 本機(jī)開發(fā)人員能夠輕松處理應(yīng)用程序視圖上的可訪問性事件。它還允許他們在用戶與應(yīng)用程序的可訪問組件交互時(shí)接收通知。下面是如何在 React Native 組件中使用 AccessibilityEvent API 的代碼示例。

從“反應(yīng)”中導(dǎo)入反應(yīng)，{useState，useEffect}；import { Text, View, AccessibilityEvent } from 'react-native';const MyComponent = () => {
  const [eventCount, setEventCount] = useState(0);
  使用效果（（）=> {
    const onAccessibilityEvent = AccessibilityEvent.addEventListener(
      '公告完成',
      處理輔助功能事件
    );
    返回（）=> {
      onAccessibilityEvent.remove();
    };
  }, []);
  const handleAccessibilityEvent = (事件) => {
    設(shè)置事件計(jì)數(shù)（事件。事件計(jì)數(shù)）；
  };
  返回 （
    <視圖>
      <Text>觸發(fā)的輔助功能事件：{eventCount}</Text>
    </查看>
  );};導(dǎo)出默認(rèn)的 MyComponent；

無障礙組件

React Native 中 Accessibility Component 的主要功能是包裝 UI 組件并使其可訪問。它根據(jù)設(shè)備的輔助功能設(shè)置設(shè)置輔助功能道具。下面是演示如何使用它的示例代碼片段。

從“反應(yīng)”導(dǎo)入反應(yīng)；import { Text, View, AccessibilityInfo } from 'react-native';const MyComponent = () => {
  const updateAccessibilityState = (isEnabled) => {
    AccessibilityInfo.setAccessibilityFocusEnabled(isEnabled);
  };
  返回 （
    <視圖>
      <輔助功能信息
        onChange={updateAccessibilityState}
      />
      <Text>我的可訪問組件</Text>
    </查看>
  );};導(dǎo)出默認(rèn)的 MyComponent；

結(jié)論

（言鼎科技）