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

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

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

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

https://material.io/develop

指針目標(biāo)類似于觸摸目標(biāo)，但適用于使用運(yùn)動(dòng)追蹤指針設(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)，請(qǐng)考慮移動(dòng)滑塊值。使用屏幕放大工具的用戶如果不來回平移，可能無法同時(shí)查看滑塊及相應(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 備用文本

注意:

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

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

注意:

如果備用文本的描述冗長，則可能會(huì)被截?cái)?。大多?shù)屏幕閱讀器不會(huì)讀出超過 125 個(gè)字符的文本。

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

注意:

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

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

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

① 圖片

② 圖片說明

③ 相鄰文本

圖片說明

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

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

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

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

注意:

相鄰文本

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

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

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

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

圖片中的嵌入式文本

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

注意:

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

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

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

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

正確做法:

對(duì)于較長的描述，使用圖片說明。

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

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

2.2 閱讀速度

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

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

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

• 原生元素:如果您擴(kuò)展或沿用原生界面元素，可能會(huì)找到正確的角色。否則，要針對(duì)各個(gè)平臺(tái)覆蓋無障礙信息，您可以參閱適用于網(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 通過操作指示元素

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

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

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

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

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

2.6 控件交互

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

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

2.7 提示語音

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

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