免費(fèi)AI編程助手
輔助功能
iOS
在 iOS 系統(tǒng)上輔助功能涵蓋許多話(huà)題，但對(duì)許多人來(lái)說(shuō)輔助功能是 VoiceOver 的代名詞，即 iOS 3.0 版本以后的一種技術(shù)。它充當(dāng)屏幕閱讀器的角色，允許有視覺(jué)障礙的人使用 iOS 設(shè)備。點(diǎn)擊這里了解更多。
Android
對(duì) Android 系統(tǒng)而言，輔助功能涉及到了許多不同的話(huà)題，其中之一是讓喪失視力的人能夠使用您的應(yīng)用程序。對(duì)于現(xiàn)在的社會(huì)，谷歌提供了一個(gè)名叫 TalkBack 的內(nèi)置屏幕讀者服務(wù)機(jī)器人。使用該機(jī)器人，你可以使用觸摸勘探和手勢(shì)來(lái)使用移動(dòng)設(shè)備和應(yīng)用程序。TalkBack 可以使用文本語(yǔ)音轉(zhuǎn)換器來(lái)閱讀屏幕上的內(nèi)容并且可以發(fā)出警報(bào)來(lái)通知用戶(hù)有關(guān)于應(yīng)用程序中的重要信息。點(diǎn)擊這里來(lái)了解更多關(guān)于 Android 的輔助功能的特征以及點(diǎn)擊這里來(lái)了解更多關(guān)于使您的本地應(yīng)用程序的輔助功能。
創(chuàng)建輔助性應(yīng)用程序
輔助功能的性質(zhì)
輔助性（iOS, Android）
如果為 true的情況，代表該視圖是一個(gè)輔助功能元素。當(dāng)視圖是輔助功能元素時(shí)，它把它的子元素分組成一個(gè)單一的可選組件。默認(rèn)情況下，可觸摸的所有元素都具有輔助性。
在 Android 系統(tǒng)中，在 react-native 視圖中 ' accessible={true}' 屬性將被翻譯成本地命令 ' focusable={true}'。
<View accessible={true}>
<Text>text one</Text>
<Text >text two</Text>
</View>在上面的示例中，我們不能分別在 'text one' 和 'text two' 中獲得輔助焦點(diǎn)。相反我們可以在父元素上使用 'accessible' 屬性獲得焦點(diǎn)。
accessibilityLabel (iOS, Android)
如果要將視圖標(biāo)記為具有輔助性，那么一個(gè)比較好的做法就是為這個(gè)視圖設(shè)置一個(gè) accessibilityLabel 標(biāo)簽以便使用 VoiceOver 的人知道他們選擇了什么元素。當(dāng)用戶(hù)選擇了一些元素，那么 VoiceOver 將會(huì)閱讀響應(yīng)的字符串文本。
若要使用它，在您的視圖中將 accessibilityLabel 屬性設(shè)置為一個(gè)自定義的字符串：
<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>在上面的示例中，TouchableOpacity 元素中的 accessibilityLabel 會(huì)被默認(rèn)的設(shè)置為 "點(diǎn)擊我！"。 該標(biāo)簽是通過(guò)使用空格符來(lái)串聯(lián)所有文本節(jié)點(diǎn)子元素構(gòu)造的。
accessibilityTraits (iOS)
輔助功能特征告訴人們他們?cè)谑褂?VoiceOver 的時(shí)候選擇了什么元素。此元素是一個(gè)標(biāo)簽？一個(gè)按鈕？還是標(biāo)頭？accessibilityTraits 將會(huì)回答這些問(wèn)題。
如果要使用它，請(qǐng)把 accessibilityTraits 屬性設(shè)置為 accessibilityTraits 輔助功能字符串(或數(shù)組)之一：
none 當(dāng)元素沒(méi)有特征的時(shí)候使用。
button 當(dāng)元素需要被當(dāng)做一個(gè)按鈕的時(shí)候使用。
link 當(dāng)元素需要被當(dāng)做鏈接的時(shí)候使用。
header 當(dāng)元素作為內(nèi)容部分的標(biāo)題 (如導(dǎo)航欄中的標(biāo)題) 的時(shí)候使用。
search 當(dāng)文本字段元素也被視為一個(gè)搜索字段的時(shí)候使用。
image 當(dāng)元素需要被作為圖像，比如和按鈕和鏈接結(jié)合的時(shí)候使用。
selected 當(dāng)該元素被選中時(shí)使用。例如，表中被選中的行或者分段控件中選中的按鈕。
plays 當(dāng)元素被激活的并且播放自己的聲音的時(shí)候使用。
key 當(dāng)元素充當(dāng)鍵盤(pán)按鍵的時(shí)候使用。
text 當(dāng)元素應(yīng)該被視為不能更改的靜態(tài)文本的時(shí)候使用。
summary 當(dāng)在應(yīng)用程序首次啟動(dòng)的時(shí)候，該元素可以提供應(yīng)用程序的實(shí)時(shí)狀況的摘要的時(shí)候使用。例如，當(dāng)關(guān)于天氣的應(yīng)用程序首次啟動(dòng)的時(shí)候，帶有當(dāng)天天氣信息的元素將被該特征所標(biāo)記。
disabled 當(dāng)控件未啟動(dòng)并且對(duì)用戶(hù)的輸入無(wú)響應(yīng)的時(shí)候使用。
frequentUpdates 當(dāng)元素經(jīng)常更新其標(biāo)簽或者它的值，但是太平凡的發(fā)送通知的時(shí)候使用。允許輔助功能客戶(hù)端輪詢(xún)更改。秒表就是一個(gè)例子。
startsMedia 當(dāng)激活一個(gè)元素并開(kāi)始一段媒體會(huì)話(huà)(例如播放電影，錄制音頻)不應(yīng)該被輔助技術(shù)的輸出所打斷，比如 VoiceOver。
adjustable 當(dāng)元素可以被"調(diào)整"的時(shí)候使用(例如滑塊)。
allowsDirectInteraction 當(dāng)元素允許 VoiceOver 用戶(hù)直接進(jìn)行觸摸互動(dòng)的時(shí)候使用(例如，表示一個(gè)鋼琴鍵盤(pán)的視圖)。
pageTurn 當(dāng)它完成閱讀的元素的內(nèi)容時(shí)候通知 VoiceOver 需要滾動(dòng)到下一個(gè)頁(yè)面。
onAccessibilityTap (iOS)
使用此屬性來(lái)分配一個(gè)自定義的函數(shù)，當(dāng)有人在一個(gè)可訪(fǎng)問(wèn)元素被選中的時(shí)候通過(guò)雙擊來(lái)激活它的時(shí)候來(lái)調(diào)用該函數(shù)。
onMagicTap (iOS)
當(dāng)有人使用 “magic tap”手勢(shì)，即：用兩個(gè)手指雙擊的時(shí)候，該屬性就會(huì)被分配給一個(gè)自定義函數(shù)，同時(shí)，這個(gè)函數(shù)會(huì)被調(diào)用。一個(gè)魔法敲擊函數(shù)應(yīng)該執(zhí)行用戶(hù)可以在組件中找到的最具有相關(guān)性的操作。在 iPhone 的手機(jī)應(yīng)用程序中，一個(gè)魔法敲擊可以接聽(tīng)或者結(jié)束一個(gè)電話(huà)。如果所選的元素不具有 onMagicTap 功能，該系統(tǒng)將遍歷視圖層次結(jié)構(gòu)直到它找到一個(gè)擁有此功能的視圖。
accessibilityComponentType (Android)
在某些情況下，我們也要提醒選定的組件類(lèi)型的最終用戶(hù) (即，它是一個(gè)"按鈕")。如果我們正在使用本機(jī)的按鈕，那么它會(huì)自動(dòng)工作。由于我們使用的是 javascript，所以我們需要為 TalkBack 提供更多的語(yǔ)境。為了達(dá)到這個(gè)目的，您必須為所有 UI 組件指定 'accessibilityComponentType' 屬性。例如，我們支持 'button'，'radiobutton_checked' 和 'radiobutton_unchecked'等。
<TouchableWithoutFeedback accessibilityComponentType=”button”
onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableWithoutFeedback>在上面的示例中，TouchableWithoutFeedback 是被 TalkBack 作為一個(gè)本機(jī)按鈕聲明的。
accessibilityLiveRegion (Android)
當(dāng)組件動(dòng)態(tài)的更改時(shí)，我們希望 TalkBack 去提醒最終用戶(hù)。'AccessibilityLiveRegion' 屬性讓這成為可能。它可以被設(shè)置為 ‘none’, ‘polite’ 以及 ‘a(chǎn)ssertive’。
none 輔助功能服務(wù)不應(yīng)該對(duì)此視圖通知改變的地方。
polite 輔助功能服務(wù)應(yīng)該對(duì)此視圖通知改變的地方。
assertive 輔助功能服務(wù)應(yīng)該中斷正在進(jìn)行的會(huì)話(huà)，并且以立即宣布該視圖的改變。
<TouchableWithoutFeedback onPress={this._addOne}>
<View style={styles.embedded}>
<Text>Click me</Text>
</View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
Clicked {this.state.count} times
</Text>在上面的示例方法 _addOne 更改了 state.count 變量。當(dāng)最終用戶(hù)單擊 TouchableWithoutFeedback 的時(shí)候，因?yàn)?TalkBack 的 'accessibilityLiveRegion=”polite”' 屬性，所以它讀取了文本視圖中的文本。
importantForAccessibility (Android)
對(duì)于兩個(gè)重疊的并且擁有相同父元素的 UI 組件，默認(rèn)的輔助功能焦點(diǎn)可以有不可預(yù)知的行為。如果一個(gè)視圖觸發(fā)輔助事件并且它被匯報(bào)給了輔助功能服務(wù)器，那么 'ImportantForAccessibility' 屬性將會(huì)通過(guò)控制解決它，它可以被設(shè)置為‘a(chǎn)uto’, ‘yes’, ‘no’ 以及 ‘no-hide-descendants’ (最后一個(gè)值將迫使輔助功能服務(wù)忽略該組件和它的所有子元素)。
<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-descendant”>
<Text> Second layout </Text>
</View>
</View>在上面的示例中，對(duì)于 TalkBack 以及其他的輔助功能服務(wù)而言，黃色的布局及其后代是完全不可見(jiàn)的。所以我們可以容易的使用來(lái)自于同一個(gè)父元素并且不帶有令人疑惑的 TalkBack 的視圖。
發(fā)送輔助功能事件（Android）
有時(shí)候在 UI 組件中去觸發(fā)一個(gè)輔助功能事件很有用 (即當(dāng)一個(gè)自定義的視圖在屏幕上顯示或自定義單選按鈕已被選中)。為了達(dá)到這個(gè)目的，本地 UIManager 模塊公布了一個(gè)名叫 'sendAccessibilityEvent' 的方法。它擁有兩個(gè)參數(shù)： 視圖標(biāo)簽和一個(gè)類(lèi)型的事件。
_onPress: function() { this.state.radioButton = this.state.radioButton === “radiobutton_checked” ?
“radiobutton_unchecked” : “radiobutton_checked”; if (this.state.radioButton === “radiobutton_checked”) {
RCTUIManager.sendAccessibilityEvent(
React.findNodeHandle(this),
RCTUIManager.AccessibilityEventTypes.typeViewClicked);
}
}
<CustomRadioButton
accessibleComponentType={this.state.radioButton}
onPress={this._onPress}/>在上面的例子中，我們創(chuàng)建了一個(gè)如同本按鈕的自定義單選按鈕。更具體地說(shuō)，TalkBack 可以正確的公布單選按鈕選擇的變化。
測(cè)試 VoiceOver 支持的內(nèi)容（iOS）
如果要啟用 VoiceOver，那么請(qǐng)?jiān)谀愕?iOS 設(shè)備上打開(kāi)設(shè)置應(yīng)用程序的位置。點(diǎn)擊 General，然后點(diǎn)擊 Accessibility。那里你會(huì)發(fā)現(xiàn)許多人們用來(lái)優(yōu)化他們的設(shè)備的工具，比如粗體文本、 增加的對(duì)比度以及 VoiceOver。
如果要啟用 VoiceOver，點(diǎn)擊 "Vision" 下的 VoiceOver，打開(kāi)顯示在頂部的開(kāi)關(guān)。
在輔助功能設(shè)置的最底部，還有一個(gè)"輔助功能的快捷方式"。你可以使用它三次單擊主頁(yè)按鈕來(lái)觸發(fā) VoiceOver。
更多建議：