Android 无障碍功能入门

1. 简介

Android 应用应该对所有人可用，包括有无障碍需求的人员。影响用户使用 Android 设备的常见情况包括失明或视力低下、失聪或听力受损、运动技能受限、认知障碍和色盲。这仅仅是部分列表。

在本 Codelab 中，您将了解应用中常见的无障碍问题。具体来说，您将重点关注三个此类问题

缺少标签
触摸目标不足
前景和背景之间的对比度差

您将学习这些问题如何影响用户、如何检查您的应用中是否存在这些问题以及如何解决这些问题。

本 Codelab 分成若干个小的、独立的步骤。每个步骤都专注于无障碍的特定方面。

受众和先决条件

本 Codelab 适用于希望了解如何使他们的应用对有无障碍需求的用户可访问的 Android 开发人员。我们不假设您之前了解过无障碍 API 或指南。

本 Codelab 假设以下条件

熟悉编写 Android 应用。
能够访问运行 Lollipop（API 级别 21）或更高版本的 Android 设备。
能够从 Google Play 商店安装无障碍扫描器应用。

2. 设置

您将构建的内容

在本 Codelab 中，您将使用现有的应用计数器。此应用允许用户跟踪、递增和递减数值计数。尽管此应用很简单，但您会发现它存在许多无障碍问题，这些问题使得许多用户难以与其正确交互。

在本 Codelab 的过程中，您将改进此应用并使其更易于访问。您的改进将帮助盲人和低视力用户以及有行动不便和灵活性问题的人员。修复计数器将为您提供有关无障碍的基本知识，您可以使用这些知识来提高您自己的应用的无障碍性。

下载代码

您可以从 GitHub 获取应用的起始版本的源代码。克隆存储库，并在 Android Studio 中打开计数器。

本 Codelab 中的每个步骤都经过精心设计，以便您处理以不太易于访问的方式实现的功能。在每个步骤结束时，您将修改代码，并将屏幕或功能变得更易于访问。

启动演示应用

启动 Android Studio 并打开计数器项目。确保设备已连接到您的计算机。
按下屏幕顶部菜单栏中的绿色播放图标。这将启动计数器应用。该应用的登录页面如下所示

使用递增（“+”）和递减（“−”）按钮更改计数，玩一下演示应用。

对于许多用户而言，这是一个易于使用的应用。但无障碍问题会让一些用户难以使用。您将在本 Codelab 中详细了解这些挑战。

首先，您将设置无障碍扫描器，这是您将在本 Codelab 中用于识别无障碍问题的工具。

3. 无障碍扫描器

无障碍扫描器是 Google 创建的一个工具，它可以为 Android 应用建议无障碍改进（例如放大小型触摸目标、提高对比度和提供内容描述），以便有无障碍需求的个人可以更轻松地使用您的应用。

Accessibility Scanner on the Play Store

您可以使用以下步骤下载和配置无障碍扫描器

从 Google Play 商店下载无障碍扫描器.
安装无障碍扫描器后，导航到设备上的设置 > 无障碍。找到并打开无障碍扫描器（点击“允许”或“确定”，然后点击“开始授权”以完成设置工作流程）。
返回到计数器应用。您的屏幕现在应该如下所示

您会注意到，无障碍扫描器会创建一个蓝色浮动操作按钮 (FAB)，该按钮覆盖在屏幕上的任何内容之上。

您可以点击 FAB 以开始无障碍扫描（您将在稍后进行此操作）。要将 FAB 移动到屏幕的其他区域，您可以长按它并拖动它。

4. 扫描计数器应用

在本部分中，您将使用无障碍扫描器对屏幕执行无障碍审核

点击以启动扫描。执行此操作时，无障碍扫描器会检查屏幕的 UI，快速审核无障碍功能，并准备有关无障碍改进的建议。
检查运行扫描的输出。它应该如下所示

无障碍扫描器突出显示可能存在无障碍问题的视图，并提供有关如何修复这些问题的建议。

了解无障碍扫描器的建议

无障碍扫描器提供了五个有关改进计数器无障碍性的建议。

对比度不足

无障碍扫描器建议修复显示当前计数的视图中的颜色对比度差。

点击屏幕中间橙色轮廓内的计数字段，查看扫描器的建议

展开错误并查看有关如何应用扫描器建议的详细信息。您会注意到，扫描器显示了前景和背景颜色以及现有和建议的对比度比率

为什么颜色对比度对无障碍功能很重要？如果前景和背景颜色之间的对比度不足，则视力受损的用户在屏幕上阅读信息会更加困难。低对比度比率会导致某些用户的视图模糊在一起，而高对比度比率则使视图更加清晰地突出显示。不同的照明情况会加剧低对比度比率带来的困难。

缺少标签

扫描器标记了“−”和“+” ImageButtons中缺少的标签，这使得屏幕阅读器用户难以了解这些控件的用途。

点击与“−”和“+”按钮相关的错误，并阅读与缺少标签相关的建议

为什么缺少标签会对无障碍功能造成问题？失明或视力受损的用户使用像 Talkback 这样的屏幕阅读器与他们的设备进行交互。Talkback 会向用户宣布屏幕内容，然后用户可以与发现的内容进行交互。当某个元素没有关联的文本（例如 ImageButton）时，Talkback 无法知道如何正确地向用户传达该元素的用途；在这种情况下，它可能会默认宣布“未标记的按钮”，这对用户没有帮助。当您提供适当的描述性标签时，Talkback 可以将其宣布给用户。

触摸目标不足

除了缺少标签之外，扫描器还建议增加“−”和“+”按钮的可触摸区域

为什么小型触摸目标会对无障碍功能造成问题？许多人在屏幕上难以将注意力集中在小型触摸目标上。这可能是因为他们的手指很大，也可能是因为他们患有影响其运动技能的疾病。小型触摸目标也使屏幕阅读器用户更难以通过在屏幕周围移动手指来导航应用，例如在使用 TalkBack 中的触控探索功能时。

总结

您只探索了无障碍扫描器提供的极少一部分功能。但是，无障碍扫描器提供的建议（与颜色对比度、项目标签和触摸目标相关的建议）在 Android 应用中很常见。应用这些建议可以在很大程度上提高应用的无障碍性。而且修复通常非常简单。

因此，让我们开始编码吧！

5. 确保颜色对比度足够

在计数器中，颜色对比度很容易改进。显示计数的 TextView使用浅灰色背景和灰色文本颜色

<TextView
   ...
   android:background="@color/lightGrey"
   android:textColor="@color/grey"
   ...
 />

您可以移除背景，选择更浅的背景，或选择更深的文本颜色。在本 Codelab 中，您将选择更深的文本颜色。以下是在 **colors.xml** 中为您定义的一些颜色。

<?xml version="1.0" encoding="utf-8"?>
<resources>
   ...
   <color name="lightGrey">#EEEEEE</color>
   <color name="grey">#999999</color>
   <color name="darkGrey">#666666</color>
</resources>

打开 **res/layout/activity_main.xml** 并将 android:textColor="@color/grey" 更改为 android:textColor="@color/darkGrey"。

<TextView
   ...
   android:background="@color/lightGrey"
   android:textColor="@color/darkGrey"
   ...
 />

现在运行应用，并观察对比度的变化。

之前	之后

对比度现在为 4.94:1，这比之前的 2.45:1 好得多。

	背景	文本颜色	对比度
之前	#EEEEEE	浅灰色 (#999999)	2.45:1
之后	#EEEEEE	深灰色 (#666666)	4.94:1

那么，什么构成足够的对比度？Web 内容可访问性指南建议所有文本的最小对比度为 **4.5:1**，而对于大型或粗体文本，对比度为 **3.0:1** 被认为是可以接受的。请尝试在您的应用中达到或超过这些对比度。

按下悬浮操作按钮 (FAB) 使用 **可访问性扫描器** 开始另一次扫描，您会看到该应用不再发出与颜色对比度相关的任何建议。

**可访问性扫描器** 仍然有 4 个关于改进 **Counter** 可访问性的建议，所以让我们继续完善该应用。

6. 添加缺失的标签

由于 **"-"** 和 **"+"** ImageButtons 缺少标签，因此像 Talkback 这样的屏幕阅读器无法正确地向用户传达视图的语义，当用户聚焦在任一按钮上时，它只会简单地宣布“未标记，按钮”。

要解决此问题，请为每个按钮分配一个 **android:contentDescription**。

<ImageButton
   android:id="@+id/subtract_button"
   ...
   
   android:contentDescription="@string/decrement" />


<ImageButton
   android:id="@+id/add_button"
   ...
   android:contentDescription="@string/increment" />

确保您使用本地化的字符串作为内容描述，以便能够正确地翻译。在本 Codelab 中，字符串已在 **res/values/strings.xml** 中定义。

当屏幕阅读器用户聚焦在按钮上时，屏幕阅读器现在会宣布您提供的内容描述的值（适当地翻译成本地语言）。

再次运行 **可访问性扫描器**。您会注意到没有关于缺少标签的建议。

7. 增大触摸目标

**可访问性扫描器** 继续建议 **"-"** 和 **"+"** 应该具有更大的触摸尺寸。在此步骤中，您将遵循该建议。

**Counter** 中的两个按钮很小（24dp X 24dp）。通常，您希望可聚焦项目的可触摸区域至少为 48dp X 48dp。大于此尺寸更好。请注意，通过将可触摸区域从 24dp X 24dp 增加到 48dp X 48dp，您将可触摸区域扩大了 4 倍。

您可以通过多种方法来增加按钮的可触摸区域。例如，您可以执行以下任一操作：

在图标周围添加填充。
添加 minWidth 和/或 minHeight（这将使图标更大）。
注册一个 TouchDelegate。

在您更改任何内容之前，让我们更好地了解如何测量按钮的可触摸区域。

工具和布局边界

对于此步骤，请确保在您的设备上启用了开发者选项。

转到 **设置 > 系统 > 开发者选项**。在 **绘图** 类别下，启用 **“显示布局边界”**。您的屏幕现在应该显示每个可见视图的剪辑边界、边距等。

Screenshot showing layout bounds on screen.

现在观察 **Counter** 屏幕的布局边界，重点关注这两个按钮：**

可触摸区域仅扩展到图标的布局边界，并且 **可访问性扫描器** 已经通知您可触摸区域（24dp X 24dp）太小。让我们增加这两个按钮的区域。

查看 **res/layout/activity_main.xml**，您会看到这两个按钮的以下定义：

<ImageButton
   android:id="@+id/add_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   ... />


<ImageButton
   android:id="@+id/subtract_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
  ... />

为每个视图添加一些填充

<ImageButton
   ...
   android:padding="@dimen/icon_padding"
   ... />


<ImageButton
   ...
   android:padding="@dimen/icon_padding"
  ... />

@dimen/icon_padding 的值为 12dp（请参阅 **res/dimens.xml**）。应用此填充后，控件的可触摸区域变为 48dp X 48dp（每个方向 24dp + 12dp）。

再次运行应用以确认新的布局边界。

之前	之后

返回 **设置 > 开发者选项 > 绘图** 类别，找到“**显示布局边界**”，然后将其关闭。

再次运行 **可访问性扫描器**。这次，扫描应该在没有建议的情况下完成。

恭喜您，通过完成这几个简单的步骤，您已经使您的应用更具可访问性！

8. 可访问性扫描器的局限性

虽然像 **可访问性扫描器** 这样的工具可以帮助您对应用的可访问性进行一些重大改进，但这些工具并不能取代手动测试。

可访问性需要整体考虑——例如，**可访问性扫描器** 会告诉您是否缺少标签，但无法判断该标签是否有意义。通常，**可访问性扫描器** 无法确定您的用户界面是否以简单明了的方式传达语义信息。此外，**可访问性扫描器** 无法报告应用支持多种交互模式（触摸与语音）的程度，或者用户是否能够成功完成应用中最常见的用例。但 **可访问性扫描器** 提供了可访问性的入门介绍，并且是您应该经常考虑使用的宝贵可访问性工具。

关闭可访问性扫描器

导航到 **设置 > 可访问性** 并将 **可访问性扫描器** 设置为 **关闭**。

9. 链接和资源

您已经接触了许多与 Android 可访问性相关的主题。以下是一些您可以探索的链接和资源。

要继续学习 Android 可访问性，请访问 developer.android.com。
要了解有关可访问性服务的更多信息，请访问 Android 可访问性帮助中心，您可以在其中找到 **TalkBack**、**语音访问**、**切换访问** 和其他 Android 可访问性功能的文档。
阅读有关可访问性和 Material Design 的信息。