辅助功能

确保应用能够被广泛的用户群体访问是构建高质量应用的重要组成部分。设计糟糕的应用会给各个年龄段的人们带来障碍。根据《联合国残疾人权利公约》，确保信息系统普遍可访问是道德和法律义务；世界各国将可访问性作为一项要求予以执行；公司也认识到最大程度地提高服务访问权限的商业优势。

我们强烈建议您在发布应用之前将辅助功能检查清单作为关键标准。Flutter 致力于帮助开发者创建更易于访问的应用，除了底层操作系统提供的支持之外，还包括对辅助功能的一流框架支持，包括

大字体

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

屏幕阅读器

提供关于 UI 内容的语音反馈

足够的对比度

使用具有足够对比度的颜色渲染 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 中，“元素”选项卡有一个“辅助功能”子选项卡，可用于检查导出到语义树的数据

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

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

以下两个屏幕截图显示了使用默认 iOS 字体设置和在 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 如何使用 VoiceOver 以及现已存档的Flutter Gallery Web 应用。

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

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

足够的颜色对比度使文本和图像更容易阅读。除了有利于各种视力障碍的用户外，在极端光照条件下（例如在阳光直射下或在亮度低的显示屏上）查看界面时，足够的颜色对比度也有助于所有用户。

《W3C 建议》

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

确保您的应用可以被所有人使用意味着从一开始就在其中构建辅助功能。对于某些应用而言，说起来容易做起来难。在下面的视频中，我们的两位工程师将一个移动应用从糟糕的辅助功能状态转变为一个利用 Flutter 内置 Widget 提供更易于访问体验的应用。

构建易于访问的 Flutter 应用

使用 Flutter 的辅助功能指南 API测试您的应用。此 API 检查您的应用 UI 是否符合 Flutter 的辅助功能建议。这些内容涵盖了文本对比度、目标大小和目标标签的建议。

以下代码段显示了如何在名为 AccessibleApp 的示例 Widget 上使用指南 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 点字体中渲染文本。

您可以将指南 API 测试与其他Widget 测试一起添加，或放在单独的文件中，例如本例中的 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 像素。
• 错误。重要的操作应该能够撤消。在显示错误的字段中，如果可能，请建议更正方法。

• 色觉缺陷测试。控件应在色盲和灰度模式下可用且易读。
• 缩放因子。UI 在文本大小和显示缩放的非常大的缩放因子下应保持易读和可用。

要了解有关 Flutter 和辅助功能的更多信息，请查看以下由社区成员撰写的文章

• 深入了解 Flutter 的辅助功能小部件
• Flutter 中的语义
• Flutter：为屏幕阅读器打造出色的体验

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-10-17。 查看源代码 或 报告问题.