无障碍

确保你的应用能够被广泛的用户使用是构建高质量应用程序至关重要的一点。如果你的应用设计不佳，可能会无法覆盖到所有年龄段的人。 联合国关于残疾人权利 规定了道德和法律必须确保信息系统能够普遍使用。世界各地也都要求提供无障碍的环境；同样，公司也认识到了最大限度覆盖服务的优势所在。

我们强烈建议你将辅助功能清单添加到发布应用前的关键指标。 Flutter 始终致力于支持开发者能够使它的应用更易于访问，其中就包括了由底层操作系统提供的一流的无障碍支持，包括：

大字体
使用用户指定的字体大小呈现文本 widget

读屏器
通过语音反馈传达用户界面的内容

高对比度
在渲染 widget 时，使用具有高对比度的颜色

详细关于这个特性的讨论，请继续阅读。

关于无障碍功能检测的细节，我们将在下面讨论。除了测试这些特定主题外，我们还建议你使用自动辅助功能扫描程序：

• 对于 Android:

  1. 在 Android 上安装 辅助扫描程序

  2. 通过 设置 > 辅助 > 辅助扫描仪 > 开启在 Android 启用辅助功能扫描程序

  3. 在导航栏找到辅助扫描仪复选框按钮启动扫描

• 对于 iOS:

  1. 在 Xcode 中打开 Flutter 应用程序的 iOS 文件夹

  2. 找到模拟器，然后单击 运行 按钮

  3. 在 Xcode 选择 Xcode > 开发者工具 > 辅助检查器

  4. 在辅助检查器中，选择 检查> 启用点检查，然后运行 Flutter 应用程序，选择各种用户界面元素来检查其辅助功能

  5. 在辅助检查器中，选择工具栏中的 审核，然后选择 运行音频 来获取潜在问题的报告

• 对于 web:

  1. 打开 Chrome 开发者工具（或其他浏览器中的类似工具）

  2. 检查包含 Flutter 生成的 ARIA 属性的 HTML 树。

  3. 在 Chrome 中，「Elements」选项卡中有一个「Accessbility」子选项卡，可用于检查导出到语义树的数据。

Android 和 iOS 都包含配置应用程序所需字体大小的系统设置。在确定字体大小时， Flutter 文本 widget 会遵循当前系统设置。

Flutter 会根据操作系统设置自动计算字体大小。但是，作为开发人员，你应确保在增加字体大小时，你的页面有足够的空间来呈现其所有内容。例如，你可以在小屏幕上设置最大的字体来测试你应用上的全部内容。

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

在移动设备上，读屏器（TalkBack、VoiceOver）可以使视障用户能够获得有关屏幕内容的语音反馈，并通过移动设备上的手势和桌面上的键盘快捷键与 UI 进行交互。在你的移动设备上打开 VoiceOver 或 TalkBack 并浏览你的应用程序。

请通过以下步骤，在设备上打开读屏器：

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

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

查看此 视频演示，了解 Victor Tsaran 如何在 Flutter Gallery（已归档）Web 应用程序中使用 VoiceOver。

Flutter 的标准 widget 会自动生成无障碍树。但是，如果你的应用需要不同的东西，则可以使用 语义小部件 来自定义你应用程序的无障碍体验。

当你的应用中的某段文字需要以特定的语言进行播报时，可以通过 TextSpan.locale 来通知屏幕阅读器对应的语言。请注意 MaterialApp.locale 和 Localizations.override 并不会影响屏幕阅读器对语言的选择。通常来说，除非你设置了 TextSpan.locale，否则屏幕阅读器都会使用系统语言。

高对比度能够使文本和图像更易于阅读。除了使具有各种视觉障碍的用户受益外，高对比度也能够帮助所有用户在极端光照条件下 (例如在直射阳光下或在低亮度显示器上) 观看设备上的界面。

W3C 建议:

• 小文本至少 4.5:1 (低于 18 像素常规或 14 像素粗体)

• 大文本至少 3.0:1 (18 像素及以上常规或 14 像素及以上粗体)

确保你包含的任何图像都具有较高的对比度。

在 widget 上指定颜色时，请确保在前景色和背景色之间具备足够的对比度。

确保你的应用能够被所有人使用，这意味着你需要从一开始就考虑到无障碍。对于一些应用，说起来容易做起来难。在下面的视频中，我们的两名工程师从一个无障碍状态中获取了一个 Flutter 内置的 widget，以提供更加便捷的体验。

Building Flutter apps with accessibility in mind

使用 Flutter 的 Accessibility Guideline API 测试你的应用程序。该 API 可以检查应用程序的用户界面是否符合 Flutter 的无障碍建议。这些建议包括文字对比度、目标尺寸和目标标签。

以下代码片段展示了如果在名为 AccessibleApp 的 widget 上使用 Guideline API：

以下代码片段展示了如何在名为 AccessibleApp 的 widget 上使用 Guideline API：

import 'package:flutter_test/flutter_test.dart';
import 'package:your_accessible_app/main.dart';

void main() {
  testWidgets('Follows a11y guidelines', (tester) async {
    final SemanticsHandle handle = tester.ensureSemantics();
    await tester.pumpWidget(const AccessibleApp());

    // 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();
  });
}

如果要尝试这些测试，请在 编写你的第一个 Flutter 应用 codelab 中运行他们。该应用程序主屏幕上的每个按钮（文字为 18 像素）都是一个可点击的目标。

你可以在应用程序目录的 test/widget_test.dart 中添加 Guideline API 测试，也可以将其作为单独的测试文件（如名称生成器中的 test/a11y_test.dart）。

你可以通过在配置文件和发布模式下使用以下命令行标志可视化为你的 Web 应用程序创建的语义节点来调试无障碍：

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

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

这里是一些应用发布前的你需要考虑的部分清单。

• 主动交互。确保所有可以交互的地方都会给予反馈。任何按钮在按下之后都会做点什么。例如，如果你有一个“onPressed”事件的无操作回调，请改为显示一个“SnackBar”，并告诉用户刚才按下了哪个控件。

• 屏幕阅读测试。屏幕阅读器应该能够让你在点击控件时描述页面上所有的控件，并且描述应易于理解。请使用 TalkBack（Android）以及 VoiceOver (iOS) 测试你的应用。

• 对比度。我们建议你至少将控件或文本与背景之间的比例设为 4.5 : 1，禁用的组件除外。图片也应该经过审核足够的对比度。

• 上下文切换。当用户输入信息时你不应改变其信息。通常来说，widget 应该避免在没有任何确认动作的情况下更改用户的上下文。

• 可点击的目标。所有可点击的目标平均至少应为 48x48 像素。

• 错误。所有重要动作应该能够被撤销。在有限范围内显示错误原因，如果可能的话，提供订正建议。

• 色觉不足测试。控件应该可用并且在色盲和灰度模式下清晰可见。

• 比例系数。文本大小和显示比例的用户界面应保持清晰易用。

如果你希望了解更多，尤其是如何配置 semantics tree，请查看如下社区成员贡献的文章：

• A deep dive into Flutter's accessibility widgets
• Semantics in Flutter
• Flutter: Crafting a great experience for screen readers

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-11-02。 查看文档源码 或者 为本页面内容提出建议。