Closed yjbanov closed 5 months ago
div has the ARIA role generic: https://www.w3.org/TR/html-aam-1.0/#el-div
the role generic has Name From: prohibited https://w3c.github.io/aria/#generic
So JAWS is not making a mistake here, but your code is wrong. Freedom Scientific must decide whether incorrect code should be output by JAWS as you wish.
by the way, this also applies to your workaround, since span may not be labelled with an aria-label either.
The problem happens with non-div
elements too. In particular, we use our own custom <flt-semantics>
element in Flutter. To give it a role we use role="text"
. Unfortunately, that's not a standard ARIA role. Only WebKit implements it in a meaningful way. Other browsers probably fallback to "generic" (which is what you are observing). Since there's no other ARIA role (that I'm aware of) that describes text, I think "generic" + aria-label
is the best option today. Alternatives seem worse, such as using incorrect roles ("group", "heading", etc).
Despite the HTML spec treating "generic" + aria-label
as a "prohibited" combination, since the spec doesn't provide an alternative, I think it's in the benefit of both the developer and the user to support this combination in practice, until the HTML spec matures enough to support this use-case. Screen readers on all mainstream non-Windows platforms support it, and so does NVDA on Windows. I don't think JAWS would be criticized for interpreting this combination the same way.
triage actions
aria-description
@yjbanov do you have a demo that I can test?
Here's a demo: https://jaws-issue-759.web.app/
@yjbanov thanks for the demo
Only WebKit implements it in a meaningful way. Other browsers probably fallback to "generic" (which is what you are observing). Since there's no other ARIA role (that I'm aware of) that describes text, I think "generic" + aria-label is the best option today. Alternatives seem worse, such as using incorrect roles ("group", "heading", etc).
webkit is removing support for role=text
Given that generic roles must not (in spec terms) expose the accessible name, it is not a good idea for JAWS to support it.
I have found a work around that obviates the need for a role or any other ARIA. It uses CSS text. I have tested in JAWS/NVDA in Chrome and Firefox, also VoiceOver/chrome on iOS and Talkback/chrome on Android. All announce the text "Hello"
why does it work? i think because CSS is rendered as a text node in the DOM.
I understand regarding role="text"
. I'll take it up with the browsers to adopt it. However, even without this role, JAWS behavior is broken compared to all other screen readers. Without the text role, all screen readers except JAWS will do the following:
While "empty group" is an unnecessary and annoying addition, the user can still find and be able to interact with the element. JAWS will skip it as if it's not there.
I confirmed today on Safari 17.3.1 on macOS. Safari did remove support for role="text"
. However, VoiceOver does not ignore or skip over the element containing aria-label
. So I think the issue is still valid. Please, reconsider.
Summary
JAWS completely ignores empty DOM nodes with
aria-label
on them. The accessibility focus ring cannot reach those nodes using navigation, hence the text of the label is never announced.NVDA on Windows, VoiceOver on macOS and iOS, and TalkBack on Android support such DOM structure. Narrator on Windows seems to have the same issue as JAWS.
Expected result
The screen reader should be able to focus on the
<div>
element (according to the traversal order of the DOM tree) and read its label.Actual result
There is no way to reach the node using navigation shortcuts. It's as if the element is not there at all.
Example
Additional Information
A workaround is to insert an artificial child and move the label to it, for example:
Issue https://github.com/FreedomScientific/standards-support/issues/405 may have the same underlying cause.
Why is this important?
This use-case is important for content that's rendered into WebGL (or any other canvas). In this mode, there are no DOM nodes with text content. Instead you only have absolutely positioned nodes annotated with whatever is rendered inside the canvas. Additionally, the developer typically does not own the a11y DOM structure. Instead the developer uses a WebGL framework, and it's the framework that outputs the accessibility DOM tree. So the developer is unable to apply the workaround.
JAWS version and build number
2022.2112.24 ILM
Operating System and version
Windows 11 Home 22H2 22621.1992
Browser and version:
Chrome 116.0.5845.188 Edge 116.0.1938.81