Flutter semantics accessibility issues [flutter]

Question

I am attempting to add a header, similar to an HTML h1 tag, to my login webpage created with Dart/Flutter. This is to comply with WCAG accessibility guidelines. To achieve this, I am utilizing the Semantics widget and setting the header property to 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,
        ),
      ),
    );
  }

but is not working still the screen reader (voice over on my Mac) Is not getting any structure of the page. also tested with Wave and same result ->

voice over MAC ->

Answer 1

After extensive research, I discovered that the issue likely arises because WAVE specifically searches for HTML header elements (such as , , etc.), which are standard in web page structures. However, Flutter's widgets, including Text and Semantics, don't directly convert into these HTML elements when compiled for the web. To address this, I devised a method using the universal_html package to handle HTML elements. ->

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

after that the Wave tool identified my header and all good!