仅启动NVDA时无法用箭头键导航标签组，求解决办法

问题根源 #

NVDA启动后会拦截并处理可交互元素或带有特定ARIA角色元素的键盘事件：

• 使用role="presentation"会让元素失去语义化可交互性，NVDA可能不会将焦点分配给该元素，导致自定义键盘事件无法触发；
• 使用role="tablist"时，NVDA会启用标签组的默认导航逻辑，覆盖你自定义的箭头键行为。

具体解决步骤 #

1. 调整ARIA角色与焦点设置
   移除role="presentation"，给标签组容器设置role="group"（保留语义分组，不会触发NVDA默认标签导航），同时添加tabindex="0"确保容器能获得焦点：

   <div class="tab-group" role="group" tabindex="0" aria-label="内容标签组">
     <div class="tab active" tabindex="0">标签1</div>
     <div class="tab" tabindex="-1">标签2</div>
     <div class="tab" tabindex="-1">标签3</div>
   </div>
   

   每个标签默认设置tabindex="-1"，仅激活状态的标签设为tabindex="0"，保证焦点管理符合无障碍规范。

2. 拦截NVDA默认键盘事件
   在标签组容器的keydown事件中，监听左右箭头键，执行自定义导航逻辑的同时，调用preventDefault()和stopPropagation()阻止NVDA的默认处理：

   const tabGroup = document.querySelector('.tab-group');
   const tabs = tabGroup.querySelectorAll('.tab');
   
   tabGroup.addEventListener('keydown', (e) => {
     if (!['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
   
     // 阻止NVDA默认事件拦截
     e.preventDefault();
     e.stopPropagation();
   
     const activeTab = tabGroup.querySelector('.active');
     const currentIndex = Array.from(tabs).indexOf(activeTab);
     const newIndex = e.key === 'ArrowLeft' 
       ? (currentIndex === 0 ? tabs.length - 1 : currentIndex - 1)
       : (currentIndex === tabs.length - 1 ? 0 : currentIndex + 1);
   
     // 更新激活状态与焦点
     activeTab.classList.remove('active');
     activeTab.setAttribute('tabindex', '-1');
     tabs[newIndex].classList.add('active');
     tabs[newIndex].setAttribute('tabindex', '0');
     tabs[newIndex].focus();
   });
   

3. 额外检查

   • 确保没有其他全局键盘事件监听器干扰箭头键的触发；
   • 测试NVDA的“浏览模式”与“焦点模式”切换（按Insert+Space），确保在焦点模式下导航正常。

内容的提问来源于stack exchange，提问作者Yashi Arya