tabpanel generated from layout group is announced by screen reader with incorrect aria role - accessibility issue
Hello,
Product: Customer Service Application
Version: 8.3.0
Accessibility Issue: Using layout tab groups generates an HTML markup tab structure where the tabpanel is contained within the tablist. Per our accessibility testers, this code design causes the Jaws screen reader to announce the tabpanel with the incorrect role, such as 'link'.
How do we manipulate the DOM so that the tabpanel, when it receives focus, is announced by the screen reader as a tabpanel and not as a link or a header? (i.e. are there attributes we can add/remove?)
Northbridge
CA
Hi Regina,
I have added a layout group (tab) to one of my use cases and JAWS reads it as follows..
"Title tab selected, tab 1 of 2" as I got two tabs out there.
Could you explain your use-case in detail? It's not recommended to manipulate/modify the DOM.
OOTB scenario seems to be accessible, but if you have tried something else, we can think of ways to fix that.
-Shruthi
Sky Solutions LLC
US
Thank you for your response here as well!
Steps to reproduce:
1. Turn on Jaws screen reader
2. Press Tab key to set focus on active tab
3. Press Tab key again to set focus on the tabpanel
<div section_index="1" class="layout-body clearfix" tabindex='0' role="tabpanel">
2 screen reader issues:
1. The <div role=tabpanel> does not have an aria-label or accessible name for the screen reader to announce
2. When the screen reader sets focus on the <div role=tabpanel> it doesn't announce to the user the correct role of 'tabpanel'.
Sky Solutions LLC
US
Were you able to reproduce the issue? I am currently able to reproduce this issue in the Pega Customer Service Demo App (PegaCSSample), so we do not believe this is a project specific issue.
Please let me know your findings and if you have any suggestions on how to resolve this issue. Thank you!
Sincerely,
Regina