了解無障礙

改進產品的無障礙設計可以面向所有用戶提高產品的通用性，包括有弱視、失明、聽力障礙、認知障礙、運動障礙或情境式障礙 (如手臂骨折) 的用戶。

• 確保人人都能使用網絡，并享受網絡帶來的便捷。

  https://www.google.com/accessibility

• 在全球范圍實現無障礙

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

原則

1. 清晰:通過設計清晰的布局，添加明確的號召性用語，幫助用戶導航。
2. 健全:設計應用的宗旨是滿足不同用戶的需求。
3. 專屬:適配平臺專屬的輔助技術，就像應用支持按觸、鍵盤和鼠標一樣。

本部分主要適用于移動界面設計。如需詳細了解如何設計和開發更符合無障礙標準的產品，您可以訪問 Google 無障礙中心網站:

免責聲明:這些資料僅供參考，并不構成法律建議。如果您有任何特定問題，請咨詢您的律師尋求建議。

輔助技術

輔助技術可以通過屏幕閱讀器、放大工具和助聽器等設備幫助提升、維持或改善殘障人士的各項能力。

屏幕閱讀器是一種使用盲文顯示屏或會大聲朗讀文本的軟件程序，例如 Google 的屏幕閱讀器 TalkBack。有視力障礙、閱讀困難或暫時不能閱讀的用戶可以使用屏幕閱讀器，它會將顯示的內容大聲朗讀出來。該程序可以識別出段落和按鈕文字，以及圖標和標題的可選文本等隱藏的內容。您可以為內容添加標簽，以優化使用屏幕閱讀器或使用純文字版界面用戶的使用體驗。

• TalkBack

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

• 輕觸探索: 借助觸摸式屏幕閱讀器，用戶只需在屏幕上移動手指，即可聽取手指正下方的內容。這讓用戶能夠快速了解整個界面?；蛘?，用戶可以通過肌肉記憶快速移動到某個界面元素。在 TalkBack 中，此功能稱為 "輕觸探索"。若要選擇一個項目，用戶可以點按兩次。

• 線性導航 (Linear navigation): 用戶還可以通過在屏幕上向后或向前滑動來移動焦點，以線性方式從上到下閱讀頁面內容。在 TalkBack 中，此功能稱為 "線性導航"，這讓用戶能夠鎖定特定元素。

• 輕觸探索

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

通過頁面標識導航

層次結構

• 清晰可見的元素

• 足夠的對比度和大小
• 明確的重要性層次結構
• 一目了然的關鍵信息

若要表達界面中某一部分相對重要，您可以進行以下操作:

• 將重要操作放置在屏幕頂部或底部 (可通過快捷方式訪問)
• 并排放置具有相似層次結構的相關內容

視覺層次結構

為了使屏幕閱讀器能夠按照既定的順序閱讀內容，設計人員與開發者需要緊密協作，既要按正確的順序編寫 HTML，又要了解屏幕閱讀器將如何解讀設計。

雖然 CSS 決定頁面的布局和外觀，但屏幕閱讀器在任何平臺 (移動應用或網站) 上都依賴于自上而下的 HTML 結構。在屏幕閱讀器閱讀內容時，該結構為其創建了一個可遵循的路徑。

正確做法

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

注意

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

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

為了幫助您確定焦點及其移動軌跡，您可以考慮以下方面:

• 元素獲得焦點的順序
• 元素的分組方式
• 當獲得焦點的元素消失時焦點移動的位置

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

分組

顏色和對比度

您可以使用顏色和對比度幫助用戶查看和解讀應用的內容，與正確的元素互動，以及理解相關操作。

• W3C

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

徽標和裝飾性元素

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

正確做法

裝飾性徽標易于辨別，可以不符合對比度要求。

錯誤做法

不要為了符合對比度要求而使徽標失真。

?