你知道盲人是如何使用手機(jī)的嗎？受益于無(wú)障礙讀屏，盲人能在看不到屏幕的情況下，讓手機(jī)讀出屏幕上的每項(xiàng)內(nèi)容。結(jié)合簡(jiǎn)易的手勢(shì)、語(yǔ)音輸入，盲人也能和明眼人（即視覺(jué)無(wú)礙的人）一樣自由地享受科技。

無(wú)障礙讀屏體驗(yàn)的重要性主要體現(xiàn)在以下 3 個(gè)方面:

①滿足用戶需求

我們堅(jiān)信，每個(gè)人都應(yīng)該能平等地使用數(shù)字產(chǎn)品、服務(wù)，而不受視覺(jué)能力的限制。通過(guò)考慮視障群體的訴求，我們可以打破數(shù)字世界中的障礙，使他們能夠與其他用戶一樣獲得信息和參與交互。

②提升產(chǎn)品競(jìng)爭(zhēng)力

優(yōu)良的無(wú)障礙讀屏體驗(yàn)可以增加產(chǎn)品的吸引力、競(jìng)爭(zhēng)力。若視障群體能輕松使用產(chǎn)品，他們會(huì)感受到關(guān)注、尊重。這種積極的用戶體驗(yàn)將增加他們對(duì)產(chǎn)品的滿意度，并提升他們繼續(xù)使用、推薦產(chǎn)品的可能。

③推動(dòng)科技向善

推行無(wú)障礙讀屏體驗(yàn)符合聯(lián)合國(guó)《殘疾人權(quán)利公約》的精神，該公約呼吁各方關(guān)注并消除殘疾人面臨的障礙，以促進(jìn)社會(huì)的包容、可持續(xù)發(fā)展。通過(guò)為視障群體提供更好的用戶體驗(yàn)，我們也在推動(dòng)科技的持續(xù)向善。

可見(jiàn)，無(wú)障礙讀屏體驗(yàn)是不可忽視的。因此，我們建議將無(wú)障礙讀屏體驗(yàn)納入到日常設(shè)計(jì)的考量范圍內(nèi)。

更多無(wú)障礙設(shè)計(jì)干貨：

一、設(shè)計(jì)原則

參考 WCAG 2.2，無(wú)障礙讀屏體驗(yàn)的設(shè)計(jì)原則有以下 3 點(diǎn)：

1. Perceivable：能和明眼人一樣在應(yīng)用中獲取信息。
2. Operable：能完成和明眼人幾乎一樣多的操作。
3. Understandable：對(duì)應(yīng)用內(nèi)的信息，能達(dá)到和明眼人接近的理解效果。

二、基礎(chǔ)概念

在了解如何設(shè)計(jì)無(wú)障礙讀屏體驗(yàn)前，我們需先了解其相關(guān)的基礎(chǔ)概念。

1. 常見(jiàn)讀屏應(yīng)用

目前，市面上有諸多讀屏應(yīng)用。其中，最為常見(jiàn)的的系統(tǒng)級(jí)讀屏應(yīng)用主要有以下 3 個(gè)：

盡管本文的內(nèi)容更側(cè)重于觸摸屏環(huán)境中的 VoiceOver 和 TalkBack，但整體設(shè)計(jì)思想是通用的。

2. 交互模式

無(wú)障礙讀屏體驗(yàn)中，主要有以下 3 種交互模式：

①Linear Navigation

讀屏應(yīng)用是以線性的順序（sequentially）探索、朗讀屏幕上的 UI 元素的。以 iOS 端的 VoiceOver 為例：向右輕掃選擇下一項(xiàng)，向左輕掃選擇上一項(xiàng)，焦點(diǎn)所在元素的內(nèi)容會(huì)被朗讀，雙擊即可觸發(fā)元素。

②Direct Command

和明眼人一樣，視障用戶同樣可以通過(guò)語(yǔ)音助手、捷徑（shortcuts）、快捷鍵（keyboard shortcuts）等功能實(shí)現(xiàn)更為直接、高效的交互。

關(guān)于快捷鍵，建議搭配閱讀我們之前發(fā)布的《設(shè)計(jì)快捷鍵》一文。

③Explore by Touch

視障用戶也可以直接將手指按在屏幕的特定位置，以讓焦點(diǎn)直接抵達(dá)此位置，而無(wú)需通過(guò) linear navigation 的順序一步步導(dǎo)航至此。

可見(jiàn)：

1. 保證可交互元素的響應(yīng)熱區(qū)足夠大，也有利于無(wú)障礙讀屏體驗(yàn)。
2. 若能保持 UI 元素位置穩(wěn)定，視障用戶也能通過(guò)形成肌肉記憶來(lái)提升無(wú)障礙讀屏效率。

此外，用戶還可以可通過(guò)盲文閱讀器（braille display）等外接設(shè)備進(jìn)行無(wú)障礙讀屏。

3. Accessibility Attributes

Accessibility attributes 指的是 UI 元素被讀屏應(yīng)用朗讀的內(nèi)容。

為 UI 元素設(shè)計(jì)其 accessibility attributes 是無(wú)障礙讀屏體驗(yàn)中至關(guān)重要的一環(huán)。因?yàn)椋x屏應(yīng)用朗讀的內(nèi)容幾乎就是視障用戶能獲取到的所有信息。

通常，讀屏應(yīng)用會(huì)為各個(gè)元素按以下順序朗讀 accessibility attributes：

1. Label
2. Value
3. Traits
4. Hints

①Label

Label 指的是用于描述 UI 元素的文本。

默認(rèn)情況下，label 的值等于 UI 元素在屏幕上展示的文本。若 UI 元素不含文本，則需手動(dòng)為其填寫 label。

舉幾個(gè)例子：

1. 一個(gè) button 的 label 是「添加」，和它在屏幕上展示的文本一致；
2. 一個(gè) icon 的 label 是「播放」，盡管在屏幕上它并沒(méi)有文本標(biāo)簽。

②Value

Value 指的是 UI 元素當(dāng)前的值、內(nèi)容、已選項(xiàng)。

Value 是非必填項(xiàng)。只有當(dāng)元素的 label 無(wú)法清晰描述其當(dāng)前值或內(nèi)容時(shí)，才需添加 value。

舉幾個(gè)例子：

1. 一個(gè) slider 的 label 是「屏幕亮度」，其當(dāng)前的 value 是「60%」。
2. 一個(gè) pull-down button 的 label 是「性別」，其當(dāng)前的 value 是「女」。

③Traits

Traits 指的是用于描述 UI 元素的狀態(tài)（state）、行為（behavior）、用途（usage）的文本。

每個(gè)元素都至少要有 1 個(gè) trait。因?yàn)?，操作系統(tǒng)需根據(jù)元素的 traits 來(lái)賦予其不同的交互特性。

舉幾個(gè)例子：

1. 虛擬鍵盤中的按鈕的 traits 為「Keyboard Key」。
2. 音樂(lè)播放器中的播放按鈕的 traits 為「Button, Starts Media Session」。

④Hints

Hints 指的是用于描述 UI 元素執(zhí)行結(jié)果的文本。

Hints 是非必填項(xiàng)。只有當(dāng)元素的 label 無(wú)法清晰描述其執(zhí)行結(jié)果時(shí)，才需添加 hints。

Hints 不一定會(huì)被朗讀，因?yàn)橛脩艨梢栽谠O(shè)置中選擇是否讓讀屏應(yīng)用朗讀 hints。可見(jiàn)，我們可以將 hints 理解為是為「非熟練用戶」提供的內(nèi)容。

舉幾個(gè)例子：

1. 一個(gè) butoon 的 label 是「收藏」，其 hints 可以是「收藏內(nèi)容更新時(shí)會(huì)提醒你」。
2. 一個(gè) icon 的 label 是「一鍵三連」，其 hints 可以是「輕點(diǎn)兩下來(lái)同時(shí)點(diǎn)贊、收藏、關(guān)注」。

4. Rotor

Rotor（轉(zhuǎn)子）是 VoiceOver 中的一種工具，用于在觸摸屏環(huán)境下提供各種快捷設(shè)置、實(shí)用功能。在不同的頁(yè)面、場(chǎng)景，rotor 提供的選項(xiàng)會(huì)有所不同。

其使用方法為：

1. 在屏幕上轉(zhuǎn)動(dòng)雙指，即可喚出 rotor。
2. 繼續(xù)轉(zhuǎn)動(dòng)手指可以聽(tīng)取更多選項(xiàng)。
3. 聽(tīng)到想要的選項(xiàng)時(shí)，停止轉(zhuǎn)動(dòng)手指，然后用手指在屏幕上上下輕掃就可以使用、更改選項(xiàng)了。

舉幾個(gè)例子：

1. 在電子書應(yīng)用中，可以喚出 rotor 并選取「語(yǔ)速」選項(xiàng)。接著，上下輕掃即可更改朗讀語(yǔ)速。
2. 在文檔應(yīng)用中，可以喚出 rotor 并選取「標(biāo)題」選項(xiàng)。接著，上下輕掃即可使用「只讀標(biāo)題」的功能。

可見(jiàn)，rotor 能提供更快、更靈活的頁(yè)面訪問(wèn)方式。

以下是常見(jiàn)的 rotor 選項(xiàng)及其效果：

5. Item Chooser

Item chooser（項(xiàng)目選取器）是 VoiceOver 中的一種工具，用于快速選擇特定 UI 元素。其特別適用于頁(yè)面中有大量元素的場(chǎng)景。

其使用方法為：

1. 在屏幕上用兩根手指輕點(diǎn)三下屏幕，即可喚出 item chooser。
2. 接著，可以通過(guò)索引或搜索來(lái)選擇特定 UI 元素。

可見(jiàn)，item chooser 能讓我們更方便地選擇目標(biāo)元素。

三、設(shè)計(jì)流程

為體系化地設(shè)計(jì)無(wú)障礙讀屏體驗(yàn)，我們建議采取以下設(shè)計(jì)流程：

1. 確定讀屏范圍
2. 定義讀屏順序
3. 進(jìn)行元素分組
4. 設(shè)計(jì)朗讀內(nèi)容
5. 設(shè)計(jì)朗讀方式

1. 確定讀屏范圍

并非頁(yè)面上的所有信息都需要被讀屏應(yīng)用朗讀。因?yàn)椋瑢?duì)于視障用戶來(lái)說(shuō)，純裝飾性的、用于構(gòu)建視覺(jué)層級(jí)的 UI 元素是不需要的。

舉幾個(gè)例子：

1. 模塊間的分割線；
2. 構(gòu)建賣場(chǎng)氛圍的背景插畫。

2. 定義讀屏順序

建議使 focus order 與明眼人的 visual order（視線流）一致，而不是使用的「從左到右、從上到下」的默認(rèn)順序。

這與為鍵盤導(dǎo)航設(shè)計(jì) tab order 的思路是一致的?？梢?jiàn)，穩(wěn)健的鍵盤導(dǎo)航體系是無(wú)障礙讀屏體驗(yàn)的堅(jiān)實(shí)基礎(chǔ)。關(guān)于鍵盤導(dǎo)航，建議搭配閱讀我們之前發(fā)布的《設(shè)計(jì)鍵盤導(dǎo)航》一文。

3. 進(jìn)行元素分組

建議將關(guān)系緊密的元素合為一組。這樣，讀屏應(yīng)用就會(huì)將這一組視為一個(gè) UI 元素來(lái)朗讀，而不是分別朗讀每個(gè)子元素。

這樣做主要能為我們帶來(lái)以下 2 方面的好處：

①提供清晰的信息結(jié)構(gòu)

更清晰的信息結(jié)構(gòu)使得視障用戶能夠更好地理解頁(yè)面的組織、導(dǎo)航方式，從而更有效地瀏覽內(nèi)容。如：

將「飛行模式」文本和一個(gè) switch 放在同一組中，讀屏軟件就能將其朗讀為：「飛行模式，切換按鈕，關(guān)閉，輕點(diǎn)兩下來(lái)切換設(shè)置」。若不放在同一組中，我們就需聽(tīng)完「飛行模式」后向右輕掃，才能聽(tīng)到「切換按鈕，關(guān)閉，輕點(diǎn)兩下來(lái)切換設(shè)置」。況且，當(dāng)下所聽(tīng)到的「切換按鈕」具體應(yīng)用的對(duì)象也是不清晰的。

②大幅簡(jiǎn)化導(dǎo)航和操作

通過(guò)將相關(guān)元素分組，可以使視障用戶更輕松地導(dǎo)航和操作頁(yè)面。

舉幾個(gè)例子：

1. 將列表項(xiàng)及其側(cè)滑出現(xiàn)的「標(biāo)為未讀」「不顯示」「刪除」放在同一組中，當(dāng)讀屏焦點(diǎn)抵達(dá)此列表項(xiàng)時(shí)，讀屏應(yīng)用會(huì)提示用戶有 custom action 可用。用戶不需要將讀屏焦點(diǎn)離開(kāi)此列表項(xiàng)，即可向上或向下輕掃來(lái)完成「標(biāo)為未讀」「不顯示」「刪除」。
2. 將瀑布流中的帖子及其「點(diǎn)贊」按鈕放在同一組中，當(dāng)讀屏焦點(diǎn)抵達(dá)此帖子時(shí)，讀屏應(yīng)用會(huì)提示用戶有 custom action 可用。用戶不需要將讀屏焦點(diǎn)離開(kāi)此帖子，即可向上或向下輕掃完成「點(diǎn)贊」。

進(jìn)行元素分組的思路，與為鍵盤導(dǎo)航設(shè)計(jì) focus group 的思路是一致的。這再次印證了，穩(wěn)健的鍵盤導(dǎo)航體系是無(wú)障礙讀屏體驗(yàn)的堅(jiān)實(shí)基礎(chǔ)。

4. 設(shè)計(jì)朗讀內(nèi)容

清晰、簡(jiǎn)潔、有條理的朗讀內(nèi)容是無(wú)障礙讀屏體驗(yàn)的重點(diǎn)。

以下是面向 label、traits、hints 等 accessibility attributes 的設(shè)計(jì)指引。

①設(shè)計(jì) Label

力求簡(jiǎn)潔

簡(jiǎn)潔的 label 能帶來(lái)更高的讀屏效率。

舉幾個(gè)例子：

UI 元素的 label 還能用于語(yǔ)音控制、盲文閱讀。因此，若標(biāo)簽不夠簡(jiǎn)潔，語(yǔ)音控制和盲文閱讀的交互成本將顯著提升。

1. 音樂(lè)播放器中的 3 個(gè)主按鈕，其 label 應(yīng)被寫為「上一首」「下一首」「播放」，而不是「上一首歌曲」「下一首歌曲」「播放這首歌曲」。
2. 文件管理器中的刪除按鈕，其 label 應(yīng)被寫為「刪除」，而不是「把文件從當(dāng)前文件夾刪除并放入回收站」。

不含元素的類型信息

UI 元素的類型信息應(yīng)體現(xiàn)于 traits 中，如：文件管理器中的刪除按鈕，其 label 應(yīng)被寫為「刪除」，而不是「刪除按鈕」。

隨 UI 更新

如：原 label 為「添加」的圖標(biāo)按鈕，在完成添加操作后，其圖標(biāo)會(huì)變?yōu)槔暗臉邮?，?label 也應(yīng)更新為「刪除」。

為含語(yǔ)義的動(dòng)畫添加 Label

如：表達(dá)加載的動(dòng)畫元素的 label 可以寫為「正在加載」。

為含語(yǔ)義的圖片添加 Label

含有文本的圖片、表達(dá)特定信息的圖片（如數(shù)據(jù)圖、示意圖等）都需要添加用來(lái)描述圖片信息的 label。如：用來(lái)表達(dá)頁(yè)面無(wú)內(nèi)容的插畫的 label 可以寫為「暫無(wú)內(nèi)容」。

本地化

支持系統(tǒng)的首選語(yǔ)言。

②Value

只有當(dāng) UI 元素的 label 無(wú)法清晰描述其當(dāng)前值或內(nèi)容時(shí)，才需添加 value。

隨意為元素添加 value 可能會(huì)導(dǎo)致讀屏應(yīng)用的朗讀內(nèi)容過(guò)于冗長(zhǎng)或不合邏輯。

③設(shè)計(jì) Traits

在實(shí)現(xiàn)層面，我們僅需為 UI 元素從讀屏應(yīng)用提供的 traits 中選擇 1 個(gè)或多個(gè)即可，而無(wú)需親自撰寫。

以 VoiceOver 為例，其提供以下 3 類 traits 選用：

以下是針對(duì)部分 traits 的設(shè)計(jì)指引。

Selected

用于表明 UI 元素是當(dāng)前選定的項(xiàng)目。如：tab、segmented control 上被選定的項(xiàng)目等。

Not Enabled

用于表明 UI 元素是不可交互的。

Adjustable

用于表明 UI 元素的 value 可以被更改。如：slider、pull-down button 等。

讀屏應(yīng)用會(huì)告知用戶可以在此元素上垂直滑動(dòng)以更改 value。

Update Frequently

用于表明 UI 元素的 label 或 value 會(huì)變化。

這會(huì)讓設(shè)備定期輪詢此元素以獲取更新。因此，為不必要的元素添加此 trait 會(huì)降低設(shè)備的性能和電池壽命。

Causes Page Turn

用于表明 UI 元素用于翻頁(yè)。如：在電子書中用于翻頁(yè)的 button 等。

Play Sound

用于表明 UI 元素一旦被激活就會(huì)播放聲音。

Starts Media Session

用于表明 UI 元素一旦被激活就會(huì)開(kāi)始播放或錄制媒體。

Allows Direct Interaction

用于表明 UI 元素允許直接進(jìn)行觸摸交互（即明眼人操作手機(jī)的常規(guī)形式）。

此 trait 適用于直接觸摸交互是合理形式的場(chǎng)景，如：

1. 在 GarageBand 中使彈鋼琴；
2. 在圖片編輯器中繪畫。

Modal

用于表明 UI 元素是以模態(tài)的形式呈現(xiàn)的。

這會(huì)讓讀屏應(yīng)用暫時(shí)忽略模態(tài)視圖以外的內(nèi)容。

Link

一般情況下，用于表明 UI 元素能導(dǎo)航到特定網(wǎng)頁(yè)或撥打電話。

按慣例，用于在應(yīng)用內(nèi)導(dǎo)航的元素應(yīng)使用 button 這一 trait。

Search Field

用于表明 UI 元素允許輸入字符串以執(zhí)行搜索。

Summary Element

用于表明 UI 元素提供當(dāng)前頁(yè)面內(nèi)容的概覽。如：iOS 原生天氣應(yīng)用頂部的摘要部分。

這會(huì)讓讀屏應(yīng)用一進(jìn)入此頁(yè)面的時(shí)候就開(kāi)始朗讀此元素（無(wú)論此元素在視圖層次結(jié)構(gòu)中的位置如何），但導(dǎo)航順序不會(huì)受到影響。

Header

用于表明 UI 元素是分隔內(nèi)容的標(biāo)題。如 navigation bar title、table section header 等。

借助前面提到的 rotor，我們可以讓讀屏應(yīng)用跳過(guò)大段內(nèi)容并僅朗讀這類元素。對(duì)于視障群體來(lái)說(shuō)，這應(yīng)是一項(xiàng)基本技術(shù)。因?yàn)椋麄儫o(wú)法直觀地瀏覽屏幕以快速了解、定位信息。

每個(gè)頁(yè)面都至少有一個(gè)這類元素。

Image

用于表明 UI 元素是含語(yǔ)義的圖片。純裝飾性的圖片則無(wú)需添加此 trait。

一般來(lái)說(shuō)，此 trait 不應(yīng)用于圖像按鈕，但可用于可以點(diǎn)擊以獲得更大版本的圖片。

Static Text

用于表明 UI 元素是用戶無(wú)法更改或很少更改的靜態(tài)文本。

一般來(lái)說(shuō)，此 trait 不應(yīng)用于圖像按鈕，但可用于可以點(diǎn)擊以獲得更大版本的圖片。

④設(shè)計(jì) Hints

簡(jiǎn)明扼要地描述執(zhí)行結(jié)果

盡管很少有 UI 元素需要 hints，但還是需盡可能讓 hints 保持簡(jiǎn)短，以減少用戶在使用該元素之前必須花費(fèi)的時(shí)間。

省略主語(yǔ)，并以動(dòng)詞開(kāi)頭

在撰寫 hint 時(shí)，可以想象我們是在向朋友描述如何使用此元素。如：我們會(huì)說(shuō)「你輕點(diǎn)兩下來(lái)這個(gè)按鈕就可以播放音樂(lè)了」，所以此元素的 hint 就可以寫為「輕點(diǎn)兩下來(lái)播放歌曲」。

不含元素的類型信息

UI 元素的類型信息應(yīng)體現(xiàn)于 traits 中

因此，諸如「輕點(diǎn)兩下按鈕來(lái)播放歌曲」「輕點(diǎn)兩下鏈接來(lái)購(gòu)買禮包」「輕點(diǎn)兩下按鈕來(lái)刪除項(xiàng)目」都是不理想的 hints，更優(yōu)的寫法是「輕點(diǎn)兩下來(lái)播放歌曲」「輕點(diǎn)兩下來(lái)購(gòu)買禮包」「輕點(diǎn)兩下來(lái)刪除項(xiàng)目」。

在英語(yǔ)環(huán)境下，用動(dòng)詞的第三人稱單數(shù)形式

如：使用第三人稱單數(shù)形式「Plays」，而不是命令式的「Play」。因?yàn)?，命令式的表達(dá)會(huì)讓 hints 聽(tīng)起來(lái)像命令?！窹lays」傳達(dá)的是「Tapping this control plays the song」，而「Play」更像是在傳達(dá)「You must to play the song」。

在英語(yǔ)環(huán)境下，以大寫單詞開(kāi)頭，以句號(hào)結(jié)尾

盡管 hint 是一個(gè)短語(yǔ)，而不是一個(gè)句子，但以句號(hào)結(jié)束提示有助于讀屏應(yīng)用以適當(dāng)?shù)恼Z(yǔ)調(diào)來(lái)朗讀。

本地化

支持系統(tǒng)的首選語(yǔ)言。

⑤用 Design Token 管理 Accessibility Attributes

我們建議從 component 層面開(kāi)始設(shè)計(jì)朗讀內(nèi)容：將 label、value、traits、hints 作為 design token 的 property，以實(shí)現(xiàn)更為科學(xué)、高效的設(shè)計(jì)管理。

關(guān)于 design token，建議搭配閱讀我們之前發(fā)布的《給設(shè)計(jì)師的 design token 指南》系列文章。

5. 設(shè)計(jì)朗讀方式

貼合邏輯、符合語(yǔ)境、富有情感的朗讀形式能提升無(wú)障礙讀屏的體驗(yàn)。

為向讀屏應(yīng)用指明該以什么樣的形式、語(yǔ)氣來(lái)朗讀，我們可以使用以下屬性：

1. Language
2. Spell Out
3. Punctuation
4. Phonetic Notation

①Language

用于指定使用何種語(yǔ)言來(lái)朗讀。

②Spell Out

用于指定使用何種形式來(lái)朗讀數(shù)字。如：

1. 對(duì)于電話號(hào)碼「10086」，可指定朗讀為「一零零八六」，而不是「一萬(wàn)零八十六」。
2. 對(duì)于訂單號(hào)「266 900 828」（為方便識(shí)別，此訂單號(hào)采用每三個(gè)數(shù)字為一組的形式），可指定朗讀為「二六六 九零零 八二八」，而不是「二百六十六 九百 八百二十八」或「二億六千六百九十萬(wàn)零八百二十八」。
3. 對(duì)于時(shí)間「2023/08/23 16:00」，可指定朗讀為「二零二三年八月二十三號(hào) 十六點(diǎn)整」，而不是「二千零二十三，斜杠，八，斜杠，二十三，斜杠，十六比零」

③Punctuation

用于指定是否朗讀標(biāo)點(diǎn)符號(hào)。如：對(duì)于代碼，朗讀標(biāo)點(diǎn)符號(hào)一般來(lái)說(shuō)是更合理的。

④Phonetic Notation

用于指定對(duì)特定字詞的口音、音高、語(yǔ)氣等。如：

1. 對(duì)于「番禺」，可指定朗讀為「pān yú」，而不是「fān yú」；
2. 對(duì)于「下個(gè)路口左轉(zhuǎn)」，對(duì)于明眼人來(lái)說(shuō)，能看到「左轉(zhuǎn)」被加粗強(qiáng)調(diào)，所以應(yīng)讓讀屏應(yīng)用在朗讀「左轉(zhuǎn)」時(shí)提升音高（pitch）以起到等效的強(qiáng)調(diào)效果。

在英語(yǔ)環(huán)境下，我們還可以指定是否將縮寫（abbreviation）以全稱形式朗讀。如：對(duì)于「BG」「FG」，可分別指定朗讀為「Foreground Color」「Background Color」。

此外，在 visionOS 中，我們還可以運(yùn)用 Spacial Audio 來(lái)構(gòu)建更為豐富的發(fā)聲模式。

四、進(jìn)階設(shè)計(jì)

1. 充分運(yùn)用 Rotor

VoiceOver 支持開(kāi)發(fā)者自定義 rotor。由此，我們可以根據(jù)實(shí)際需求，在 rotor 中為用戶設(shè)計(jì)快捷設(shè)置、實(shí)用功能。

①用 Rotor 簡(jiǎn)化朗讀信息

對(duì)于一些信息較多的 UI 元素（特別是由多個(gè)子元素組合構(gòu)成的復(fù)雜元素），我們可以讓讀屏應(yīng)用默認(rèn)只讀其關(guān)鍵信息，而其他信息則需用戶通過(guò)激活 rotor 中的「more content」選項(xiàng)才會(huì)被朗讀。

由此，用戶可以在他們需要或感興趣的情況下才去聽(tīng)更多信息，而無(wú)需被大量信息所淹沒(méi)。這是「Progressive Disclosure」設(shè)計(jì)模式的一種。

舉幾個(gè)例子：

在理財(cái)產(chǎn)品售賣頁(yè)，每個(gè)列表項(xiàng)均有很多信息。若讓讀屏應(yīng)用挨個(gè)閱讀，效率勢(shì)必差強(qiáng)人意。因此，我們可以將諸如「風(fēng)險(xiǎn)等級(jí)」「成立以來(lái)最大回撤」等附加信息指定為「more content」。這樣一來(lái)，只有當(dāng)用戶想進(jìn)一步了解此產(chǎn)品的信息時(shí)，才需通過(guò) rotor 選擇「more content」選項(xiàng)，并通過(guò)向上或向下輕掃的手勢(shì)來(lái)依次聽(tīng)取這些附加信息

在機(jī)票售賣列表頁(yè)，我們也可以將諸如「航空公司」「餐食」「機(jī)上 Wi-Fi」等附加信息指定為「more content」。

②用 Rotor 簡(jiǎn)化導(dǎo)航流程

對(duì)于一些信息較多的頁(yè)面，我們可以將頁(yè)面的元素進(jìn)行分類，以支持用戶可以通過(guò) rotor 來(lái)實(shí)現(xiàn)只在某類元素間進(jìn)行導(dǎo)航的效果。

由此，用戶可以只在感興趣的類目下導(dǎo)航。這是「篩選」設(shè)計(jì)模式的一種。

如：在地圖應(yīng)用中，有非常多的 POI。若我們的目的是找某個(gè)公園，則可以通過(guò) rotor 選擇「parks」選項(xiàng)，即可只在公園的 POI 間導(dǎo)航，從而更快找到心儀的公園。

以下是常用的用于簡(jiǎn)化導(dǎo)航流程的 rotor 選項(xiàng)：

2. 優(yōu)化數(shù)據(jù)圖的體驗(yàn)

前面我們提到，對(duì)于含語(yǔ)義的圖片，我們應(yīng)盡可能通過(guò) label 來(lái)描述圖片信息。但對(duì)于數(shù)據(jù)圖，常規(guī)的描述手段很難清晰、簡(jiǎn)潔地傳達(dá)信息。因?yàn)?，相比于普通的圖片，數(shù)據(jù)圖更注重對(duì)數(shù)據(jù)的解讀和傳達(dá)。

①用 Audio Graph 傳達(dá)數(shù)據(jù)走勢(shì)

我們可以通過(guò) audio graph 來(lái)「朗讀」數(shù)據(jù)圖的整體輪廓。

在 audio graph 中，每個(gè)軸的數(shù)據(jù)都會(huì)被轉(zhuǎn)化為聲音。通常，我們會(huì)將 y 軸轉(zhuǎn)化為音高（pitch），x 軸轉(zhuǎn)化為時(shí)間。

我們還需提供方便的音頻播放控制功能，如播放、暫停、停止和調(diào)整音量等。由此，用戶可以根據(jù)自己的需要靈活地控制 audio graph 音頻的播放。

②簡(jiǎn)化數(shù)據(jù)點(diǎn)間的導(dǎo)航

我們可以將每個(gè)數(shù)據(jù)點(diǎn)都創(chuàng)建成可訪問(wèn)的元素，以支持用戶訪問(wèn)數(shù)據(jù)圖中特定點(diǎn)的數(shù)據(jù)。但有時(shí)，會(huì)出現(xiàn)數(shù)據(jù)點(diǎn)太多的問(wèn)題。

正如前面我們提到的「元素分組」，面對(duì)這樣的情況，我們建議將圖表分成合理的區(qū)間，以方面用戶在大量數(shù)據(jù)點(diǎn)間導(dǎo)航。

3. 創(chuàng)建 Accessibility Notifications

若頁(yè)面發(fā)生的變化并不在焦點(diǎn)所處的元素上，視障用戶就無(wú)法像明眼人一樣用邊緣視覺(jué)（peripheral vision）察覺(jué)到變化了。

因此，當(dāng)頁(yè)面中的 UI 元素發(fā)生變化、有 UI 元素出現(xiàn)或消失時(shí)，我們需通過(guò) accessibility notification 來(lái)進(jìn)行告知，即自動(dòng)朗讀變化信息。有時(shí)，還可以自動(dòng)將焦點(diǎn)移動(dòng)到發(fā)生變化的元素上。

舉幾個(gè)例子：

在計(jì)算器中，輸入完「1+2」后點(diǎn)擊「=」，讀屏應(yīng)用會(huì)自動(dòng)朗讀「Result，3」，而無(wú)需用戶導(dǎo)航到結(jié)果區(qū)域才能聽(tīng)取結(jié)果。

在微信存儲(chǔ)空間頁(yè)，當(dāng)「微信已用空間」計(jì)算完畢時(shí)，讀屏應(yīng)用會(huì)自動(dòng)播報(bào)「微信已用空間」的具體數(shù)據(jù)。

五、設(shè)計(jì)驗(yàn)收

1. 用輔助工具搜尋問(wèn)題

對(duì)于 Apple 設(shè)備，可用 Xcode 中的 Accessibility Inspector 來(lái)幫助搜尋問(wèn)題；

對(duì)于 Android 設(shè)備，可用 Accessibility Scanner 來(lái)幫助搜尋問(wèn)題。

下面，我們將重點(diǎn)介紹使用 Accessibility Inspector 來(lái)進(jìn)行驗(yàn)收的方式。

Accessibility Inspector 是 Xcode 自帶的無(wú)障礙檢查工具。我們可以在 Xcode 的中通過(guò)「Xcode > Open Developer Tool > Accessibility Inspector」打開(kāi)，也可以直接通過(guò) Spotlight 搜索來(lái)打開(kāi)。

若需驗(yàn)收的應(yīng)用非 macOS 應(yīng)用，我們需先在應(yīng)用所安裝的設(shè)備上打開(kāi)「Developer Mode」。

①檢查特定元素

點(diǎn)擊 Accessibility Inspector 窗口右上方的「Inspection Pointer」toggle button。

點(diǎn)擊想要檢查的 UI 元素。

在 Accessibility Inspector 窗口的「Inspection Detail」區(qū)，查看此元素的各項(xiàng) accessibility attributes，并檢查其完整性、正確性。

②檢查導(dǎo)航流程

若需驗(yàn)收在無(wú)障礙讀屏體驗(yàn)中的 liner navigation，可點(diǎn)擊 Accessibility Inspector 窗口右上方的「Auto Navigate」toggle button，Accessibility Inspector 就會(huì)按導(dǎo)航順序挨個(gè)朗讀 UI 元素。

③自動(dòng)化搜尋問(wèn)題

我們也可以利用 Accessibility Inspector 一鍵檢查應(yīng)用特定頁(yè)面的所有 UI 元素。

1. 打開(kāi)需檢查的特定頁(yè)面。
2. 在 Accessibility Inspector 窗口左上角的「Device Target」pop-up button 中，選擇所需檢查的應(yīng)用。
3. 點(diǎn)擊 Accessibility Inspector 窗口右上角的「Audit」。
4. 點(diǎn)擊 Accessibility Inspector 窗口中的「Run Audit」，即可看到搜尋到的所有無(wú)障礙問(wèn)題。
5. 在列表中，可以查看問(wèn)題描述、截圖、修復(fù)建議。

2. 在擬真環(huán)境中上手體驗(yàn)

在 iOS 中，我們可以打開(kāi)「連按三次電源鍵以快速打開(kāi)和關(guān)閉 VoiceOver」的選項(xiàng)。這不僅能讓每次啟動(dòng)或禁用 VoiceOver 更快，也能在不確定要使用哪個(gè)手勢(shì)時(shí)輕松禁用旁白。

為了能更貼近視障用戶的感受，我們還可以在使用 VoiceOver 的過(guò)程中打開(kāi) Screen Curtain（屏幕簾）。當(dāng) Screen Curtain 打開(kāi)時(shí)，設(shè)備屏幕將始終處于關(guān)閉狀態(tài)。

3. 驗(yàn)收 List

以下 checklist 僅供參考，可以根據(jù)實(shí)際需求進(jìn)行調(diào)整。

六、不僅僅是無(wú)障礙讀屏

優(yōu)良的無(wú)障礙讀屏體驗(yàn)，還能與其他諸多體驗(yàn)有機(jī)結(jié)合，共建完善的設(shè)計(jì)體系。

1. 語(yǔ)音控制

語(yǔ)音控制指的是用語(yǔ)音命令來(lái)執(zhí)行各種操作的能力，如：打開(kāi)應(yīng)用、更改設(shè)置、瀏覽文件等。

語(yǔ)音控制與無(wú)障礙讀屏的關(guān)系在于：

1. 視障群體也可以通過(guò)語(yǔ)音控制實(shí)現(xiàn)無(wú)障礙讀屏的 direct command，而無(wú)需通使用觸屏手勢(shì)。
2. 無(wú)障礙讀屏設(shè)計(jì)中的 label，也可以作為語(yǔ)音控制的口令。因此，簡(jiǎn)短的 label 能讓語(yǔ)音口令更易于記憶和說(shuō)出。

2. 切換控制

借助切換控制，用戶可以使用多種自適應(yīng)設(shè)備 (如 switch、joystick、鍵盤空格鍵或觸控板) 操作 app：逐個(gè)掃描 UI 元素，到達(dá)所需的 UI 元素后，使用設(shè)備執(zhí)行適當(dāng)?shù)牟僮鳌?/p>

切換控制與無(wú)障礙讀屏的關(guān)系在于：

1. 視障用戶也可以用切換控制的設(shè)備來(lái)進(jìn)行操作，而無(wú)需使用觸屏手勢(shì)。
2. 無(wú)障礙讀屏的導(dǎo)航順序、元素分組也同樣適用于切換控制。

3. 鍵盤導(dǎo)航

鍵盤導(dǎo)航指的是使用鍵盤進(jìn)行頁(yè)面導(dǎo)航的能力。

鍵盤導(dǎo)航與無(wú)障礙讀屏的關(guān)系在于：

1. 在 PC 端，兩者往往是配合使用的（通過(guò)鍵盤導(dǎo)航來(lái)移動(dòng)焦點(diǎn)、操作）。
2. 鍵盤導(dǎo)航的 tab order、focus group 等設(shè)計(jì)理念同樣適用于無(wú)障礙讀屏。

4. 明眼人的體驗(yàn)

無(wú)障礙讀屏設(shè)計(jì)不僅對(duì)視障群體有意義，對(duì)于明眼人來(lái)說(shuō)也同樣具有重要意義。

1. 足夠大的響應(yīng)熱區(qū)，穩(wěn)定的界面布局，對(duì)于明眼人和盲人都同樣重要。明眼人可以從中學(xué)習(xí)如何更好地設(shè)計(jì)用戶界面，以提供更清晰、簡(jiǎn)潔和易于理解的信息。
2. 無(wú)障礙讀屏設(shè)計(jì)中的 label，有利于對(duì)頁(yè)面進(jìn)行檢索。對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，其對(duì) SEO 更是大有裨益。
3. 無(wú)障礙讀屏設(shè)計(jì)本身可以可以幫助更多人理解殘障人士的需求和難處，促進(jìn)社會(huì)平等和包容性的提高。

結(jié)語(yǔ)

設(shè)計(jì)優(yōu)良的無(wú)障礙讀屏體驗(yàn)可以幫助視障群體獲得與其他人相同的使用權(quán)力和機(jī)會(huì)，更可以讓我們深入關(guān)注社會(huì)公正與可持續(xù)發(fā)展。我們希望能有更多設(shè)計(jì)師能參與到設(shè)計(jì)無(wú)障礙讀屏的工作中來(lái)，真正實(shí)現(xiàn)科技相善。

歡迎關(guān)注作者微信公眾號(hào)：「We-Design」