在無障礙介面下使用應用程式

請盡量讓您的 Android 應用程式可供任何人使用，包括具有無障礙功能需求的人士。

很多身心障礙人士都會使用 Android 裝置，比如視障、色盲、聽障、精細動作障礙、認知障礙者等等。如果您在開發應用程式時考量到無障礙設計，就能為無障礙需求人士提供更優質的使用體驗。

本頁面將說明如何實作重要的無障礙元素，讓所有人都能更輕鬆地使用您的應用程式。如要深入瞭解如何打造更符合無障礙需求的應用程式，請參閱「提升應用程式無障礙程度的基本原則」。

讓文字更加清晰易讀

對於應用程式中的每組文字，我們建議將「色彩對比度」(即文字顏色與後方背景顏色之間的亮度差異) 設為高於特定閾值，具體閾值則取決於文字的字型大小以及是否為粗體：

  • 如果文字小於 18 sp，或者文字為粗體且小於 14 sp，請使用前景和背景顏色，讓色彩對比度至少達到 4.5:1。
  • 如果文字為其他格式，色彩對比率至少須為 3:1。

在下圖中，您可以看到兩種文字與背景的色彩對比：

彩色背景上的「Text」一詞，左側範例的文字與背景色彩對比度較低，右側範例則有足夠的色彩對比度。
圖 1. 左例的色彩對比度低於建議閾值，右例的色彩對比度則符合建議閾值。

如要檢查應用程式內文字與背景的色彩對比度，請使用線上色彩對比度檢查工具或無障礙功能檢查工具應用程式。

使用簡易的大型控制項

如果應用程式 UI 的控制項易讀又易選，使用起來就會更方便。如果是觸控介面，建議每個互動式 UI 元素都有至少 48 dp x 48 dp 的可聚焦區域 (或「觸控目標」)，而且尺寸越大越好。

在 Jetpack Compose 中，許多內建的 Material 元件 (例如 Button、IconButton 和 ListItem) 都已強制執行這項最小尺寸。不過，建立自訂互動元素時，您需要自行設定大小。

在下列程式碼片段中，我們為小型 UI 元素提供較大的觸控目標，讓使用者更容易存取：

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}
AccessibilitySnippets.kt

如要進一步瞭解觸控目標大小，請參閱「最低觸控目標大小」。

說明每個 UI 元素

應用程式中的每個 UI 元素都應該有描述其用途的說明。大多數情況下，您可以在元素的 contentDescription 屬性中加入這項說明，如以下程式碼片段所示：

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}
AccessibilitySnippets.kt

請注意，您不需要為 Text 可組合函式提供 contentDescription。Android 無障礙服務 (例如 TalkBack) 會自動朗讀文字本身。

為應用程式的 UI 元素加入說明時，請將以下最佳做法銘記在心：

  • 請使用說明傳達互動的目的和結果，而非視覺細節。使用Role 語意屬性 (例如 Role.Button 或 Role.Switch) 公開 UI 元素的類型。這樣一來，螢幕閱讀器就能正確朗讀元素。

  • 避免說明內容重複。比如，若是在應用程式中點選某個按鈕會觸發「提交」動作，則該按鈕的說明應為 "Submit"，而不是 "Submit button"。

  • 說明不應重複。這樣一來，當螢幕閱讀器使用者遇到重複的元素說明時，就會知道現在焦點位於和之前相同的元素上。請特別注意，清單 (例如 LazyColumn) 中的每個項目必須有不同說明，且每則說明都反映出關聯項目的特有內容，比如在地點清單中，這可以是某個城市的名稱。

  • 使用 hideFromAccessibility API 標示純裝飾性元素，讓無障礙服務可以忽略這些元素。如果 UI 元素有 contentDescription 參數，但純粹是裝飾用途 (例如屬於其他 UI 元素的 Icon)，請傳遞 null，避免標籤重複。如需更詳細的使用案例，請參閱「合併及清除」一文。

  • 測試程式碼，確保內容說明如預期傳送。 Android Lint、Compose 測試和手動與自動測試工具 可以標示常見問題，並揭露實作中的問題。

其他資源

如要進一步瞭解如何提高應用程式的無障礙程度，請參閱下列其他資源：

程式碼研究室

影片

Views content