Flutter 语义可访问性问题 [flutter]-解网

问：

我正在尝试将类似于 HTML 标签的标题添加到使用 Dart/Flutter 创建的登录网页中。这是为了遵守 WCAG 可访问性指南。为了实现这一点，我利用了 Semantics 小部件并将 header 属性设置为 true->h1

  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 语音 ->

Flutter Dart 标头可访问性语义

经过广泛的研究，我发现这个问题可能是因为 WAVE 专门搜索 HTML 标题元素（如、等），这些元素在网页结构中是标准的。然而，Flutter 的小部件，包括 Text 和 Semantics，在为 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);
  }

在那之后，波浪工具识别了我的标题，一切都很好！

上一个：如何强制 Voiceover （MacOS）正确读出美元金额，忽略内部跨度元素？

下一个：我无法输入“sudo apt-get update”mac 的密码 [关闭]

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

Flutter semantics accessibility issues [flutter]

评论