无障碍测试

为确保你的应用具备无障碍能力，请对照 Web Content Accessibility Guidelines (WCAG) 2、EN 301 549 等公开标准进行检查，并使用 Voluntary Product Accessibility Template (VPAT) 等资源对产品进行自评。有关这些法规的更多详情，请参阅主 无障碍页面。

我们建议使用自动化无障碍扫描器测试以下内容：

• For Android:

  1. Install the Accessibility Scanner for Android
  2. Enable the Accessibility Scanner from Android Settings > Accessibility > Accessibility Scanner > On.
  3. Navigate to the Accessibility Scanner 'checkbox' icon button to initiate a scan.

• 对于 Android：

  1. 为 Android 安装 Accessibility Scanner
  2. 在 Android 设置 > 无障碍 > Accessibility Scanner > 开启 中启用 Accessibility Scanner。
  3. 前往 Accessibility Scanner 的「复选框」图标按钮以启动扫描。

• For iOS:

  1. Open the iOS folder of your Flutter app in Xcode.
  2. Select a Simulator as the target, and click the Run button.
  3. In Xcode, select Xcode > Open Developer Tools > Accessibility Inspector.
  4. In the Accessibility Inspector, select Inspection > Enable Point to Inspect, and then select the various user interface elements in your running Flutter app to inspect their accessibility attributes.
  5. In the Accessibility Inspector, select Audit in the toolbar, and then select Run Audit to get a report of potential issues.

• 对于 iOS：

  1. 在 Xcode 中打开 Flutter 应用的 iOS 文件夹。
  2. 选择模拟器作为目标，然后点击 Run 按钮。
  3. 在 Xcode 中选择 Xcode > Open Developer Tools > Accessibility Inspector。
  4. 在 Accessibility Inspector 中选择 Inspection > Enable Point to Inspect，然后在正在运行的 Flutter 应用中点选各种用户界面元素以检查其无障碍属性。
  5. 在 Accessibility Inspector 的工具栏中选择 Audit，然后选择 Run Audit 以获取潜在问题的报告。

• For web:

  1. Open Chrome DevTools (or similar tools in other browsers).
  2. Inspect the HTML tree under semantics host, containing the ARIA attributes generated by Flutter.
  3. In Chrome, the "Elements" tab has an "Accessibility" sub-tab that can be used to inspect the data exported to semantics tree.

• 对于 Web：

  1. 打开 Chrome DevTools（或其他浏览器中的类似工具）。
  2. 检查 semantics host 下的 HTML 树，其中包含 Flutter 生成的 ARIA 属性。
  3. 在 Chrome 中，「Elements」选项卡带有「Accessibility」子选项卡，可用于检查导出到语义树的数据。

使用 Flutter 的 Accessibility Guideline API 测试你的应用。该 API 会检查应用的 UI 是否符合 Flutter 的无障碍建议，涵盖文本对比度、目标尺寸和目标标签等建议。

以下代码片段演示如何在名为 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 create 创建的新应用上运行它们。该应用主屏幕上的每个按钮都是可点击目标，文本以 18 磅字体渲染。

你可以将 Guideline API 测试与其他 widget 测试 放在一起，或放在单独的文件中，例如本示例中的 test/a11y_test.dart。

你可以在 profile 和 release 模式下使用以下命令行标志，通过可视化 Web 应用创建的语义节点来调试无障碍：

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

启用该标志后，语义节点会显示在 widget 上方；你可以验证语义元素是否放置在正确位置。如果语义节点位置不正确，请提交 bug 报告。