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

Does passing container: true to the Semantics help? Does it work with a release mode app? Is the semantics node properly printed out with debugDumpSemanticsTree()? — Albert221
– Albert221, Commented Nov 4, 2023 at 9:18

YotiS · Accepted Answer · 2024-02-01 02:20:36Z

0

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!

edited Feb 1, 2024 at 2:20

answered Nov 15, 2023 at 20:08

YotiS

798 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flutter semantics accessibility issues [flutter]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related