Material Design 的觸摸目標(biāo)指南可以幫助無法看到屏幕或難以處理較小的觸摸目標(biāo)的用戶點(diǎn)按應(yīng)用中的元素。

觸摸目標(biāo)是屏幕上響應(yīng)用戶輸入的部分。它們會超出元素的可視邊界。例如，一個圖標(biāo)的大小看上去可能是 24 x 24dp，但加上它周圍的內(nèi)邊距，構(gòu)成的完整觸摸目標(biāo)大小是 48 x 48dp。

對于大多數(shù)平臺，請考慮將觸摸目標(biāo)的大小至少設(shè)置為 48 x 48dp。不管屏幕尺寸如何，這一大小的觸摸目標(biāo)的實(shí)際尺寸都是大約 9 毫米。建議的觸摸元素目標(biāo)尺寸為 7 到 10 毫米。為充分考慮更廣泛的用戶群體，建議您使用較大的觸摸目標(biāo)。

請注意，在 iOS 上，建議的觸摸目標(biāo)尺寸是 44 x 44pt。如需獲取特定平臺實(shí)現(xiàn)指南，您可以訪問開發(fā)者資源頁面:

https://material.io/develop

指針目標(biāo)類似于觸摸目標(biāo)，但適用于使用運(yùn)動追蹤指針設(shè)備 (如鼠標(biāo)或觸控筆) 的情形。建議將指針目標(biāo)至少設(shè)置為 44 x 44dp。

1.1.3 觸摸目標(biāo)間距

大多數(shù)情況下，在觸摸目標(biāo)四周設(shè)置 8dp 或更大的分隔空間，有助于平衡信息密度和可用性。

1.2.1 響應(yīng)式布局

1.2.2 項(xiàng)目分組

正確做法

滑塊值與滑塊控件緊鄰。

注意

如果滑塊值離滑塊控件太遠(yuǎn)，請考慮移動滑塊值。使用屏幕放大工具的用戶如果不來回平移，可能無法同時查看滑塊及相應(yīng)值。

您可以參考以下內(nèi)容，了解更多相關(guān)信息:

• 像素密度
  https://m2.material.io/design/layout/pixel-density.html#pixel-density
• 語言注意事項(xiàng)

  https://m2.material.io/design/typography/language-support.html#language-considerations

1.3.1 字體

https://material.io/design/typography/language-support.html#language-considerations

2.1.1 可見文本和不可見文本

2.1.2 備用文本

注意:

僅使用一兩個詞來描述圖片可能無法提供有效信息。

(備用文本示例: 天際線)

注意:

如果備用文本的描述冗長，則可能會被截?cái)唷４蠖鄶?shù)屏幕閱讀器不會讀出超過 125 個字符的文本。

(備用文本示例:東京塔天際線。夜晚從當(dāng)?shù)匾患揖频甑奈蓓斉臄z。這張圖片于 2014 年 3 月 7 日滿月之際用數(shù)碼單反拍攝)

注意:

不需要在備用文本中包含"照片"或"圖片"這樣的字詞。

(備用文本示例:東京塔圖片)

對于圖片中和周圍的文本，應(yīng)考慮無障礙設(shè)計(jì)，因?yàn)檫@些文本提供關(guān)于圖片的關(guān)鍵信息。

① 圖片

② 圖片說明

③ 相鄰文本

圖片說明

圖片說明是顯示在圖片下方的文本。圖片說明用于解說圖片的背景信息 - 人物、內(nèi)容、時間和地點(diǎn)。視力正常的用戶和使用屏幕閱讀器的用戶都依靠圖片說明來獲取對圖片的描述。

對于較長的描述，請使用圖片說明而不是備用文本，因?yàn)閳D片說明適用于所有用戶，而備用文本的長度限制在 125 個字符內(nèi)。

(圖片說明示例: 這把 20 世紀(jì) 20 年代的古董搖椅原本是總統(tǒng)圖書館的重要收藏品，現(xiàn)存放在 Black 博士家中。)

(備用文本示例:一把放置在書房里的古董紅木搖椅，上面鋪有綠色天鵝絨墊子)

注意:

相鄰文本

相鄰文本或正文文本是圖片旁邊的文本，可以在敘述過程中對圖片進(jìn)行解釋說明。如果相鄰文本對圖片進(jìn)行了解釋說明，則可能不需要備用文本，且可以將 alt 標(biāo)記留空 (alt=””)。如果將 alt 標(biāo)記留空，請刪除會顯示的圖片文件名。

圖片說明和附近的正文文本對圖片進(jìn)行了解釋說明。alt 標(biāo)記為空 (alt=””)。

(圖片說明示例: 這把 20 世紀(jì) 20 年代的古董搖椅原本是總統(tǒng)圖書館的重要收藏品，現(xiàn)存放在 Black 博士家中。)

(相鄰文本:這件古董收藏品是在佛羅里達(dá)州奧蘭多市的一個車庫售賣活動中發(fā)現(xiàn)的，現(xiàn)存放在 Simone Black 博士的書房里。現(xiàn)在，這把椅子放置在 Black 博士家的數(shù)百本圖書之間，自然光線輕輕灑落在它的周圍。)

圖片中的嵌入式文本

屏幕閱讀器無法閱讀嵌入在圖片中的文本。如果圖片中有以文本形式嵌入的重要信息，請?jiān)趥溆梦谋局邪@些重要信息。

注意:

在圖片中以文本形式嵌入重要信息并將同樣的內(nèi)容作為備用文本時，請務(wù)必謹(jǐn)慎。

(嵌入式文本和備用文本示例:這把 20 世紀(jì) 20 年代的古董紅木搖椅上面鋪有綠色天鵝絨墊子，曾經(jīng)是總統(tǒng)圖書館的重要收藏品，現(xiàn)存放在 Black 博士家中)

結(jié)合使用備用文本和圖片說明

備用文本和圖片說明包含不同的信息。只有在以下情況中，備用文本才有用: 相鄰文本和圖片說明沒有描述圖片的特征，而這些特征對于無法看到圖片的用戶了解圖片至關(guān)重要，比如對物體的顏色、大小和位置的描述。

正確做法:

對于較長的描述，使用圖片說明。

(圖片說明文本示例:這把 20 世紀(jì) 20 年代的古董搖椅原本是總統(tǒng)圖書館的重要收藏品，現(xiàn)存放在 Black 博士家中。它將于今年秋天在波士頓進(jìn)行拍賣。)

(備用文本示例:一把放置在書房里的古董紅木搖椅，上面鋪有綠色天鵝絨墊子)

2.2 閱讀速度

2.3 控件類型和狀態(tài)

屏幕閱讀器可以通過說出控件名稱或發(fā)出聲音，來自動聲明控件的類型或狀態(tài)。

• 無障礙角色關(guān)聯(lián):可以將每個元素與網(wǎng)站上的無障礙角色相關(guān)聯(lián)或?qū)ζ溥M(jìn)行編碼，以使其能夠正確通信。這意味著將按鈕設(shè)置為按鈕，將復(fù)選框設(shè)置為復(fù)選框。

• 原生元素:如果您擴(kuò)展或沿用原生界面元素，可能會找到正確的角色。否則，要針對各個平臺覆蓋無障礙信息，您可以參閱適用于網(wǎng)站的 ARIA 和適用于 Android 的 AccessibilityNodeInfo。

• ARIA

  https://www.w3.org/WAI/intro/aria

• AccessibilityNodeInfo

  https://developer.android.google.cn/reference/android/view/accessibility/AccessibilityNodeInfo

您可以訪問官方文檔，了解構(gòu)建更符合無障礙標(biāo)準(zhǔn)的自定義視圖的相關(guān)內(nèi)容:

2.4 通過操作指示元素

操作動詞會指明點(diǎn)按一個元素或鏈接可執(zhí)行什么操作，而不是說明元素是什么樣子。這描述了一個元素所代表的操作，不依賴于視敏度。

2.5 具有狀態(tài)變化的元素

對于會在值或狀態(tài)之間切換的圖標(biāo)，根據(jù)它們向用戶呈現(xiàn)的方式進(jìn)行聲明。例如，如果一個星形圖標(biāo)代表向心愿單添加內(nèi)容的操作，應(yīng)用可以讀出 "添加到心愿單" 或 "從心愿單中移除"。

• 如果圖標(biāo)代表某個項(xiàng)目的屬性，且已編碼為復(fù)選框，屏幕閱讀器將讀出當(dāng)前狀態(tài) (如 "啟用" 或 "停用")。

• 如果圖標(biāo)代表一項(xiàng)操作且已選擇，文本標(biāo)簽可以指定發(fā)生的操作，例如 "添加到心愿單"。

2.6 控件交互

用戶可能使用鍵盤或其他設(shè)備進(jìn)行導(dǎo)航，而不是用手指或鼠標(biāo)，在向用戶說明如何與控件互動時，應(yīng)該考慮到這一點(diǎn)。無障礙軟件將為用戶描述正確的互動方式。

您可以訪問官方文檔，了解 Android 自定義操作的相關(guān)內(nèi)容:

2.7 提示語音

以上就是無障礙設(shè)計(jì)的第二篇內(nèi)容，敬請持續(xù)關(guān)注下一篇文章，屆時我們會為您帶來圖片、聲音和運(yùn)動、實(shí)現(xiàn)無障礙的相關(guān)內(nèi)容。也歡迎您持續(xù)關(guān)注我們，及時了解更多開發(fā)技術(shù)和產(chǎn)品更新等資訊動態(tài)。

?點(diǎn)擊屏末|閱讀原文|即刻了解無障礙功能更多相關(guān)內(nèi)容