Flutter RichText同一行多链接无障碍问题：屏幕阅读器仅识别首个链接

问题分析 #

当前实现存在两个核心问题导致屏幕阅读器无法正确识别多个链接：

• MergeSemantics会将所有子语义节点合并为一个，导致多个可点击链接的语义被混淆，屏幕阅读器无法区分它们。
• 使用WidgetSpan包裹Semantics+GestureDetector的方式，语义节点的层级和TextSpan的原生语义处理不兼容，容易造成后续链接的语义被忽略或合并。

修复方案 #

直接使用TextSpan的recognizer属性绑定点击事件，并配置语义属性，无需额外的WidgetSpan和MergeSemantics，具体步骤：

1. 移除外层的MergeSemantics组件；
2. 将每个可点击链接替换为带TapGestureRecognizer的TextSpan，并设置semanticsLabel；
3. 确保每个链接的TextSpan独立，语义节点不会被合并。

修正后的代码 #

RichText(
  text: TextSpan(
    style: const TextStyle(color: Colors.black, fontSize: 16.0),
    children: [
      const TextSpan(
        text: 'Android is a mobile operating system based on a modified version of the ',
      ),
      TextSpan(
        text: 'Linux kernel',
        style: const TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
        semanticsLabel: 'Linux kernel',
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            print("Link 1 tapped!");
          },
      ),
      const TextSpan(
        text: ' and other ',
      ),
      TextSpan(
        text: 'open-source',
        style: const TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
        semanticsLabel: 'open-source',
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            print("Link 2 tapped!");
          },
      ),
      const TextSpan(
        text: ' software.',
      ),
    ],
  ),
)

关键说明 #

• TapGestureRecognizer是Flutter原生手势识别器，和TextSpan结合时会自动生成正确的语义节点，屏幕阅读器能准确识别为可点击链接；
• 移除MergeSemantics后，每个TextSpan的语义节点都是独立的，屏幕阅读器可以逐个聚焦和播报；
• 若需要更详细的语义提示，可添加semanticsHint属性（如semanticsHint: '点击查看详情'），进一步提升无障碍体验。

测试验证 #

使用Android TalkBack或iOS VoiceOver测试时：

• 滑动屏幕阅读器焦点，可依次选中每个链接并单独播报；
• 点击任意链接均可触发对应的onTap事件；
• 单次播报可完整读取整段文本，链接部分会被标记为可交互元素。

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