无障碍测试

1. 简介

在本 Codelab 中，您将学习如何测试和改进应用的无障碍性。

视力障碍、色盲、听力障碍、灵活性障碍、认知障碍以及许多其他残疾人士都使用 Android 设备来完成日常生活中的一些任务。当您在开发应用时考虑到无障碍性时，您就能改善用户体验，特别是对于那些有这些及其他无障碍需求的用户。

在本 Codelab 期间，您将使用 **TalkBack** 和 **Switch Access** 来测试 **Woof** 应用的无障碍性。

  • **TalkBack** 使用户能够解放双眼控制设备。
  • **Switch Access** 使用户能够使用开关而不是触摸屏来浏览应用。

您将学习的内容

  • 如何使用 TalkBack 与应用进行交互。
  • 如何使用 Switch Access 代替触摸屏与应用进行交互。
  • 如何优化 UI 以获得更好的无障碍性。

您需要的内容

  • 安装了 Android Studio 的电脑。
  • 能够访问 Google Play 商店应用或已安装 Android 无障碍套件的 Android 设备或模拟器。
  • **Woof** 应用的解决方案代码。

2. 设置

下载起始代码

在 Android Studio 中，打开 android-basics-kotlin-compose-woof 文件夹。

在 Android Studio 中打开 **Woof** 应用代码。

设置您的设备

如果您已经在您的设备或模拟器上安装了 Android 无障碍套件，那么您可以跳过此部分。如果您需要安装 Android 无障碍套件（用于访问 TalkBack 和 Switch Access），请按照以下说明操作。

配置具有 Google Play 商店应用的设备

如果您使用的是物理设备，请确保您：

  • 可以访问 Play 商店应用。
  • 已登录您的 Google 帐户。
  • 拥有从 Play 商店应用下载应用所需的设备权限。

如果您使用的是模拟器，请按照以下步骤设置一个具有 Play 商店应用访问权限的模拟器：

  1. 在 Android Studio 中，打开 **设备管理器** 并选择 **创建设备**。
  2. 请确保选择 **Pixel 8** 或任何在 **Play 商店** 列中显示 Play 商店应用图标的设备。该图标表示此模拟器附带 Google Play 商店应用。

fef200739a6b0e6d.png

  1. 点击 **下一步** 并继续创建模拟器。如果您需要回顾如何完成创建新的硬件配置文件，请观看 本 Codelab 部分 中的视频。
  2. 创建模拟器后，通过点击箭头图标从 **设备管理器** 中启动它。

91619522d628e743.png

  1. 在模拟器上启动 Play 商店应用并使用有效的 Google 帐户登录。

f5bb7cf9f5ae9410.png

安装 Android 无障碍套件应用

Android 无障碍套件包含一系列无障碍应用。您将在本 Codelab 的后面部分需要它来使用 **TalkBack** 和 **Switch Access**。

  1. 在 Google Play 商店应用中，安装 **Android 无障碍套件** 应用。

942030e19c564e59.png

安装 Woof 应用

如果您在本节开头创建了一个新的 Pixel 4 硬件配置文件，则需要安装您下载的解决方案代码中的 **Woof** 应用。

3. 使用 TalkBack 使用 Woof

**TalkBack** 是 Google 的屏幕阅读器，它提供语音反馈，使用户无需查看屏幕即可浏览其设备。这对于视力障碍人士尤其有用。

启用 TalkBack 后，用户可以通过语音反馈和手势（例如滑动和点击）来浏览设备。使用 TalkBack 浏览是您测试应用改进领域的好方法。

请按照以下步骤更熟悉 TalkBack：

  1. 观看以下视频，了解如何配置和使用 TalkBack。
  1. 熟悉 **TalkBack** 后，将您学到的知识应用到 **Woof** 应用中！
  1. 在继续下一节之前，请禁用 **TalkBack** 功能。请按照以下步骤禁用 **Talkback**：

在您的设备或模拟器上，打开 **设置**。

选择 **无障碍**，然后选择 **TalkBack**。

关闭 **使用 TalkBack**。

选择 **确定**。

您可以在 支持文档 中了解禁用 TalkBack 的更多方法。请记住，某些选项在模拟器上不可行，其他选项在某些 Android 版本上可能已弃用。

4. 使用 Switch Access 使用 Woof

Switch Access 允许您使用一个或多个开关而不是触摸屏来与您的 Android 设备进行交互。对于那些手指灵活性有限的用户来说，这是触摸屏的替代方案，尤其有用。

Switch Access 会扫描屏幕上的项目，依次突出显示每个项目，直到您进行选择。

要使用 Switch Access，您首先需要一个或多个开关。开关有很多种类，但在本 Codelab 中，我们将使用 Android 设备上的内置音量按钮。

  1. 观看以下视频，了解如何配置和使用 **Switch Access**。
  1. 如果您按照视频中的说明配置了音量按钮，Switch Access 允许您点击音量减按钮来导航到应用中的不同元素。突出显示元素后，可以使用音量增按钮进行选择。

对于具有简单点击操作的项目，选择该项目与对其执行点击操作相同。对于具有可用自定义无障碍操作的项目，选择该项目会向用户展示他们可以对该项目执行的不同操作。

启用 Switch Access 后，设备屏幕顶部会出现一个 **菜单** 选项卡。选中后，该选项卡将打开一个包含导航选项（例如 **返回** 和 **主页**）的全局菜单，它们等同于设备屏幕上的手势。某些选项可以自定义 Switch Access 的行为。

  1. 熟悉 **Switch Access** 后，将您学到的知识应用到 **Woof** 应用中！
  2. 在继续下一节之前，请禁用 **Switch Access**。

5. 提升 UI 的无障碍性

在尝试创建更易于访问的应用时，需要考虑许多 UI 设计选择。除了允许有效使用 TalkBack 和 Switch Access 的属性和行为之外，以下还有一些您可以进行的 UI 优化，以提高应用的无障碍性。

内容描述

屏幕阅读器（如 TalkBack）等无障碍服务的使用者依赖于内容描述来理解界面中元素的含义。

在某些情况下，例如当信息以图形方式在一个元素中传达时，内容描述可以提供与该元素相关的含义或操作的文本描述。

如果用户界面中的元素不提供内容标签，那么一些用户可能难以理解向他们呈现的信息，或者难以在界面中执行操作。在 Compose 中，您可以使用 contentDescription 属性来描述视觉元素。对于纯粹的装饰性视觉元素，可以将 contentDescription 设置为 null。阅读有关如何在 文档 中应用内容描述的更多信息。

触摸目标大小

任何可以与之交互的屏幕元素都必须足够大，才能可靠地进行交互。可点击内容的最小触摸目标大小为 48dp 高 x 48dp 宽。许多 Material Design 组件都由 Compose 自动分配正确的最小目标大小。请记住，最小触摸目标大小是指小于 48dp 的可点击组件。大于 48dp 的组件将具有至少与组件大小相同的触摸目标。请遵循以下资源，了解更多关于触摸目标大小的信息：

  1. 阅读 Compose 中的无障碍性文档 中关于最小目标大小的内容。
  2. 观看 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 是一个 Material Design 组件。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应用程序，我们的设计师已为我们挑选了颜色，并确保它们具有足够的色彩对比度。创建您自己的应用程序时，请记住检查颜色对比度。Material Design的颜色工具具有无障碍选项卡，您可以在其中查看在主色和次色上合适的文本颜色。

6. 结论

在创建新应用程序和向现有应用程序添加新功能时，务必牢记无障碍性。通过集成无障碍功能和服务，您可以提高应用程序的可用性，尤其对于残疾用户而言。

了解更多