Flutter 语义可访问性问题 [flutter]

Question

我正在尝试向使用 Dart/Flutter 创建的登录网页添加类似于 HTML

h1

标签的标头。这是为了遵守 WCAG 无障碍指南。为了实现这一点，我利用语义小部件并将标头属性设置为 true->

  Widget _buildTitle(BuildContext context) {
    return SizedBox(
      height: 56,
      width: double.infinity,
      child: Semantics(
        header: true,
        label: context.loc.semanticsLogInText,
        child: Text(
          context.loc.semanticsLogInText,
          style: Theme.of(context).textTheme.headlineLarge,
          textAlign: TextAlign.left,
        ),
      ),
    );
  }

但屏幕阅读器仍然无法工作（我的 Mac 上有旁白）没有获取页面的任何结构。也用 Wave 进行了测试，结果相同 ->

MAC 语音 ->

Answer 1

经过广泛研究，我发现问题可能是因为 WAVE 专门搜索 HTML 标头元素（例如 、 等），这些元素是网页结构中的标准元素。然而，Flutter 的小部件（包括文本和语义）在针对 Web 进行编译时不会直接转换为这些 HTML 元素。为了解决这个问题，我设计了一种使用 universal_html 包来处理 HTML 元素的方法。 ->

  void addHtmlHeading(BuildContext context) {
   final html.Element heading = html.HeadingElement.h1();
   heading.text = "my header";
   html.document.body?.children.add(heading);
  }

之后 Wave 工具识别了我的标题，一切都很好！