無障礙設定測試

1. 簡介

在這個程式碼研究室中，您將瞭解如何測試及改善應用程式的無障礙設定。

視障、色盲、聽障、精細動作障礙、認知障礙和其他許多身心障礙人士會使用 Android 裝置來處理各種日常事務。如果您在開發應用程式時將無障礙設計納入考量，就能帶來更優異的使用者體驗，尤其能造福上述人士和其他具有無障礙需求的使用者。

在本程式碼研究室中，您將使用 TalkBack 和切換控制功能測試 Woof 應用程式的無障礙設定。

TalkBack 讓使用者不需查看就可以控制裝置。
切換控制功能讓使用者可以利用切換按鈕瀏覽應用程式，而不必使用觸控螢幕。

課程內容

如何使用 TalkBack 與應用程式互動。
如何使用切換控制功能 (而非觸控螢幕) 與應用程式互動。
如何最佳化使用者介面，提供更好的無障礙使用功能。

軟硬體需求

已安裝 Android Studio 的電腦。
可存取 Google Play 商店應用程式，或已安裝 Android 無障礙套件的 Android 裝置或模擬器。
Woof 應用程式的解決方案程式碼。

2. 開始設定

下載範例程式碼

在 Android Studio 中開啟 android-basics-kotlin-compose-woof 資料夾。

在 Android Studio 中開啟 Woof 應用程式程式碼。

設定裝置

如果已在模擬器中安裝 Android 無障礙套件，則可以跳過這個部分。如果需要安裝 Android 無障礙套件 (包括 TalkBack 和切換控制功能)，請按照下方說明操作。

使用 Google Play 商店應用程式設定裝置

如果您使用的是實體裝置，請確認以下事項：

可以存取 Play 商店應用程式。
已登入 Google 帳戶。
具備必要的權限，可在裝置中透過 Play 商店應用程式下載應用程式。

如果您使用模擬器，請按照下列步驟設定有 Play 商店應用程式存取權的模擬器：

在 Android Studio 中開啟「Device Manager」(裝置管理員)，然後選取「Create Device」(建立裝置)。
請確認您已選取「Pixel 4」。請注意「Play 商店」欄中的 Play 商店應用程式圖示。這個圖示表示此模擬器隨附 Google Play 商店應用程式。

按一下「Next」(下一步)，然後繼續建立模擬器。如果需要複習如何完成新硬體設定檔的建立程序，請按照此程式碼研究室章節中的指示操作。
建立模擬器後，請在「Device Manager」(裝置管理員) 中按一下箭頭圖示以啟動。
在模擬器中啟動 Play 商店應用程式，然後使用有效的 Google 帳戶登入。

安裝 Android 無障礙套件應用程式

Android 無障礙套件包含一組無障礙應用程式。稍後您將在此程式碼研究室中使用 TalkBack 和切換控制功能。

在 Google Play 商店應用程式中安裝 Android 無障礙套件應用程式。

安裝 Woof 應用程式

如果您在本節開頭建立新的 Pixel 4 硬體設定檔，則必須透過您下載的解決方案程式碼安裝 Woof 應用程式。

3. 透過 TalkBack 使用 Woof

TalkBack Google 螢幕閱讀器，能夠提供互動朗讀的功能，讓使用者不必看著螢幕也能瀏覽裝置。這對於視障人士而言特別有幫助。

啟用 TalkBack 後，使用者就能透過互動朗讀和手勢 (例如：滑動與輕觸) 瀏覽裝置。透過 TalkBack 瀏覽，是測試應用程式是否需要改進的一個好方式。

請按照下列步驟操作以深入瞭解 TalkBack：

請觀看以下影片，瞭解如何設定及使用 TalkBack。

熟悉 TalkBack 的使用後，請將所學應用在 Woof 應用程式中！

如要繼續操作，請先停用 TalkBack 功能。請按照下列步驟停用 Talkback：

開啟裝置或模擬器中的「Settings」(設定)。

依序選取「Accessibility」(無障礙設定」和「TalkBack」。

關閉「Use TalkBack」(使用 TalkBack)。

選取「OK」(確定)。

如要進一步瞭解停用 TalkBack 的方法，請參閱支援說明文件。請注意，部分選項並不適用於模擬器，而其他 Android 版本則可能會淘汰這些選項。

4. 透過切換控制功能使用 Woof

切換控制功能可讓您透過一或多個切換按鈕與 Android 裝置互動，而不必使用觸控螢幕。對使用者而言，這種觸控螢幕的替代使用方法特別適合無法做出精細動作的使用者。

切換控制功能會掃描畫面中的項目，然後輪流標示每個項目，直到選取所需項目為止。

如要使用此功能，您必須先有一個或多個切換按鈕。切換按鈕有多種類型，但是在本程式碼研究室中，我們將使用 Android 裝置的內建音量按鈕。

請觀看以下影片，瞭解如何設定和使用切換控制功能。

如果已經依照影片指示設定音量按鈕，切換控制功能就可讓您在按一下調低音量按鈕後瀏覽至應用程式中的不同元素。醒目顯示某個元素後，您就可以使用調高音量按鈕選取該元素。

項目如果只有一個簡單的點按動作，則選取該項目的方式與在項目上輕觸相同。如果項目提供可自訂的無障礙操作，選取項目後，使用者就可以針對不同的項目執行不同的操作。

啟用切換控制功能後，系統會在裝置畫面頂端顯示「Menu」(選單) 分頁標籤。選取這個選項後，分頁標籤就會開啟一個包含導覽選項的全域選單，例如「Back」(返回) 和「Home」(首頁)]，這些選項與在裝置畫面中使用的手勢相同。部分選項可以自訂切換控制功能的行為。

熟悉切換控制功能的使用後，請將所學應用在 Woof 應用程式中！
如要繼續到下一節，請先停用「切換控制功能」。

5. 改善使用者介面無障礙功能

如果要建立更容易使用的應用程式，有許多 UI 設計選擇可以考慮。除了允許有效使用 TalkBack 和切換控制功能的屬性和行為之外，以下還有幾個 UI 最佳化的選擇，可以協助您進一步提升應用程式的無障礙功能。

內容說明

無障礙功能服務 (例如 TalkBack) 的使用者需要內容說明，才能瞭解介面中不同元素的定義。

在某些情況下 (例如以圖像方式傳達元素的資訊時)，內容描述可提供元素的含義或相關聯操作的文字說明。

假如使用者介面中的元素並未提供內容標籤，有些使用者可能就會難以理解這些元素所傳達的資訊，或是不曉得可以透過介面執行哪些操作。在 Compose 中，您可以使用 contentDescription 屬性說明視覺元素。如果是單純做為裝飾用的視覺元素，您可以將 contentDescription 設為 null。如要進一步瞭解如何套用內容描述，請參閱說明文件。

觸控目標大小

任何畫面中可與使用者互動的元素，都必須有適當的大小，讓使用者能夠輕鬆互動。如果是可點擊的元素，則觸控目標最小是高 48dp x 寬 48dp。Compose 會自動針對許多質感設計元件指定正確的目標大小下限。提醒您，觸控目標大小下限指的是小於 48dp 的可點擊元件。如果是大於 48dp 的元件，觸控目標至少為元件的大小。如要進一步瞭解觸控目標大小，請參閱下列資源：

如要瞭解目標大小下限，請參閱 Compose 說明文件中的「無障礙中心」。
請觀看 Google 無障礙中心新功能影片中的觸控目標大小部分。

請查看 Woof 應用程式的程式碼。在 MainActivity.kt 中，DogItemButton 可組合項會使用 IconButton 可組合項。

@Composable
private fun DogItemButton(
   expanded: Boolean,
   onClick: () -> Unit,
   modifier: Modifier = Modifier
) {
   IconButton(onClick = onClick) {
       Icon(
           imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
           tint = MaterialTheme.colors.secondary,
           contentDescription = stringResource(R.string.expand_button_content_description),
       )
   }
}

IconButton 是質感設計元件。根據 IconButton 可組合項的說明文件，觸控目標大小的下限是 48dp x 48dp。

以下程式碼是 IconButton 的原始碼。請注意，修飾詞會設定 minimumTouchTargetSize()。

@Composable
fun IconButton(
   onClick: () -> Unit,
   modifier: Modifier = Modifier,
   enabled: Boolean = true,
   interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
   content: @Composable () -> Unit
) {
   Box(
       modifier = modifier
           .minimumTouchTargetSize()
           .clickable(
               onClick = onClick,
               enabled = enabled,
               role = Role.Button,
               interactionSource = interactionSource,
               indication = rememberRipple(bounded = false, radius = RippleRadius)
           ),
       contentAlignment = Alignment.Center
   ) {
       val contentAlpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled
       CompositionLocalProvider(LocalContentAlpha provides contentAlpha, content = content)
   }
}

色彩對比

選擇的應用程式介面顏色會影響使用者是否能輕鬆閱讀及理解介面。足夠的色彩對比可讓文字和圖片更容易閱讀及理解。

除了協助視力受損的使用者閱讀及理解外，充分的色彩對比還能幫助所有使用者在光照過強或不足的情況下在裝置上查看介面，例如直接暴露在陽光下或採用低亮度設定的螢幕。

如要進一步瞭解如何最佳化顏色對比，請參閱 Android 無障礙中心說明文件。連結中會提供對比度資訊，協助您決定使用哪些顏色。此外，您也可以使用此工具測試背景和前景顏色，找出適合的色彩對比度。如果是字型小的文字，建議比例為 4.5:1，字型大者建議比例為 3.0:1。

對 Woof 應用程式而言，我們的設計人員已經選好顏色，並確認有足夠的色彩對比度。建立自己的應用程式時，請記得檢查色彩對比。質感設計的色彩工具有無障礙分頁標籤，您可以在主要及次要顏色頂端查看適合的文字顏色。

6. 結語

建立新的應用程式，以及在現有應用程式加入新功能時，請務必將無障礙功能納入考量。只要整合無障礙功能及服務，您就能改善應用程式的可用性，尤其可協助身心障礙使用者。