Repository navigation
The Tabs Widget cannot be activated using NVDA screen reader while navigating in brows mode #2365
Description
The Tabs Widget cannot be activated using NVDA screen reader while navigating in brows mode
Steps to Reproduce:
- Open Tabs Widget Example on Chrome Browser.
- Turn on NVDA screen reader.
- Start navigating with the 'h' quick navigation key till the NVDA focus reaches the Example > Demo heading.
- Start navigating with down arrow. When 'One' tab is active press down arrow till the NVDA focus moves to the 'Two' tab.
- Press enter and space key and observe.
Description:
NVDA is a screen reader. Users with blindness use to operate computer. All UI elements are required to be operable with screen reader. In the current scenario a blind screen reader user cannot activate tabs when navigating with the NVDA brows mode.
The tabs are actionable only with the focus mode. This causes lots of issues to screen reader users and many will not know how to switch from brows to focus mode just to activate a tab.
The APG Tab Example works fine with NVDA brows mode.
NVDA screen reader can be downloaded from:
https://www.nvaccess.org/download/
Activity
mgol commentedon Sep 5, 2025
Thanks for the report. I was able to confirm this on a Windows 11 VM with NVDA. VoiceOver on macOS doesn't have the issue.
This is something that I'd definitely want to fix.
bpmohith commentedon Sep 5, 2025
@mgol
Thank you for taking this up. Adding few more details hope this will be of some help.
Please suggest me if I have to make point of removing aria-expanded as a separate issue.
mgol commentedon Jan 26, 2026
I had a look at VS Code tabs and they follow a similar structure for the tabs in the left sidebar:
ulelement withrole=tablistul,lielements withrole=taband botharia-expandedandaria-selectedattributesli,aelementsI'm not sure what we're doing differently here that VS Code; I suspect if this was causing a11y issues then they'd fix this long ago?
mgol commentedon Jan 26, 2026
I'm a bit lost here. ARIA Authoring Practices Guide (APG) on the Tabs Pattern page links to two examples, but they all use buttons and we need links - which is needed as we support the "right click + open in a new tab" action on a tab to open in a new browser tab with the proper jQuery UI tab activated.
I've also seen a page claiming that with
role=tablistelements withrole=tabmust be immediate children, which would implicatelis have to haverole=tab. But I don't know how trustworthy that page is.All in all, this seems more complex than I initially though. Given that jQuery UI is in maintenance mode, I need to park it, waiting for PRs that took all of that into account.