下面的链接包含我对最初由 Marcy Sutton 构思的拉出式菜单设计的扩展。我想要的效果是创建一个包含子菜单的导航菜单。在屏幕阅读器的上下文中，此菜单中的元素将被禁用，直到有人按下按钮打开所需的信息。
在 Firefox、Chrome 和 IE 上测试此菜单后，该菜单的行为符合预期。然而，当运行一个名为 NVDA 的流行屏幕阅读器时，似乎会触发错误的按钮。以下是我重现该错误所采取的步骤：
- 使用制表符和空格键，我打开投资组合子菜单。这突出显示了网站 1 链接。
- 使用 shift 和 tab，我向后导航到 [X] 菜单（“关闭主菜单”）按钮。当我这样做时，投资组合按钮会再次自动关闭。到目前为止的正常行为。
- 但是，此时尝试重新打开投资组合按钮会导致 a) 主导航菜单按钮触发其事件，因此菜单关闭，或者 b) 菜单关闭，因为焦点以某种方式跳转到标题（是一个链接）。
Codepen：https ://codepen.io/nitronova/pen/qPbpMO
function initApp()
{ // Bind actions to functions.
navButton.addEventListener( "click", handleNavButtonClick, false );
conWrap.addEventListener( "click", handleOutMenuClick, false );
document.body.addEventListener( "keyup", handleKeyup, false ) /* navMenu. */
for( var i = 0; i < navButtons.length; i++ )
{
navButtons[i].addEventListener( "click", handleSubMenuButtonClick, false );
console.log('closing submenus init');
closeSubMenu(navButtons[i]);
}
console.log('closing the nav menu init');
closeNavMenu();
}
注意：主导航按钮（“navButton”）有自己的函数，称为handleNavButtonClick，而子菜单（“navButtons”）有handleSubMenuButtonClick。两个完全独立的功能。问题不在于脚本中的函数，而在于 NVDA 如何导致错误的函数（或事件触发器）触发。
没有错误信息；行为路径是问题所在。我的屏幕截图表明在 NVDA 运行时触发了错误的事件。https://imgur.com/a/OW1Iv
老实说，我还是个 JavaScript 新手。这里有人对此有任何解释吗？有什么我做错了吗？