了解無(wú)障礙

改進(jìn)產(chǎn)品的無(wú)障礙設(shè)計(jì)可以面向所有用戶(hù)提高產(chǎn)品的通用性，包括有弱視、失明、聽(tīng)力障礙、認(rèn)知障礙、運(yùn)動(dòng)障礙或情境式障礙 (如手臂骨折) 的用戶(hù)。

• 確保人人都能使用網(wǎng)絡(luò)，并享受網(wǎng)絡(luò)帶來(lái)的便捷。

  https://www.google.com/accessibility

• 在全球范圍實(shí)現(xiàn)無(wú)障礙

  https://design.google/library/designing-global-accessibility-part-1

原則

1. 清晰:通過(guò)設(shè)計(jì)清晰的布局，添加明確的號(hào)召性用語(yǔ)，幫助用戶(hù)導(dǎo)航。
2. 健全:設(shè)計(jì)應(yīng)用的宗旨是滿(mǎn)足不同用戶(hù)的需求。
3. 專(zhuān)屬:適配平臺(tái)專(zhuān)屬的輔助技術(shù)，就像應(yīng)用支持按觸、鍵盤(pán)和鼠標(biāo)一樣。

本部分主要適用于移動(dòng)界面設(shè)計(jì)。如需詳細(xì)了解如何設(shè)計(jì)和開(kāi)發(fā)更符合無(wú)障礙標(biāo)準(zhǔn)的產(chǎn)品，您可以訪(fǎng)問(wèn) Google 無(wú)障礙中心網(wǎng)站:

免責(zé)聲明:這些資料僅供參考，并不構(gòu)成法律建議。如果您有任何特定問(wèn)題，請(qǐng)咨詢(xún)您的律師尋求建議。

輔助技術(shù)

輔助技術(shù)可以通過(guò)屏幕閱讀器、放大工具和助聽(tīng)器等設(shè)備幫助提升、維持或改善殘障人士的各項(xiàng)能力。

屏幕閱讀器是一種使用盲文顯示屏或會(huì)大聲朗讀文本的軟件程序，例如 Google 的屏幕閱讀器 TalkBack。有視力障礙、閱讀困難或暫時(shí)不能閱讀的用戶(hù)可以使用屏幕閱讀器，它會(huì)將顯示的內(nèi)容大聲朗讀出來(lái)。該程序可以識(shí)別出段落和按鈕文字，以及圖標(biāo)和標(biāo)題的可選文本等隱藏的內(nèi)容。您可以為內(nèi)容添加標(biāo)簽，以?xún)?yōu)化使用屏幕閱讀器或使用純文字版界面用戶(hù)的使用體驗(yàn)。

• TalkBack

  https://support.google.com/accessibility/android/answer/6283677

• 輕觸探索: 借助觸摸式屏幕閱讀器，用戶(hù)只需在屏幕上移動(dòng)手指，即可聽(tīng)取手指正下方的內(nèi)容。這讓用戶(hù)能夠快速了解整個(gè)界面?；蛘撸脩?hù)可以通過(guò)肌肉記憶快速移動(dòng)到某個(gè)界面元素。在 TalkBack 中，此功能稱(chēng)為 "輕觸探索"。若要選擇一個(gè)項(xiàng)目，用戶(hù)可以點(diǎn)按兩次。

• 線(xiàn)性導(dǎo)航 (Linear navigation): 用戶(hù)還可以通過(guò)在屏幕上向后或向前滑動(dòng)來(lái)移動(dòng)焦點(diǎn)，以線(xiàn)性方式從上到下閱讀頁(yè)面內(nèi)容。在 TalkBack 中，此功能稱(chēng)為 "線(xiàn)性導(dǎo)航"，這讓用戶(hù)能夠鎖定特定元素。

• 輕觸探索

  https://support.google.com/accessibility/android/answer/6006598

通過(guò)頁(yè)面標(biāo)識(shí)導(dǎo)航

層次結(jié)構(gòu)

• 清晰可見(jiàn)的元素

• 足夠的對(duì)比度和大小
• 明確的重要性層次結(jié)構(gòu)
• 一目了然的關(guān)鍵信息

若要表達(dá)界面中某一部分相對(duì)重要，您可以進(jìn)行以下操作:

• 將重要操作放置在屏幕頂部或底部 (可通過(guò)快捷方式訪(fǎng)問(wèn))
• 并排放置具有相似層次結(jié)構(gòu)的相關(guān)內(nèi)容

視覺(jué)層次結(jié)構(gòu)

為了使屏幕閱讀器能夠按照既定的順序閱讀內(nèi)容，設(shè)計(jì)人員與開(kāi)發(fā)者需要緊密協(xié)作，既要按正確的順序編寫(xiě) HTML，又要了解屏幕閱讀器將如何解讀設(shè)計(jì)。

雖然 CSS 決定頁(yè)面的布局和外觀，但屏幕閱讀器在任何平臺(tái) (移動(dòng)應(yīng)用或網(wǎng)站) 上都依賴(lài)于自上而下的 HTML 結(jié)構(gòu)。在屏幕閱讀器閱讀內(nèi)容時(shí)，該結(jié)構(gòu)為其創(chuàng)建了一個(gè)可遵循的路徑。

正確做法

該 HTML 從左上 (第 1 步) 到右上 (第 2 步)、左下 (第 3 步) 再到右下 (第 4 步) 的順序閱讀內(nèi)容，反映了視覺(jué)層次結(jié)構(gòu)。

注意

雖然一些用戶(hù)可能會(huì)按照屏幕的視覺(jué)順序查看圖片，即從左上 (第 1 步) 到右上 (第 2 步)、左下 (第 3 步) 再到右下 (第 4 步) 的順序，但默認(rèn)情況下，屏幕閱讀器會(huì)按照 HTML 的自上而下順序 (即第 1 步、第 3 步、第 2 步 和第 4 步) 讀出內(nèi)容。

https://web.dev/dom-order-matters/

為了幫助您確定焦點(diǎn)及其移動(dòng)軌跡，您可以考慮以下方面:

• 元素獲得焦點(diǎn)的順序
• 元素的分組方式
• 當(dāng)獲得焦點(diǎn)的元素消失時(shí)焦點(diǎn)移動(dòng)的位置

△黑色圓圈表示屏幕上的元素可以獲得焦點(diǎn)的順序

分組

顏色和對(duì)比度

您可以使用顏色和對(duì)比度幫助用戶(hù)查看和解讀應(yīng)用的內(nèi)容，與正確的元素互動(dòng)，以及理解相關(guān)操作。

• W3C

  https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

徽標(biāo)和裝飾性元素

裝飾性元素 (如徽標(biāo)或插圖) 可以不符合對(duì)比度要求，但如果它們具有重要功能 (如鏈接到網(wǎng)站)，增加對(duì)比度會(huì)比較易于辨別。

正確做法

裝飾性徽標(biāo)易于辨別，可以不符合對(duì)比度要求。

錯(cuò)誤做法

不要為了符合對(duì)比度要求而使徽標(biāo)失真。

?