开始改进 Android 的无障碍性

1. 简介

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

在本 Codelab 中，您将了解应用中常见的无障碍功能问题。具体而言，您将关注以下三个问题：

1. 缺少标签
2. 触摸目标不足
3. 前景与背景的对比度不够

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

本 Codelab 由小型且不连续的步骤构成。每个步骤都聚焦于无障碍功能的某个特定方面。

受众和先决条件

本 Codelab 适用于希望了解如何让其应用满足用户无障碍需求的 Android 开发者。假定您之前不了解无障碍 API 或无障碍指导原则。

本 Codelab 假定受众符合以下条件：

1. 基本熟悉 Android 应用的编写。
2. 使用运行 Lollipop（API 级别 21）或更高版本的 Android 设备。
3. 能够从 Google Play 商店安装无障碍功能扫描仪应用。

由于这是一个入门级 Codelab，因此在本 Codelab 中您将不会学习如何使用无障碍服务。您将专注于使用无障碍功能扫描仪对常见的无障碍问题形成概念性理解。

2. 准备工作

您将构建的内容

在本 Codelab 中，您将使用现有的应用 Counter。此应用允许用户跟踪、递增和递减计数。虽然这个应用很简单，但是您会发现它存在不少无障碍性问题，导致许多用户难以正确使用它。

在本 Codelab 的过程中，您将改进此应用，使其更易于使用。您的改进将帮助盲人和弱视用户以及行动不便和存在灵活性问题的用户。修复 Counter 中的问题将有助于掌握有关无障碍功能的基础知识，您可以在自己的应用中利用这些知识改进无障碍性。

下载代码

您可以从 GitHub 获取应用 起始版本的源代码。克隆仓库，然后在 Android Studio 中打开 Counter。

在本 Codelab 的整个过程中，您都将在 master 分支中进行操作。如果遇到困难（或只是想提前看看），您可以查看 accessible 分支中 应用的完成版本。

本 Codelab 中的每个步骤都是精心安排的，以便您可以处理以不容易访问的方式实现的功能。在每个步骤的最后，您将修改代码，使屏幕或功能更易于访问。

启动演示版应用

1. 启动 Android Studio 并打开 Counter 项目。确保设备已连接到计算机。
2. 点按屏幕顶部菜单栏的 **Play（播放）**图标 。这将启动 Counter 应用。该应用的着陆页如下所示：

3. 对演示版应用进行一些操作，使用增加（"+"）和减少（"-"）按钮更改计数。

对许多用户而言，这是一款易于使用的应用。但是该应用存在无障碍性问题，对某些用户来说难以使用。您将在本 Codelab 中了解有关这些挑战的更多信息。

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

3. 无障碍功能扫描仪

无障碍功能扫描仪是 Google 创建的工具，可为 Android 应用提供无障碍功能改进建议，例如扩大触摸目标、增加对比度和提供内容描述等，使有无障碍需求的用户能够更容易使用您的应用。

您可以使用以下步骤下载并配置无障碍功能扫描仪：

1. 从 Google Play Store 下载无障碍功能扫描仪。
2. 安装无障碍功能扫描仪后，导航至设备上的设置 > 无障碍。找到并打开无障碍功能扫描仪（点按"允许"或"确定"，然后点击"**开始授权"**以完成设置流程）。
3. 返回到 Counter 应用。屏幕现在应如下所示：

您会发现，无障碍功能扫描仪创建了一个蓝色悬浮操作按钮 (FAB)，它叠放在屏幕的任何内容之上。

您可以点按 FAB 以启动无障碍功能扫描（稍后将执行）。要将 FAB 移动到屏幕的其他区域， 可以长按并拖动它。

4. 扫描 Counter 应用

在本节中，您将使用无障碍功能扫描仪对屏幕执行无障碍功能审查：

1. 点按 以启动扫描。执行此操作时，无障碍功能扫描仪将检查屏幕的界面、执行快速无障碍功能审查并准备与无障碍性相关的改进建议。
2. 检查运行扫描的输出结果。它应如下所示：

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

理解无障碍功能扫描仪的建议

无障碍功能扫描仪针对 Counter 的无障碍改进提出了五项建议。

对比度不足

无障碍功能扫描仪建议修复在显示当前计数的视图中颜色对比度较差的问题。

1. 点按屏幕中央橙色轮廓的计数字段，查看扫描仪的建议：

2. 展开错误，查看有关如何应用扫描仪建议的详细信息。您会发现，扫描仪会显示前景和背景颜色以及现有的和建议的对比度：

**为什么颜色对比度对无障碍性很重要？**如果前景与背景颜色之间的对比度不足，则视力障碍用户将难以阅读屏幕上的信息。对于某些用户来说，低对比度会导致视图模糊，而高对比度则可以使视图更加清晰。不同的照明情况会加剧低对比度带来的困难。

暂时性或情境性的残障通常会给那些不认为自己有无障碍需求，也不经常依赖辅助技术的用户带来无障碍相关的挑战。

在本例中，即使是视力好的人也会发现，由于颜色对比度低，在明亮的室外光线下，计数字段可能更难读取，从而使应用不易访问。

考虑无障碍性将有助于所有用户，而不仅仅是具有无障碍需求的用户。

缺少标签

扫描仪会标记"-"和"+"ImageButtons 中缺少的标签，缺少标签会导致屏幕阅读器用户难以了解这些控件的用途。

1. 点按与"-"或"+"按钮相关的错误，阅读与缺少标签相关的建议：

**为什么缺少标签会影响无障碍性？**失明或视力障碍用户使用 Talkback 等屏幕阅读器与他们的设备进行交互。Talkback 向用户播报屏幕内容，然后用户可以与发现的内容进行交互。当某个元素没有关联的文本时（例如 ImageButton），Talkback 不知道如何向用户正确传达该元素的用途，在这种情况下，它可能会默认播报"Unlabelled button"（无标签按钮），这对用户没有帮助。提供适当描述性的标签后，Talkback 就可以向用户播报这些标签。

触摸目标不足

除了提示缺少标签外，扫描仪还建议增大"-"和"+"按钮的可触摸面积：

**为什么面积较小的触摸目标会影响无障碍性？**许多人难以对准屏幕上面积较小的触摸目标。这可能仅仅是因为他们的手指很大，或者是因为他们的身体状况妨碍了他们的运动技能。面积较小的触摸目标也会使屏幕阅读器用户更难通过在屏幕上移动手指来导航应用，例如在 TalkBack 中使用触摸浏览功能时。

在某些情况下，触摸目标尺寸不足会使所有用户（不仅仅是有无障碍需求的用户）都难以使用应用。

如果增加/减少按钮的触摸面积太小，即使是运动技能出色的用户也会感到吃力。如果此类用户在几秒钟内迅速点按某个按钮，他们可能会发现有些点击并未被系统记录。如果他们在走路时尝试这样做（触摸精度更低），体验可能会更差。

请记住，考虑无障碍性将有助于所有用户，而不仅仅是具有无障碍需求的用户。

摘要

您只探索了无障碍功能扫描仪的一小部分功能。但是，无障碍功能扫描仪提供的这些建议（与颜色对比度、项目标签和触摸目标相关的建议），在 Android 应用中很普遍。应用这些建议可以大大改善应用的无障碍性。修复过程通常很简单。

我们开始编码吧！

5. 确保足够的颜色对比度

在 Counter 中，提高颜色对比度的方式很简单。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 Content Accessibility Guidelines"（Web 内容无障碍指南）建议所有文本的最小对比度为 4.5:1，对于大号或粗体文本，3.0:1 被视为可接受的对比度。尽可能在您的应用中达到或超过这些对比度。

无障碍功能扫描仪将在您运行应用后帮助您发现颜色对比度问题。但是，最好在设计应用的调色板时就考虑对比度问题。您可以使用在线提供的对比度检查程序检查您的对比度。

点按 FAB 开始使用无障碍功能扫描仪再次进行扫描，您会看到该应用不再提供与颜色对比度有关的任何建议：

无障碍功能扫描仪仍有 4 项有关改善 Counter 无障碍性的建议，因此让我们继续改进应用。

6. 添加缺少的标签

由于"-"和"+"ImageButtons 缺少标签，因此 Talkback 等屏幕阅读器无法正确地将视图的语义传达给用户，当用户聚焦于任一按钮时，它将简单地播报"Unlabelled Button"（无标签按钮）：

要修复此问题，请为每个按钮指定一个 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 中定义。

现在，当屏幕阅读器用户聚焦于这些按钮时，屏幕阅读器将播报您提供的 contentDescription 值（并且恰当地翻译为对应语言区域的语言）。

注意：在本 Codelab 中，您将不会打开和学习如何使用 TalkBack；而是继续使用无障碍功能扫描仪来审查应用的无障碍性。学习如何使用

再次运行无障碍功能扫描仪。您会发现没有与缺少标签相关的建议。

7. 增大触摸目标

无障碍功能扫描仪仍建议"-"和"+"应具有更大的触摸尺寸。在这一步中，您将遵循该建议。

Counter 中的这两个按钮很小 (24dp X 24dp)。一般而言，可聚焦项的可触摸面积应至少达到 48dp X 48dp。甚至再大一些会更好。现在，通过将可触摸面积从 24dp X 24dp 增大到 48dp X 48dp，您将可触摸面积扩大了 4 倍。

您可以通过多种选项来增大按钮的可触摸面积。例如，您可以执行以下任一操作：

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

在进行任何更改之前，让我们更好地了解如何测量按钮的可触摸面积。

工具和布局边界

要进行此步骤，请确保在设备上启用 开发者选项。

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

现在观察 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 无障碍性，请访问 https://developer.android.google.cn。