鑽石舞台

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

圖片

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

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

無需圖片說明

無需遵循色彩對比度指南

無需備用文本

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

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

W3C

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

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

功能型圖片

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

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

徽標

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

可能不符合文本大小要求

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

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

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

聲音和運動

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

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

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

聲音的替代方案

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

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

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

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

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

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

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 雲端硬盤結合使用。

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

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

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

點擊屏末|閱讀原文|即刻了解無障礙功能更多相關內容