隨著時代的發展，"無障礙體驗" 對開發者的意義也愈發重大，在上一篇文章中，我們為您介紹了無障礙布局和排版、文案等相關內容。本文將進一步為您介紹圖片、聲音和運動、實現無障礙的內容。

圖片

要知道何時以及如何使圖片遵循無障礙指南，了解圖片類型之間的差異至關重要。

要了解圖片是否需要遵循色彩對比度指南以及是否需要圖片說明，您需要確定它是裝飾型的還是信息型的。

• 色彩對比度指南https://material.io/design/usability/accessibility.html#color-contrast

• 無需圖片說明

• 無需遵循色彩對比度指南

• 無需備用文本

• 在圖片標簽中應有一個 null (空) 標記 (alt=””)，以便屏幕閱讀器跳過它們

• W3Chttps://www.w3.org/WAI/tutorials/images/decorative

根據 W3C 的定義，信息型圖片會以簡短易懂的方式傳達概念。信息型圖片:

• 傳達與相鄰文本相關的準確信息
• 需要圖片說明
• 如果圖片說明或相鄰文本未對圖片進行解釋，則需要備用文本
• 對于不可或缺的內容，必須遵循色彩對比度指南

• W3C

  https://www.w3.org/WAI/tutorials/images/informative

正確做法這張信息型圖片是一張顯示一個地點是什么樣子的照片。 (備用文本示例: 人們在紐約高線公園散步和騎自行車)

信息型圖片中包含基本元素和非基本元素。基本信息的大號文字色彩對比度應是 3:1，小號文字的對比度，應是 4.5:1。

1. 基本信息: 文本符合所有的對比度和尺寸要求。
2. 基本信息: 有關說明的插圖式表現形式，遵從了色彩對比度指南的要求。
3. 非基本信息: 裝飾型元素形成了插圖的背景，賦予其獨特的個性。它們不傳達信息，也無需滿足對比度要求。

功能型圖片

根據 W3C 的定義，功能型圖片包括徽標、圖標、按鈕內的圖片以及可操作的圖片 (如鏈接)。功能型圖片的備用文本不同于其他類型的圖片的備用文本，因為功能型圖片的備用文本描述的是圖片的功能，而不是它的內容或它的外觀。

• W3Chttps://www.w3.org/WAI/tutorials/images/functional

如果按鈕內的圖標或圖片具有特定功能，請向其添加 alt 標簽，并使用操作動詞 (而不是圖標名稱) 說明其功能。如需了解如何撰寫更符合無障礙標準的文本，您可以參閱官方文檔:

徽標

• 可能不符合色彩對比度要求

• 可能不符合文本大小要求

如需了解徽標和色彩對比度，您可以參閱色彩和對比度:

不過，如果一個徽標是文本鏈接的一部分，只起裝飾作用而沒有任何功能，請添加一個 null 值 alt 標記 ((alt=””)。

您可以訪問文檔，了解對比度的更多相關內容:

聲音和運動

如果您向界面元素添加描述性標簽，用戶可以使用聲音在您的應用中導航。如果用戶使用屏幕閱讀器 (如 TalkBack) 并通過輕觸探索進行導航，那么當其輕觸屏幕上的界面元素時，屏幕閱讀器會將標簽大聲讀出來。

• 輕觸探索https://support.google.com/accessibility/android/answer/6006598?hl=zh-Hans

• 有聲音通過屏幕閱讀器播放，例如自動播放的背景音樂 (您可以為用戶提供暫停或停止播放這些聲音的控件)

• 原生元素中添加了額外的聲音 (屏幕閱讀器將能夠正確地解釋原生元素)

聲音的替代方案

可以為聲音或其他關鍵音頻元素和提醒提供視覺替代方案，如字幕或轉錄。

您可以訪問官方文檔，了解標記界面元素的更多相關內容:

運動

Material Design 使用運動在屏幕之間引導焦點。表面會轉換為需要用戶關注的焦點，不重要的元素會移除。

• 會自動移動、滾動或閃爍的內容，如果持續時間超過 5 秒，則可暫停、停止或隱藏

• 將閃爍內容的閃爍頻率限制為 1 秒內不超過 3 次，以滿足閃爍和紅閃閾值要求

• 避免屏幕中央大區域出現閃爍

• 移動、滾動或閃爍https://www.w3.org/TR/WCAG20/#general-thresholddef
• 閃爍和紅閃閾值https://www.w3.org/TR/WCAG20/#general-thresholddef
• 屏幕中央大區域出現閃爍https://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G176

• 運動有助于打造富有表現力且易于使用的界面

  https://material.io/design/motion/understanding-motion.html

• 自動讀出文本

  https://codelabs.developers.google.com/codelabs/basic-android-accessibility/index.html?index=..%2F..%2Findex#6

計時控件

如果計時器導致執行高優先級功能的控件過快消失，用戶可能會忽略它們。例如，TalkBack 會大聲讀出獲得焦點的控件。為這類控件設置計時器可能會妨礙其完成任務。

啟用重要功能的控件可以允許用戶再次打開它們，或以其他方式執行相同的功能。如需詳細了解，您可以參閱組合相關內容:

實現無障礙

通過使用標準平臺控件和語義 HTML (在網站上)，應用會自動包含與平臺的輔助技術很好地協同工作所需的標記和代碼。滿足各個平臺的無障礙標準并支持其輔助技術 (包括快捷方式和結構) 可以為用戶提供高效體驗。

您可以在啟用平臺無障礙設置的情況下 (在實現期間和實現之后) 測試設計。

• 使用可擴展的文本和空間寬裕的布局，以便用戶能夠啟用大號字體、顏色校正、放大功能或其他輔助設置。

• 鍵盤和鼠標界面可以通過僅鍵盤輸入來實現每一項任務和所有懸停信息。

• 觸摸界面可以讓屏幕閱讀器和其他輔助技術設備讀取界面的所有部分。

標記界面元素

為了讓使用屏幕閱讀器的用戶知道哪些界面元素是可點按的，不妨讓屏幕閱讀器大聲讀出組件的名稱。可以將 contentDescription 屬性添加到所包含的圖標沒有可見文本的組件 (如按鈕、圖標和標簽頁) 中。對于 Web 應用，可以添加一個 add aria-labe:

https://web.dev/aria-labels-and-relationships/

了解描述每個界面元素的相關信息，您可以查看我們之前的推文《為應用打造更好的無障礙體驗》 。

幫助文檔

可以將具有特殊的無障礙注意事項的功能納入幫助文檔中。例如，您可以查看指南了解如何將屏幕閱讀器與 Google 云端硬盤結合使用。

• 指南: 將屏幕閱讀器與 Google 云端硬盤結合使用https://support.google.com/drive/answer/6034939

測試和研究

• 在啟用各種輔助技術的情況下，從頭到尾測試您的應用是否可以充分完成任務。例如，在 TalkBack 中啟用 "輕觸探索" 功能，更改大聲讀出文本的速度。
• 讓有障礙的用戶幫助您測試應用。
• 考慮如何使各個元素障礙更少，同時又能將它們整合到一個連貫的用戶流。
• 讓應用中的主要任務對各種用戶來說都盡可能易用。

與您的用戶交流，特別是那些使用輔助技術的用戶，了解他們的需求，他們希望從您的應用中獲得什么，他們使用什么工具，以及他們如何使用這些工具。熟悉這些工具，幫助您為他們提供更好的體驗。

您可以參考面向設計人員的無障礙研究指南，了解更多相關內容:

以上就是無障礙設計的相關內容，感謝您的持續關注。也歡迎您持續關注我們，及時了解更多開發技術和產品更新等資訊動態。

?