Flutter无障碍工具插件accessibility_tools的使用

插件介绍

accessibility_tools 是一个用于确保您的应用程序对所有人都可访问的检查器和工具包。创建一个无障碍的应用程序是非常重要的，但往往被忽视或推迟。这个包确保您的应用从一开始就具有无障碍性，通过在构建时检查您的界面。

主要功能

• 语义标签检查器：确保按钮和其他可点击的小部件都有关联的语义标签。
• 点击区域检查器：确保所有可点击的小部件足够大，易于点击。
• 大字体溢出检查器（实验性）：确保当用户使用较大字体时，没有flex小部件（如 Column 和 Row）溢出。
• 输入标签检查器：确保文本字段和输入控件有语义标签。
• 图像标签检查器：确保图像有语义标签。
• 测试工具切换：提供多种模拟设置，如文本缩放、本地化、文本方向、平台、密度、粗体文本、颜色模式模拟和屏幕阅读器模式。

插件信息

• pub.dev
• MIT License
• Codecov

快速开始

要在您的Flutter项目中使用 accessibility_tools，您需要将其添加到项目的 builder 属性中：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => AccessibilityTools(child: child),
      home: HomePage(),
    );
  }
}

这些工具仅在调试模式下运行，并且在发布构建中会被编译出去。

当前的无障碍检查器

语义标签检查器

确保按钮和其他可点击的小部件都有关联的语义标签。例如：

IconButton(
  onPressed: () => login(),
  icon: Icon(Icons.person),
  semanticLabel: 'Login',
)

点击区域检查器

确保所有可点击的小部件足够大，易于点击。默认情况下，移动设备上的最小点击区域为48x48，桌面设备上为44x44。

大字体溢出检查器（实验性）

确保当用户使用较大字体时，没有flex小部件（如 Column 和 Row）溢出。可以通过以下方式启用：

AccessibilityTools(checkFontOverflows: true)

输入标签检查器

确保文本字段和输入控件有语义标签。

图像标签检查器

确保图像有语义标签。

当前的测试工具切换

• 文本缩放：更改文本缩放因子，范围是0.1到10.0。
• 本地化：覆盖当前选择的 WidgetApp 的本地化设置。
• 文本方向：强制文本按照选定的值显示（从右到左或从左到右）。
• 平台：更改当前的 TargetPlatform，这可能会改变滚动行为、返回按钮图标、手势导航等。
• 密度：更改应用程序的视觉密度，这可能会改变一些小部件（如 ListTile）的填充。
• 粗体文本：模拟操作系统请求加粗文本。
• 颜色模式模拟：模拟颜色模式，支持的模式包括：protanopia、deuteranopia、tritanopia、倒置颜色、灰度。
• 屏幕阅读器模式：启用语义调试器以模拟应用程序在屏幕阅读器中的显示方式。

配置

您可以使用 AccessibilityTools 小部件的属性来启用或禁用检查器：

AccessibilityTools(
  minimumTapAreas: MinimumTapAreas.material,
  checkSemanticLabels: false,
  checkFontOverflows: true,
  checkImageLabels: true,
  logLevel: LogLevel.verbose,
  buttonsAlignment: ButtonsAlignment.bottomRight,
  enableButtonsDrag: false,
  testingToolsConfiguration: TestingToolsConfiguration(
    enabled: true,
    minTextScale: 1.0,
    maxTextScale: 2,
  ),
  child: child,
)

示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中集成 accessibility_tools：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        // Add AccessibilityTools to the widget tree. The tools are available
        // only in debug mode
        return AccessibilityTools(
          enableButtonsDrag: true,
          checkFontOverflows: true,
          checkImageLabels: true,
          buttonsAlignment: ButtonsAlignment.bottomRight,
          child: child,
        );
      },
      home: const MyHomePage(),
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Accessibility Tools Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.person),
              semanticLabel: 'Login',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Click Me'),
            ),
            SizedBox(height: 20),
            Image.network(
              'https://example.com/image.png',
              semanticLabel: 'Example Image',
            ),
          ],
        ),
      ),
    );
  }
}

通过以上步骤，您可以在开发过程中确保应用程序的无障碍性，并通过各种测试工具进行验证。希望这对您有所帮助！