【譯】讓你的應用支持旁白（iOS無障礙化官方文檔）

本文將介紹如何經過添加」旁白」（VoiceOver）能力讓你的iOS App對盲人等視障人士更加友好。

概要

「旁白」是一種屏幕閱讀能力，它使得人們能夠在不看屏幕的狀況下瀏覽設備的界面。盲人用戶在使用他們的iOS設備時依賴」旁白「提供聽覺反饋，但「旁白」不只僅是給盲人羣體的。例如，一些暈車的人在乘車時也可能會選擇打開「旁白」功能。「旁白」功能爲各類人士提供便利，而盲人們在使用設備時更加依賴它。

使用Xcode或者純代碼的方式，只須要幾步你就可使你的APP適配「旁白」功能。經過無障礙化，你的APP將走進一個廣闊的市場，同時對任何用戶來說都會更加易用。

開啓「旁白」功能測試你的APP

爲了測試APP的無障礙性，讓咱們打開「旁白」功能瀏覽一下界面吧。經過在「旁白」功能下使用你的APP，你將可以對它的無障礙性有個基本認知。首先，打開 設置 > 通用 > 輔助功能 > 旁白，打開「旁白」功能。而後，打開你的app，在任何你想測試"旁白"功能的地方使用特定手勢操做。

這種測試也會反映哪些元素在"旁白"中是可訪問的，哪些是不能的。同時能夠告訴你"旁白"的瀏覽順序是否清晰且合乎邏輯。持續關注不支持無障礙的元素並記錄一個清單用於添加更好的無障礙支持能力吧。

使用"旁白"瀏覽你的app

使用"旁白"測試app，須要你使用"旁白"功能的一組特定手勢。

這裏有五種關鍵的經常使用手勢：

• 左劃或右劃將跳轉到下一個或前一個元素
• 一個手指雙擊屏幕至關於點選當前元素
• 雙指單機屏幕能夠中止或恢復語音
• 雙指上劃能夠讀出屏幕上的全部內容
• 三指三擊屏幕能夠關閉或打開"幕簾屏"

想要了解更多手勢，能夠參考用戶指南。

爲了完整還原盲人用戶的體驗，能夠在"幕簾屏"下測試你的應用。從名字也能夠大概看出來，"幕簾屏"會使整個屏幕變黑。打開"幕簾屏"後，你仍然可使用"旁白"手勢，但你不能看到屏幕上的元素。

如今你能夠打開"旁白"而且知道如何瀏覽你的app，你已經能夠測試你的app了。

肯定常見的可訪問性問題

爲了測試你的app，檢查你是否可以訪問每個元素而且這些元素的順序是不是你指望的。記錄下來每一個元素是否能夠訪問。同時，關注那些在"旁白"功能下難以使用的功能。例如，返回app初始頁面，或者向其它應用或用戶分享內容，如何才能使用"旁白"功能作到呢？

當你測試你的app時，有一些常見的問題須要關注：

• 爲你的app的元素添加可訪問信息。 "旁白"不能默認識別自定義UI元素，你須要給這些元素添加額外的可訪問信息。
• __爲元素分組來讓」旁白「可以以正確的順序遍歷它們。__」旁白「默認是從前日後讀的，若是你但願」旁白「以不一樣的順序遍歷元素，使用元素分組來優化。這對你的app是有意義的。
• __添加描述性的文本給」旁白「來讀。__一個依賴視覺的UI看起來會很棒，可是對」旁白「用戶來講多是沒法使用得。例如，」旁白「不會檢測到一個確認按鈕在選中時從灰色變成了綠色。不做處理的話，」旁白「可能只會描述元素自己，而不會反映元素的當前狀態。確保」旁白「可以讀出按鈕是否被選中。

如今你知道哪些地方須要優化了，給你的app添加更好的」旁白「支持吧。

優化你的App的無障礙性

對那些沒法用」旁白「訪問的元素，首先來優化它們的標籤(labels)和提示(hints)。

• 屬性accessibilityLabel提供了一段描述文本，當用戶選中元素時，"旁白"會讀出這段文字。
• 屬性accessibilityHint爲選中的元素提供額外的提示信息。

Labels是很是重要的，由於它們提供了"旁白"可讀的文本。一個好的label應該簡潔但包含足夠的信息。注意一下，UILabel和accessibilityLabel是兩回事。默認地，"旁白"會讀出標準UIKit控件的文本內容，好比UILabel和UIButton。可是這些控件也能夠單獨設置accessibilityLabel來添加更細節的信息。

hints不是老是必要的，須要結合具體場景考慮。在某些場景下，label已經提供了足夠的信息。若是你以爲label裏的內容太多了，能夠放一些到hint裏面。

爲了確保用戶可以理解界面的意圖，你看你須要手動設置一些label。label和hint能夠經過xcode的Identity Inspector設置也能夠在代碼裏手動設置。

經過Identity Inspector添加Label和Hint

當使用標準UIKit控件時，能夠在Xcode中Identity Inspector的Accessibility面板設置Label和Hint。爲了提高可訪問性，經過勾選Accessibility使當前元素可訪問。例如，一個音樂App的播放按鈕應當包含圖二中的label和hint。

圖二：Identity Inspector中的Accessibility面板

經過代碼添加Label和Hint

不少時候經過Xcode設置Label和Hint是不夠的。例如，當你使用一個自定義UI組件的時候，"旁白"不會自動讀出。當你在label裏包含了一個變量的時候，也會有相似的問題。在這些狀況下，你只能在代碼裏設置Label和Hint。首先須要確認，這個元素是不是無障礙化的，而後添加合適的label和hint。

爲了使元素能夠被"旁白"訪問到，須要把它定義爲一個可訪問元素。

score.isAccessibilityElement = true
複製代碼

一個元素的label在整個生命週期中可能會變化。例如，一個用於計算遊戲得分的計數器，你但願分數變更時label的內容也會變化。你能夠經過以下代碼設置label和hint：

score.accessibilityLabel = "score: \(currentScore)"
score.accessibilityHint = "Your current score" 
複製代碼

簡化無障礙信息

"旁白"使用系統語言的方向來決定遍歷界面元素的方向。例如，在英語國家，"旁白"從左向右遍歷，而在阿拉伯語和波斯語就是從右往左讀的。若是你在UI上縱向地堆疊label，或者是在一個table裏展現文本，"旁白"可能不會以正確的順序遍歷這些label。你能夠在代碼裏給可訪問元素分組來確保"旁白"的閱讀順序符合預期。例如，假設你建立了一個app，從上到下分別是Name和Email的標題和內容，如圖三。

因爲它們在界面上的順序，"旁白"不會把這些元素一塊兒讀出來。爲了保證"旁白"讀出的內容是明確的，須要讓這些元素被分爲一組。

圖三：未分組和分組狀況下，"旁白"如何遍歷元素的例子

左圖中，有四個Label，"旁白"從前日後讀，在這個例子裏，是從左往右。因爲每一個元素對"旁白"來講都是可訪問的，這樣的用戶體驗不是很好。而右圖中，"旁白"以符合預期的順序閱讀分好組的Label，界面就很清晰。

要用代碼給label分組，首先建立一個UIAccessibilityElement，而後給已經分好組的元素添加你想要的信息。例如，像下面這樣給label分組：

var elements = [UIAccessibilityElement]()
let groupedElement = UIAccessibilityElement(accessibilityContainer: self)
groupedElement.accessibilityLabel = "\(nameTitle.text!), \(nameValue.text!)"
groupedElement.accessibilityFrameInContainerSpace = nameTitle.frame.union(nameValue.frame)
elements.append(groupedElement)
複製代碼

爲每一個元素添加無障礙標籤並對元素進行分組，可以讓"旁白"用戶更好地使用你的app。

---

譯者注，

1. 我的理解，最後這個分組的例子，多是爲了避免破壞原有頁面視圖樹因此塞了個groupedElement進來。咱們一般的作法是把"Name:"和"Maria Ruiz"兩個label塞到一個UIView裏面去，對這個UIView設isAccessibilityElement和accessibilityLabel兩個屬性。
2. 無障礙化比較有社會意義，經濟價值可能通常，因此受到的關注也不太多。官方迭代過好幾份文檔，這個是目前最新的，搜了一下好像沒有中文版，簡單翻譯一下吧，雖然翻得比較爛，可是也算是有一點意義嘛。