网页应用中页面汉堡菜单按钮的合适焦点切换快捷键咨询

推荐的快捷键组合 #

• Alt + M：以菜单（Menu）的首字母为标识，符合用户直觉，且不会与浏览器标准快捷键冲突，是网页应用中唤出主导航菜单的常用方案
• Ctrl + /：部分工具类网站用此快捷键唤出导航或帮助菜单，用户认知度较高

实现步骤 #

1. 修正按钮的无障碍属性 #

原代码中的aria-hidden="true"会导致屏幕阅读器忽略该按钮，需要移除；同时统一无障碍标签描述，确保屏幕阅读器能准确识别：

<button id="menuButton" class="left"
        title="Main Page Menu"
        aria-haspopup="menu"
        aria-label="Open main page menu" aria-expanded="false">
  <div class="menuicon"></div>
  <div class="menuicon"></div>
  <div class="menuicon"></div>
</button>

2. 添加快捷键监听代码 #

通过全局键盘事件触发菜单按钮逻辑，同时排除输入框、文本域等可编辑区域的触发，避免干扰用户输入：

document.addEventListener('keydown', function(e) {
  // 跳过可编辑元素内的按键操作
  const activeElement = document.activeElement;
  const isEditable = activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable;
  if (isEditable) return;

  // 触发Alt + M 快捷键
  if (e.altKey && e.key === 'M') {
    e.preventDefault();
    document.getElementById('menuButton').click();
  }

  // 可选：触发Ctrl + / 快捷键
  if (e.ctrlKey && e.key === '/') {
    e.preventDefault();
    document.getElementById('menuButton').click();
  }
});

3. 优化焦点视觉反馈 #

给按钮添加清晰的:focus状态样式，帮助键盘用户定位当前操作元素：

#menuButton:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

注意事项 #

• 优先选择用户熟悉的快捷键模式，避免自定义冷门组合
• 菜单切换时要同步更新aria-expanded属性的布尔值，保持无障碍状态一致性

内容的提问来源于stack exchange，提问作者James Cobban