借助 Material Design，幫助您打造更好的無障礙應(yīng)用 (下篇)

隨著時代的發(fā)展，"無障礙體驗" 對開發(fā)者的意義也愈發(fā)重大，在上一篇文章中，我們?yōu)槟榻B了無障礙布局和排版、文案等相關(guān)內(nèi)容。本文將進(jìn)一步為您介紹圖片、聲音和運動、實現(xiàn)無障礙的內(nèi)容。

圖片

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

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

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

• 無需圖片說明

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

• 無需備用文本

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

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

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

• 傳達(dá)與相鄰文本相關(guān)的準(zhǔn)確信息
• 需要圖片說明
• 如果圖片說明或相鄰文本未對圖片進(jìn)行解釋，則需要備用文本
• 對于不可或缺的內(nèi)容，必須遵循色彩對比度指南

• W3C

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

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

信息型圖片中包含基本元素和非基本元素?；拘畔⒌拇筇栁淖稚蕦Ρ榷葢?yīng)是 3:1，小號文字的對比度，應(yīng)是 4.5:1。

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

功能型圖片

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

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

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

徽標(biāo)

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

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

如需了解徽標(biāo)和色彩對比度，您可以參閱色彩和對比度:

不過，如果一個徽標(biāo)是文本鏈接的一部分，只起裝飾作用而沒有任何功能，請?zhí)砑右粋€ null 值 alt 標(biāo)記 ((alt=””)。

您可以訪問文檔，了解對比度的更多相關(guān)內(nèi)容:

聲音和運動

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

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

• 有聲音通過屏幕閱讀器播放，例如自動播放的背景音樂 (您可以為用戶提供暫?；蛲Ｖ共シ胚@些聲音的控件)

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

聲音的替代方案

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

您可以訪問官方文檔，了解標(biāo)記界面元素的更多相關(guān)內(nèi)容:

運動

Material Design 使用運動在屏幕之間引導(dǎo)焦點。表面會轉(zhuǎn)換為需要用戶關(guān)注的焦點，不重要的元素會移除。

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

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

• 避免屏幕中央大區(qū)域出現(xiàn)閃爍

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

• 運動有助于打造富有表現(xiàn)力且易于使用的界面

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

• 自動讀出文本

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

計時控件

如果計時器導(dǎo)致執(zhí)行高優(yōu)先級功能的控件過快消失，用戶可能會忽略它們。例如，TalkBack 會大聲讀出獲得焦點的控件。為這類控件設(shè)置計時器可能會妨礙其完成任務(wù)。

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

實現(xiàn)無障礙

通過使用標(biāo)準(zhǔn)平臺控件和語義 HTML (在網(wǎng)站上)，應(yīng)用會自動包含與平臺的輔助技術(shù)很好地協(xié)同工作所需的標(biāo)記和代碼。滿足各個平臺的無障礙標(biāo)準(zhǔn)并支持其輔助技術(shù) (包括快捷方式和結(jié)構(gòu)) 可以為用戶提供高效體驗。

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

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

• 鍵盤和鼠標(biāo)界面可以通過僅鍵盤輸入來實現(xiàn)每一項任務(wù)和所有懸停信息。

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

標(biāo)記界面元素

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

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

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

幫助文檔

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

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

測試和研究

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

與您的用戶交流，特別是那些使用輔助技術(shù)的用戶，了解他們的需求，他們希望從您的應(yīng)用中獲得什么，他們使用什么工具，以及他們?nèi)绾问褂眠@些工具。熟悉這些工具，幫助您為他們提供更好的體驗。

您可以參考面向設(shè)計人員的無障礙研究指南，了解更多相關(guān)內(nèi)容:

以上就是無障礙設(shè)計的相關(guān)內(nèi)容，感謝您的持續(xù)關(guān)注。也歡迎您持續(xù)關(guān)注我們，及時了解更多開發(fā)技術(shù)和產(chǎn)品更新等資訊動態(tài)。

?