[web]: Semantics differences between iOS/Android and Web

[mariamhas]

Some elements are announced by screenreaders as "empty group"

ex: tiles are being categorized as "group", screen readers will enter them, causing the same text to be repeated multiple times

internal bug: b/202046496

[vsomayaji]

Here is a gist demonstrating this issue:

https://dartpad.dev/?id=33deba3d9833eebc5b5a19803fd7dbcf

This Text widget:

Text('This is not an empty group.')

Gets read by VoiceOver as:

This is not an empty group., empty group

[vsomayaji]

The behavior has changed in Flutter 3, and IMHO it's worse. 😦 When navigating with VoiceOver arrow keys, this Text widget:

Text('This is not a group.')

Gets read as a group with three stops:

This is not a group., group

This is not a group.

end of, This is not a group., group"

https://dartpad.dev/?id=33deba3d9833eebc5b5a19803fd7dbcf

[yjbanov]

After some investigation I have a solution that fixes the issue "screen readers will enter them, causing the same text to be repeated multiple times". However, I don't yet have a solution that fixes the "group" issue in Chrome. The issue is that browsers other than Safari do not support role="text", which works great in Safari. All other options I've tried would leads to other issues, such as:

• Ignore the size of the element and size the focus ring to the text content, which is wrong. The HTML text size is irrelevant because Flutter renders into canvas, so the focus ring looks wrong.
• Read out the same label multiple times.

So I will go with the following option:

<flt-semantics role="text" aria-label="the text of the label" style="...positioning and sizing..." />

This still reads "group" or "empty group" on Chrome, but it satisfies everything else:

• The element is positioned and sized correctly.
• The label text is read exactly once; no entering and leaving and reading the same thing over and over again.
• On Safari the element behaves like a text node.

For now I will go with this solution and keep searching for a perfect one, if it exists.

[mdebbar]

@yjbanov does it make sense to file a chromium bug for role="text" (or link to an existing one)?

[yjbanov]

Yes, I might file one if I find out that it's indeed fixable on the Chromium side. According to https://www.tpgi.com/using-the-text-role/: "this role was considered for ARIA 1.1 but was not ultimately included". So it was intentionally rejected for inclusion in the standard. I'm not sure why it wasn't included. Perhaps there's another way to do the same thing. Or perhaps not all use-cases were considered. I'm trying to get in touch with Chrome's and Google's a11y experts to find an answer.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.