如何在Flutter Semantics中指定自定义语义角色？

要在Flutter Web中对应W3C的ARIA语义角色，核心是利用Flutter Semantics组件的role属性（SemanticsRole枚举），而非依赖link、label这类通用参数。你之前的问题根源在于未指定正确的语义角色，导致语义树将元素识别为generic/group。

关键问题分析 #

1. 参数误用：你用link: true模拟标签（tab），但link对应ARIA的link角色，和tab的语义完全不匹配；selected属性仅在支持选中状态的角色（如tab、radio）下才会在语义树中生效。
2. 层级结构缺失：Youtube的语义树遵循navigation -> tablist -> tab的层级，你需要对应这个结构组织Semantics组件。

正确实现代码示例 #

针对导航+标签场景，使用SemanticsRole枚举指定对应ARIA角色：

return Semantics(
  container: true,
  role: SemanticsRole.navigation, // 对应ARIA的navigation角色
  label: '主导航',
  child: Semantics(
    container: true,
    role: SemanticsRole.tabList, // 标签组对应ARIA的tablist角色
    child: Row(
      children: [
        Semantics(
          role: SemanticsRole.tab, // 单个标签对应ARIA的tab角色
          selected: true,
          enabled: true,
          child: Clickable(
            child: const Text('Tab 1'),
            onClick: () => print('foo'),
          ),
        ),
        Semantics(
          role: SemanticsRole.tab,
          selected: false,
          enabled: true,
          child: Clickable(
            child: const Text('Tab 2'),
            onClick: () => print('bar'),
          ),
        ),
      ],
    ),
  ),
);

核心注意事项 #

• 用SemanticsRole指定角色：Flutter的SemanticsRole枚举覆盖了绝大多数ARIA标准角色，比如navigation、tabList、tab、button、listItem等，直接对应即可。
• 匹配ARIA层级规范：复杂组件需按语义层级嵌套，比如导航容器（navigation）包裹标签组（tabList），再包裹单个标签（tab），确保语义树结构和Youtube一致。
• 自定义交互组件需显式声明：你的Clickable是GestureDetector的封装，这类组件不会自动生成语义，必须通过Semantics明确声明角色、选中状态、可用性等。
• 测试验证：使用Chrome DevTools的「Accessibility」面板查看语义树，确认角色（Role）和状态（Selected）是否正确显示。

内容的提问来源于stack exchange，提问作者fraukuchen