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

圖片

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

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

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

• 無(wú)需圖片說(shuō)明

• 無(wú)需遵循色彩對(duì)比度指南

• 無(wú)需備用文本

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

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

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

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

• W3C

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

正確做法這張信息型圖片是一張顯示一個(gè)地點(diǎn)是什么樣子的照片。 (備用文本示例: 人們?cè)诩~約高線公園散步和騎自行車(chē))

信息型圖片中包含基本元素和非基本元素。基本信息的大號(hào)文字色彩對(duì)比度應(yīng)是 3:1，小號(hào)文字的對(duì)比度，應(yīng)是 4.5:1。

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

功能型圖片

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

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

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

徽標(biāo)

• 可能不符合色彩對(duì)比度要求

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

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

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

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

聲音和運(yùn)動(dòng)

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

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

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

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

聲音的替代方案

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

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

運(yùn)動(dòng)

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

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

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

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

• 移動(dòng)、滾動(dòng)或閃爍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

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

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

• 自動(dòng)讀出文本

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

計(jì)時(shí)控件

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

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

實(shí)現(xiàn)無(wú)障礙

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

您可以在啟用平臺(tái)無(wú)障礙設(shè)置的情況下 (在實(shí)現(xiàn)期間和實(shí)現(xiàn)之后) 測(cè)試設(shè)計(jì)。

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

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

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

標(biāo)記界面元素

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

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

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

幫助文檔

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

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

測(cè)試和研究

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

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

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

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

?