The Tabs Widget cannot be activated using NVDA screen reader while navigating in brows mode · jquery/jquery-ui#2365

(4 评论) (0 反应) (1 负责人)JavaScript (11,194 star) (5,390 fork)batch import

AccessibilityBugComp: Tabshelp wanted

描述

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/

贡献者指南

技术栈: javascripthtmlcss
领域: accessibilityfrontend
议题类型: accessibility
难度: 3
预计时间: 1-2 days
活动状态: active
清晰度: clear
前置要求: Familiarity with ARIAjQuery UI tabsScreen reader testing
新手友好度: 60
研究方向: The issue requires understanding the ARIA tab pattern from WAI ARIA practices (APG Tab Example). The current jQuery UI Tabs widget lacks proper ARIA roles and keyboard handling for NVDA browse mode. Review the existing tab widget code in jQuery UI, likely in the 'tabs' source file. Implement ARIA attributes such as role='tablist', role='tab', role='tabpanel', and manage focus with arrow keys. Ensure that clicking a tab via enter/space works while in NVDA browse mode by making the tab elements focusable and responding to activation events. Test with NVDA screen reader.