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"
   ...
 />

您可以移除背景，选择更浅的背景，或选择更深的文本颜色。在这个代码实验室中，您将选择更深的文本颜色。以下是一些在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 个建议来改进计数器的无障碍性，所以让我们继续改进这个应用程序。

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" />

确保您使用本地化字符串作为内容描述，以便可以正确翻译它们。对于此代码实验室，字符串已在res/values/strings.xml中定义。

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

再次运行无障碍扫描器。您会注意到没有关于缺失标签的建议。

7. 使触摸目标更大

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

计数器中的两个按钮很小 (24dp X 24dp)。通常，您希望可聚焦项目的可触摸区域至少为 48dp X 48dp。比这更大更好。请注意，通过将可触摸区域从 24dp X 24dp 增加到 48dp X 48dp，您将可触摸区域扩展了 4 倍。

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

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

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

工具和布局边界

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

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

Screenshot showing layout bounds on screen.

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

可触摸区域仅扩展到图标的布局边界，而无障碍扫描器已经通知您可触摸区域 (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。