带上下文菜单的表单区块：无障碍前提下跳过菜单切换区块的方法

下面提供几种可行的方案，既满足默认Tab导航跳过上下文菜单的需求，又不损害无障碍访问性：

方案1：视觉隐藏触发按钮+动态控制tabindex #

核心思路 #

给每个区块添加一个视觉隐藏但可被无障碍设备识别的触发按钮，默认将菜单按钮设为tabindex="-1"（不参与Tab流）；当用户通过触发按钮或快捷键激活菜单时，再将菜单按钮的tabindex设为0，使其进入Tab流。

实现步骤 #

1. 先添加视觉隐藏的CSS样式（确保屏幕阅读器能读取元素）：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. 修改HTML结构，添加触发按钮并关联菜单：

<section>
  <h3>Name</h3>
  <!-- 视觉隐藏的触发按钮，包含快捷键说明 -->
  <button class="visually-hidden menu-trigger" aria-haspopup="true" aria-expanded="false" aria-controls="name-menu" data-shortcut-key="n">
    打开名称区块菜单 (Alt+N)
  </button>
  <div class="fields">
    <label for="firstname">First name</label>
    <input id="firstname" type="text"/>
    <label for="lastname">Last name</label>
    <input id="lastname" type="text"/>
  </div>
  <ul id="name-menu" role="menu" aria-hidden="true">
    <li>
      <button role="menuitem" tabindex="-1">Add note</button>
    </li>
    <li> 
      <button role="menuitem" tabindex="-1">Add media</button>
    </li>
  </ul>
</section>

3. 用JavaScript处理交互逻辑：

document.querySelectorAll('.menu-trigger').forEach(trigger => {
  const menu = document.getElementById(trigger.getAttribute('aria-controls'));
  const menuItems = menu.querySelectorAll('[role="menuitem"]');

  // 监听快捷键触发
  document.addEventListener('keydown', (e) => {
    if (e.altKey && e.key.toLowerCase() === trigger.dataset.shortcutKey) {
      e.preventDefault();
      trigger.click();
    }
  });

  // 点击触发按钮切换菜单状态
  trigger.addEventListener('click', () => {
    const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
    trigger.setAttribute('aria-expanded', !isExpanded);
    menu.setAttribute('aria-hidden', isExpanded);

    // 切换菜单按钮的tabindex
    menuItems.forEach(item => {
      item.setAttribute('tabindex', isExpanded ? '-1' : '0');
    });

    // 激活菜单时自动聚焦第一个菜单项
    if (!isExpanded) {
      menuItems[0].focus();
    }
  });

  // 菜单失去焦点时自动关闭
  menu.addEventListener('focusout', (e) => {
    if (!menu.contains(e.relatedTarget)) {
      trigger.setAttribute('aria-expanded', 'false');
      menu.setAttribute('aria-hidden', 'true');
      menuItems.forEach(item => item.setAttribute('tabindex', '-1'));
    }
  });
});

无障碍与快捷键告知 #

• 触发按钮的文本直接包含快捷键说明，屏幕阅读器会自动朗读该信息；
• 可在表单顶部添加可见的快捷键说明区域，供键盘用户参考；
• 利用aria-describedby将区块标题与快捷键提示关联，增强识别性。

方案2：调整DOM顺序+快捷键直接跳转 #

核心思路 #

保持菜单按钮的tabindex="0"，但通过调整DOM结构将所有菜单移到整个表单的末尾，这样默认Tab流会先遍历所有表单字段，最后才到达菜单。同时给每个菜单设置专属快捷键，让用户可以快速跳转到对应区块的菜单。

实现步骤 #

1. 调整DOM结构，将所有菜单移到表单最后：

<form>
  <h1>Checklist</h1>
  <h2>Checklist section</h2>
  
  <!-- 仅保留区块内的表单字段 -->
  <section>
    <h3 id="name-heading" aria-describedby="name-shortcut">Name</h3>
    <p id="name-shortcut" class="visually-hidden">按Alt+N打开本区块菜单</p>
    <div class="fields">
      <label for="firstname">First name</label>
      <input id="firstname" type="text"/>
      <label for="lastname">Last name</label>
      <input id="lastname" type="text"/>
    </div>
  </section>
  <section>
    <h3 id="contact-heading" aria-describedby="contact-shortcut">Contact information</h3>
    <p id="contact-shortcut" class="visually-hidden">按Alt+C打开本区块菜单</p>
    <div class="fields">
      <label for="ContactInfoPhone">Phone</label>
      <input id="ContactInfoPhone" type="tel"/>
      <label for="email">Email</label>
      <input id="email" type="email"/>
    </div>
  </section>

  <!-- 所有菜单统一放在表单末尾 -->
  <div class="menus-container">
    <ul id="name-menu" role="menu" aria-labelledby="name-menu-label">
      <li id="name-menu-label" class="visually-hidden">名称区块菜单</li>
      <li><button role="menuitem">Add note</button></li>
      <li><button role="menuitem">Add media</button></li>
    </ul>
    <ul id="contact-menu" role="menu" aria-labelledby="contact-menu-label">
      <li id="contact-menu-label" class="visually-hidden">联系方式区块菜单</li>
      <li><button role="menuitem">Add note</button></li>
      <li><button role="menuitem">Add media</button></li>
    </ul>
  </div>
</form>

2. 添加快捷键监听实现快速跳转：

// 快捷键映射：Alt+N跳转到名称菜单，Alt+C跳转到联系方式菜单
const shortcutMap = {
  'n': document.getElementById('name-menu').querySelector('[role="menuitem"]'),
  'c': document.getElementById('contact-menu').querySelector('[role="menuitem"]')
};

document.addEventListener('keydown', (e) => {
  if (e.altKey && shortcutMap[e.key.toLowerCase()]) {
    e.preventDefault();
    shortcutMap[e.key.toLowerCase()].focus();
  }
});

无障碍与快捷键告知 #

• 每个区块标题通过aria-describedby关联视觉隐藏的快捷键提示，屏幕阅读器会朗读；
• 在表单顶部添加可见的快捷键说明区域，明确告知用户各区块菜单的触发方式。

方案3：模态菜单临时激活 #

核心思路 #

将菜单设计为模态弹窗，默认隐藏；当用户通过快捷键或区块内的触发按钮打开时，菜单以模态形式出现，此时Tab流会被限制在菜单内，关闭后自动回到原表单字段位置。这种方式既不影响默认Tab流，又能保证菜单的无障碍访问。

关键实现细节 #

• 用aria-modal="true"标记菜单容器，确保屏幕阅读器识别为模态框；
• 打开菜单时，将除菜单外的所有表单元素设为aria-hidden="true"，防止屏幕阅读器读取无关内容；
• 关闭菜单时，恢复原表单元素的aria-hidden状态，并聚焦到触发按钮或之前的表单字段。

快捷键告知 #

• 区块内的可见触发按钮（如菜单图标）的aria-label包含快捷键信息，例如：<button aria-label="打开菜单 (Alt+M)">...</button>；
• 模态菜单打开后，在菜单顶部添加视觉可见的快捷键提示，同时屏幕阅读器会朗读菜单内容。

内容的提问来源于stack exchange，提问作者Claus Stadel