无障碍功能

确保应用程序可供广泛的用户使用是构建高质量应用程序的重要组成部分。设计不佳的应用程序会给各个年龄段的人带来障碍。联合国残疾人权利公约规定了确保信息系统普遍可访问的道德和法律义务；世界各国的法律强制要求可访问性；公司认识到最大程度地提高其服务可访问性的商业优势。

我们强烈建议你在发布应用程序之前将可访问性清单作为关键标准纳入其中。Flutter 致力于支持开发者提高其应用程序的可访问性，除了底层操作系统提供的支持外，还包括对可访问性的一流框架支持，其中包括

大字体

使用用户指定的字体大小渲染文本小部件

屏幕阅读器

传达有关 UI 内容的语音反馈

足够的对比度

渲染具有足够对比度的颜色的小部件

以下讨论了这些功能的详细信息。

检查可访问性支持

除了针对这些特定主题进行测试外，我们还建议使用自动可访问性扫描仪

• 对于 Android
  1. 为 Android 安装Accessibility Scanner
  2. 从Android 设置 > 辅助功能 > 辅助功能扫描仪 > 开启启用辅助功能扫描仪
  3. 导航至辅助功能扫描仪“复选框”图标按钮以启动扫描
• 对于 iOS
  1. 在 Xcode 中打开 Flutter 应用的 iOS 文件夹
  2. 选择模拟器作为目标，然后单击运行按钮
  3. 在 Xcode 中，选择Xcode > 打开开发者工具 > 辅助功能检查器
  4. 在辅助功能检查器中，选择检查 > 启用指针检查，然后选择正在运行的 Flutter 应用中的各种用户界面元素，以检查其辅助功能属性
  5. 在辅助功能检查器中，选择工具栏中的审核，然后选择运行审核以获取潜在问题的报告
• 对于网络
  1. 打开 Chrome DevTools（或其他浏览器中的类似工具）
  2. 检查包含 Flutter 生成的 ARIA 属性的 HTML 树。
  3. 在 Chrome 中，“元素”选项卡有一个“辅助功能”子选项卡，可用于检查导出到语义树中的数据

大字体

Android 和 iOS 都包含系统设置，用于配置应用使用的所需字体大小。Flutter 文本小部件在确定字体大小时会遵循此操作系统设置。

字体大小由 Flutter 根据操作系统设置自动计算。但是，作为一名开发者，你应该确保你的布局有足够的空间来呈现其所有内容，即使字体大小增加。例如，你可以在配置为使用最大字体设置的小屏幕设备上测试应用的所有部分。

示例

以下两个屏幕截图显示了使用默认 iOS 字体设置和在 iOS 辅助功能设置中选择最大字体设置呈现的标准 Flutter 应用模板。

屏幕阅读器

对于移动设备，屏幕阅读器（TalkBack、VoiceOver）使视障用户能够获得屏幕内容的语音反馈，并通过在移动设备上使用手势和在台式机上使用键盘快捷键与 UI 交互。在移动设备上打开 VoiceOver 或 TalkBack，并在应用中导航。

若要在设备上打开屏幕阅读器，请完成以下步骤

• Android 上的 TalkBack
• iPhone 上的 VoiceOver
• 浏览器
• 桌面

import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';

void main() {
  runApp(const MyApp());
  SemanticsBinding.instance.ensureSemantics();
}

查看以下视频演示，了解 Victor Tsaran 如何将 VoiceOver 与现已存档的Flutter Gallery网络应用结合使用。

Flutter 的标准小部件会自动生成辅助功能树。但是，如果应用需要其他内容，可以使用Semantics小部件进行自定义。

当应用中存在应以特定语音朗读的文本时，通过调用TextSpan.locale告知屏幕阅读器使用哪个语音。请注意，MaterialApp.locale和Localizations.override不会影响屏幕阅读器使用的语音。通常，屏幕阅读器使用系统语音，除非使用TextSpan.locale明确设置语音。

足够的对比度

足够的颜色对比度让文本和图像更容易阅读。除了让各种视力障碍的用户受益之外，足够的颜色对比度还可以帮助所有用户在极端光照条件下（例如在阳光直射下或在低亮度显示器上）查看设备上的界面。

W3C 建议

• 对于小文本（小于 18 点常规或 14 点粗体），至少为 4.5:1
• 对于大文本（18 点及以上常规或 14 点及以上粗体），至少为 3.0:1

在构建时考虑无障碍性

确保每个人都可以使用你的应用意味着从一开始就在其中构建无障碍性。对于某些应用来说，说起来容易做起来难。在下面的视频中，我们的两位工程师将一个移动应用从糟糕的可访问性状态转变为利用 Flutter 内置小部件提供无障碍体验大幅提升的状态。

在移动设备上测试无障碍性

使用 Flutter 的无障碍性指南 API测试你的应用。此 API 检查你的应用的 UI 是否符合 Flutter 的无障碍性建议。这些建议涵盖文本对比度、目标大小和目标标签的建议。

以下示例展示了如何在名称生成器上使用指南 API。你已将此应用作为编写你的第一个 Flutter 应用代码实验室的一部分创建。应用主屏幕上的每个按钮都充当一个可点击目标，文本以 18 点表示。

final SemanticsHandle handle = tester.ensureSemantics();
await tester.pumpWidget(MyApp());

// Checks that tappable nodes have a minimum size of 48 by 48 pixels
// for Android.
await expectLater(tester, meetsGuideline(androidTapTargetGuideline));

// Checks that tappable nodes have a minimum size of 44 by 44 pixels
// for iOS.
await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));

// Checks that touch targets with a tap or long press action are labeled.
await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));

// Checks whether semantic nodes meet the minimum text contrast levels.
// The recommended text contrast is 3:1 for larger text
// (18 point and above regular).
await expectLater(tester, meetsGuideline(textContrastGuideline));
handle.dispose();

你可以在应用目录的 test/widget_test.dart 中添加指南 API 测试，或作为单独的测试文件（例如，在名称生成器的情况下为 test/a11y_test.dart）。

在网络上测试无障碍性

你可以使用以下命令行标志在概要文件和发布模式下可视化针对你的网络应用创建的语义节点来调试无障碍性

flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true

激活该标志后，语义节点将出现在小部件的顶部；你可以验证语义元素是否放置在正确的位置。如果语义节点放置不正确，请提交错误报告。

无障碍性发布清单

以下是准备发布您的应用时需要考虑的一些事项（非详尽列表）。

• 主动交互。确保所有主动交互都能发挥作用。任何可按下的按钮在按下时都应发挥作用。例如，如果您为 onPressed 事件设置了无操作回调，请将其更改为在屏幕上显示 SnackBar，说明您刚刚按下的控件。
• 屏幕阅读器测试。当您轻触页面上的所有控件时，屏幕阅读器应能够描述这些控件，并且描述应可理解。使用 TalkBack（Android）和 VoiceOver（iOS）测试您的应用。
• 对比度。我们建议您在控件或文本与背景之间设置至少 4.5:1 的对比度，禁用组件除外。还应检查图像是否具有足够的对比度。
• 上下文切换。在输入信息时，任何内容都不应自动更改用户的上下文。通常，小组件应避免在没有任何确认操作的情况下更改用户的上下文。
• 可轻触目标。所有可轻触目标的像素至少应为 48x48。
• 错误。重要操作应能够撤消。在显示错误的字段中，如果可能，请建议更正。
• 色觉缺陷测试。控件在色盲和灰度模式下应可用且可读。
• 缩放因子。UI 在文本大小和显示缩放的非常大的缩放因子下应保持可读且可用。

了解更多信息

要详细了解 Flutter 和无障碍功能，请查看社区成员撰写的以下文章

• 深入了解 Flutter 的无障碍功能小组件
• Flutter 中的语义
• Flutter：为屏幕阅读器打造卓越体验