# 无障碍测试 > 关于 Flutter 无障碍测试的信息。 ## Accessibility regulations ## 无障碍法规 To ensure your app is accessible, check it against public standards like the [Web Content Accessibility Guidelines (WCAG) 2][], the [EN 301 549][], and use resources like the [Voluntary Product Accessibility Template (VPAT)][] to self-assess your product. For more details on these regulations, check out the main [accessibility page](/ui/accessibility). 为确保你的应用具备无障碍能力， 请对照 [Web Content Accessibility Guidelines (WCAG) 2][]、[EN 301 549][] 等公开标准进行检查， 并使用 [Voluntary Product Accessibility Template (VPAT)][] 等资源对产品进行自评。 有关这些法规的更多详情，请参阅主 [无障碍页面](/ui/accessibility)。 [Web Content Accessibility Guidelines (WCAG) 2]: https://www.w3.org/WAI/standards-guidelines/wcag/ [EN 301 549]: https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf [Voluntary Product Accessibility Template (VPAT)]: https://www.itic.org/policy/accessibility/vpat ## Inspecting accessibility support ## 检查无障碍支持 We recommend using automated accessibility scanners to test the following: 我们建议使用自动化无障碍扫描器测试以下内容： * For Android: 对于 Android： 1. Install the [Accessibility Scanner][] for Android 为 Android 安装 [Accessibility Scanner][] 1. Enable the Accessibility Scanner from **Android Settings > Accessibility > Accessibility Scanner > On**. 在 **Android Settings > Accessibility > Accessibility Scanner > On** 中启用 Accessibility Scanner。 1. Navigate to the Accessibility Scanner 'checkbox' icon button to initiate a scan. 前往 Accessibility Scanner 的「复选框」图标按钮以启动扫描。 * For iOS: 对于 iOS： 1. Open the `iOS` folder of your Flutter app in Xcode. 在 Xcode 中打开 Flutter 应用的 `iOS` 文件夹。 1. Select a Simulator as the target, and click the **Run** button. 选择模拟器作为目标，然后点击 **Run** 按钮。 1. In Xcode, select **Xcode > Open Developer Tools > Accessibility Inspector**. 在 Xcode 中选择 **Xcode > Open Developer Tools > Accessibility Inspector**。 1. 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. 在 Accessibility Inspector 中选择 **Inspection > Enable Point to Inspect**， 然后在正在运行的 Flutter 应用中点选各种用户界面元素以检查其无障碍属性。 1. In the Accessibility Inspector, select **Audit** in the toolbar, and then select **Run Audit** to get a report of potential issues. 在 Accessibility Inspector 的工具栏中选择 **Audit**， 然后选择 **Run Audit** 以获取潜在问题的报告。 * For web: 对于 Web： 1. Open Chrome DevTools (or similar tools in other browsers). 打开 Chrome DevTools（或其他浏览器中的类似工具）。 2. Inspect the HTML tree under semantics host, containing the ARIA attributes generated by Flutter. 检查 semantics host 下的 HTML 树，其中包含 Flutter 生成的 ARIA 属性。 3. In Chrome, the "Elements" tab has an "Accessibility" sub-tab that can be used to inspect the data exported to semantics tree. 在 Chrome 中，「Elements」选项卡带有「Accessibility」子选项卡，可用于检查导出到语义树的数据。 ## Testing accessibility on mobile ## 在移动端测试无障碍 Test your app using Flutter's [Accessibility Guideline API][]. This API checks if your app's UI meets Flutter's accessibility recommendations. These cover recommendations for text contrast, target size, and target labels. 使用 Flutter 的 [Accessibility Guideline API][] 测试你的应用。 该 API 会检查应用的 UI 是否符合 Flutter 的无障碍建议，涵盖文本对比度、目标尺寸和目标标签等建议。 The following snippet shows how to use the Guideline API on a sample widget named `AccessibleApp`: 以下代码片段演示如何在名为 `AccessibleApp` 的示例 widget 上使用 Guideline API： ```dart title="test/a11y_test.dart" 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(); }); } ``` To try these tests out, run them on a [new app created with `flutter create`][create-new-app]. Each button on that app's main screen serves as a tappable target with text rendered in an 18-point font. 要试用这些测试，请在 [使用 `flutter create` 创建的新应用][create-new-app] 上运行它们。 该应用主屏幕上的每个按钮都是可点击目标，文本以 18 磅字体渲染。 You can add Guideline API tests alongside other [widget tests][], or in a separate file, such as `test/a11y_test.dart` in this example. 你可以将 Guideline API 测试与其他 [widget 测试][widget tests] 放在一起， 或放在单独的文件中，例如本示例中的 `test/a11y_test.dart`。 [Accessibility Guideline API]: https://api.flutter-io.cn/flutter/flutter_test/AccessibilityGuideline-class.html [create-new-app]: /reference/create-new-app [widget tests]: /testing/overview#widget-tests ## Testing accessibility on the web ## 在 Web 上测试无障碍 You can debug accessibility by visualizing the semantic nodes created for your web app using the following command line flag in profile and release modes: 你可以在 profile 和 release 模式下使用以下命令行标志，通过可视化 Web 应用创建的语义节点来调试无障碍： ```console flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true ``` With the flag activated, the semantic nodes appear on top of the widgets; you can verify that the semantic elements are placed where they should be. If the semantic nodes are incorrectly placed, please [file a bug report][]. 启用该标志后，语义节点会显示在 widget 上方； 你可以验证语义元素是否放置在正确位置。 如果语义节点位置不正确，请 [提交 bug 报告][file a bug report]。 [Accessibility Scanner]: https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en [file a bug report]: https://goo.gle/flutter_web_issue