Flutter无障碍文本阅读插件accessible_text_view的使用

Flutter无障碍文本阅读插件accessible_text_view的使用

accessible_text_view 插件用于在 Flutter 应用中实现更完善的无障碍文本阅读功能。它通过渲染原生平台的 TextView 来解决在 Android 上嵌入链接时遇到的问题，并且在 iOS 上也提供了增强的无障碍选项。

可访问性问题解决

Android

目前，Flutter 的 Text 和 RichText 组件无法正确处理链接，直到 Google Android 团队将 “link trait” 添加到其 AccessibilityNodeInfo 类中。现在，只有 URLSpan 在 SpannableString 实例中才能在 TalkBack 中正确暴露链接。

理想的行为是整个文本被读取，每次遇到链接时会有轻微的停顿和独特的“点击声”。用户可以使用三指轻触来打开 TalkBack 菜单，在其中有一个包含链接的子菜单。由于缺乏公开的 Android API，当前 Flutter 框架无法实现这一功能。

然而，我也希望在此倡导为 Android 提供一种使这些元素单独可聚焦的选项，特别是对于较长的段落和文本块。这将帮助 TalkBack 用户不必听完整个文本。目前 Flutter 的 Text 组件实现支持将链接作为单独的焦点节点，但将其标记为按钮而不是链接。如果 Android 团队在公共 API 中提供“link trait”，使得 Flutter 引擎可以使用它而无需使用带有 Spannable 文本的 TextView，则可以通过允许 Semantics(link: true) 在 Flutter 的 Text、RichText 和 TextSpan 中工作来轻松实现这一点。

iOS

幸运的是，UIKit 有 UIAccessibilityTraits.link 属性，因此 Flutter 在 Text 和 TextSpan 中的链接可以正确地被标注。此外，Flutter 默认使它们成为单独的焦点节点。不幸的是，iOS 用户可能会感到困惑，因为 Apple 已经将 UITextView 改进得更像 Android 的 TextView，即 UITextView 中的链接不再是单独的焦点节点。VoiceOver 用户必须更加高级并知道使用链接选择器来访问它们。似乎屏幕阅读器用户在遇到嵌入链接的文本时仍然处于黑暗之中，这是在本地应用中常见的现象，例如服务条款、支持联系信息、使用说明等。

为了弥合差距，我增强了 UITextView 的可访问性行为，允许开发人员根据他们的应用程序和文本视图中的文本量选择适当的行文。

此外，你还可以使用平台测试在 iOS 上使用 Flutter 实现，在 Android 上使用此组件，但我实现了原生视图以简化实现过程。

除此之外，你也可以简单地将链接嵌入 HTML，并使用数据自动检测（适用于 Android 和 iOS）来自动链接电话号码和电子邮件地址！

安装

flutter pub add accessible_text_view

使用示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 accessible_text_view 插件：

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentTabIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Semantics(
          header: true,
          child: const Text('Flutter TextView example'),
        ),
      ),
      backgroundColor: Colors.black38,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: AccessibleTextView(
              html: """
              <p>这是一个可访问的 TextView 组件。其行为在 Android 上更准确，在 iOS 上更灵活。</p>
              <p>这是第二段。</p>
              <p>这是一个示例文本，包含电话号码 555-234-2345，电子邮件链接 test@example.com 和外部链接到 <a href="https://google.com">Google</a>。
              在 Android 上，TalkBack 应该用滴答声指示每个链接。
              在 iOS 上，VoiceOver 应该提供长按链接菜单。</p>
              <p>此组件不应用于长文本，因为它不是为长文本设计的。对于这种情况，请使用 Web 视图。</p>
            """,
              textColor: Colors.white,
              linkWeight: FontWeight.bold,
              linkColor: Colors.blueAccent,
              appearance: AccessibleTextViewAppearance.dark,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }
}