辅助功能测试

为了确保您的应用具有辅助功能，请对照公共标准（如 Web 内容无障碍指南 (WCAG) 2、EN 301 549）进行检查，并使用诸如 自愿产品无障碍模板 (VPAT) 之类的资源来评估您的产品。有关这些法规的更多详细信息，请查看主要的 辅助功能页面。

我们建议使用自动辅助功能扫描器来测试以下内容

• 对于 Android

  1. 安装 Android 的 辅助功能扫描器
  2. 从 Android 设置 > 辅助功能 > 辅助功能扫描器 > 开 启用辅助功能扫描器。
  3. 导航到辅助功能扫描器的“复选框”图标按钮以启动扫描。

• 对于 iOS

  1. 在 Xcode 中打开 Flutter 应用的 iOS 文件夹。
  2. 选择模拟器作为目标，然后单击 运行 按钮。
  3. 在 Xcode 中，选择 Xcode > 打开开发者工具 > 辅助功能检查器。
  4. 在辅助功能检查器中，选择 检查 > 启用点检，然后选择正在运行的 Flutter 应用中的各种用户界面元素以检查其辅助功能属性。
  5. 在辅助功能检查器中，选择工具栏中的 审核，然后选择 运行审核 以获取潜在问题的报告。

• 对于 Web

  1. 打开 Chrome DevTools（或其他浏览器的类似工具）。
  2. 检查语义宿主下的 HTML 树，其中包含 Flutter 生成的 ARIA 属性。
  3. 在 Chrome 中，“元素”选项卡有一个“辅助功能”子选项卡，可用于检查导出的到语义树的数据。

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

以下代码段显示了如何在名为 AccessibleApp 的示例小部件上使用指南 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 应用 代码实验室中创建的应用上运行它们。该应用的主屏幕上的每个按钮都充当带有 18 点字体渲染文本的可点击目标。

您可以将指南 API 测试与其他 小部件测试 放在一起，或放在单独的文件中，例如本例中的 test/a11y_test.dart。

您可以通过使用以下命令行标志在 profile 和 release 模式下可视化为您的 Web 应用创建的语义节点来调试辅助功能

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

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