一、为什么需要无障碍适配

你可能觉得无障碍适配离自己很远，但其实它影响着数亿用户。比如视力障碍者依赖屏幕阅读器，运动障碍者可能无法精确点击小按钮，色盲用户可能分辨不出某些颜色差异。WCAG（Web Content Accessibility Guidelines）就是为解决这些问题而制定的国际标准，而Flutter作为跨平台框架，也需要遵循这些规范。

举个例子，如果你的应用按钮没有正确的语义标签，屏幕阅读器会读成"按钮"，用户完全不知道这个按钮是做什么的。再比如，如果文字对比度不够，色弱用户可能根本看不清内容。这些问题不仅影响用户体验，在某些国家和地区还可能涉及法律合规问题。

二、Flutter实现WCAG的核心要点

1. 语义化标签（Semantics）

Flutter提供了Semantics组件，可以给任何Widget添加无障碍标签。比如：

Semantics(
  label: '提交订单按钮',  // 屏幕阅读器会朗读这个标签
  button: true,         // 告诉屏幕阅读器这是一个按钮
  child: ElevatedButton(
    onPressed: () {},
    child: Text('提交'),
  ),
)

注意：如果按钮本身有文本（如"提交"），Flutter会自动使用该文本作为语义标签，不需要额外添加。但如果是图标按钮，就必须手动提供label。

2. 文字对比度

WCAG要求普通文字的对比度至少达到4.5:1，大号文字（18pt或14pt加粗）需要3:1。Flutter中可以通过ThemeData全局设置：

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(color: Colors.black87), // 深色文字
    ),
    scaffoldBackgroundColor: Colors.white,         // 浅色背景
  ),
)

也可以使用在线工具（如WebAIM Contrast Checker）验证颜色组合是否达标。

3. 焦点控制

键盘用户需要能通过Tab键导航。Flutter的Focus和FocusTraversal可以帮我们管理焦点顺序：

FocusTraversalGroup(  // 定义一组可遍历的控件
  child: Column(
    children: [
      Focus(autofocus: true, child: TextField()),  // 自动获取焦点
      Focus(child: ElevatedButton(onPressed: () {}, child: Text('确定'))),
    ],
  ),
)

4. 禁用动画（可选）

对于前庭障碍用户，动画可能引发眩晕。可以通过以下代码禁用动画：

MaterialApp(
  theme: ThemeData(
    // 禁用所有动画
    pageTransitionsTheme: PageTransitionsTheme(builders: {
      TargetPlatform.android: CupertinoPageTransitionsBuilder(),
      TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
    }),
  ),
)

三、进阶技巧与常见问题

1. 自定义无障碍树

复杂组件可能需要手动定义语义结构。比如一个购物车商品卡片：

Semantics(
  container: true,  // 表示这是一个语义容器
  child: Column(
    children: [
      Semantics(
        label: '商品名称：${product.name}',
        child: Text(product.name),
      ),
      Semantics(
        label: '价格：${product.price}元',
        child: Text('${product.price}'),
      ),
    ],
  ),
)

2. 测试无障碍功能

Flutter的flutter_test包支持无障碍测试：

testWidgets('无障碍测试', (tester) async {
  await tester.pumpWidget(MyApp());
  expect(find.bySemanticsLabel('提交订单按钮'), findsOneWidget);
});

3. 平台差异处理

Android和iOS的屏幕阅读器行为略有不同。比如在iOS上，可能需要额外设置hintText：

Semantics(
  label: '搜索框',
  hint: '输入关键字后按回车搜索',  // iOS专用提示
  child: TextField(),
)

四、实战案例与经验总结

完整示例：无障碍登录页面

class AccessibleLoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Semantics(label: '登录页面', child: Text('登录'))),
      body: FocusTraversalGroup(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            children: [
              Semantics(
                textField: true,
                label: '用户名输入框',
                child: TextField(decoration: InputDecoration(labelText: '用户名')),
              ),
              SizedBox(height: 16),
              Semantics(
                textField: true,
                label: '密码输入框',
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: '密码'),
                ),
              ),
              SizedBox(height: 24),
              Semantics(
                label: '登录按钮',
                button: true,
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text('登录'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

经验总结：

  1. 不要过度标注：只在自动化标签不充分时添加Semantics
  2. 真实设备测试：务必在开启VoiceOver/TalkBack的真机上测试
  3. 颜色不是唯一提示：重要信息不能仅靠颜色区分（比如错误提示要用文字+图标）
  4. 动态内容更新：内容变化时需要调用SemanticsService.announce通知屏幕阅读器

通过以上方法，你的Flutter应用不仅能满足WCAG标准，还能为所有用户提供一致的体验。记住，无障碍不是功能，而是基本权利。