FreedomScientific
JAWS doesn't narrates element role inside group with aria-roledescription
Summary
Example:
- Go to https://jsfiddle.net/kolaps33/3gc6evdn/ or use the following html:
<div
id="userCard1"
tabindex="0"
role="group"
aria-label="John Travolta"
aria-roledescription="user card"
>
<div role="presentation">
<span id="position1">John Travolta</span> <br />
<span id="position1">Actor</span> <br />
<span id="position1">USA</span> <br />
<a href="https://www.freedomscientific.com/products/software/jaws/">
JAWS pages
</a>
<br />
<button id="userName1">Open profile of user</button> <br />
</div>
</div>
- Navigate in virtual cursor mode into the link and into the button
Expected result
JAWS should narrate proper role for the link and for the button. Instead of it it narrate "user card" what is role for the parent element.
Actual result
JAWS narrates: visited user card JAWS pages Open profile of user user card
Additional Information
JAWS version and build number
JAWS 2020.2006.12
Operating System and version
Win 10
Browser and version:
Chrome 84.0.4147.89
Duplicate of https://github.com/FreedomScientific/VFO-standards-support/issues/288
Confirm the described behaviour, using simplified version of markup provided by @JAWS-test ,
<div id="userCard1" role="group" aria-label="John Travolta" aria-roledescription="user card">
<div>
<span>John Travolta</span> <br />
<span>Actor</span> <br />
<span>USA</span> <br />
<a href="https://www.freedomscientific.com/products/software/jaws/">
JAWS pages
</a>
<br />
<button id="userName1">Open profile of user</button> <br />
</div>
</div>
Navigating with virtual cursor, JAWS narrates:
- "User card JAWS pages"
- "Open profile of user user card"
Navigating by tabbing, JAWS narrates:
- JAWS correctly narrates "John Travolta user card, JAWS pages link"
- but incorrectly "Open profile of user user card"
For,
- Microsoft Edge Version 89.0.774.57 (Official build) (64-bit)
- Google Chrome Version 89.0.4389.90 (Official Build) (64-bit)
- Firefox 86.0.1 (64-bit)
The problem continues to occur (current Chrome, JAWS 2024). For example with role=toolbar and role=group. In my opinion, the problem is very serious.
This is the severe issue. As developers af accessible web interfaces we cannot use aria-role-description on groups. We need it for a limited usage, but this would allow us to expose a group of elements not as just a group, but as a card (for example).
As a result of this bug: sighted users see cards, but blind users see groups. How they could communicate?
The problem is wider.
<div role="group" aria-roledescription="card">
<img ...
<h3>...
<a...>
<button ...
</div>
Such HTML code has following issues:
Issue 1: The roledescription is not applied to the group, the group is still emitted as a group, not as a card.
Issue 2. Images, links, headings, buttons inside the group, all become emitted as "card". Which is not correct.
This is not a group with 4 or 5 cards.
This is a card with an image, heading, link and button inside.
4 years since the bug was filed and still not fixed.
