按钮触发弹窗的ARIA规范用法及焦点管理技术问询

1. 关联触发按钮与阻塞式弹窗 #

要明确按钮和模态弹窗的绑定关系，给触发按钮和弹窗配合设置以下ARIA属性即可：

• 触发按钮（比如Delete按钮）需添加：
  • aria-haspopup="dialog"：告诉辅助技术该按钮会触发对话框弹窗
  • aria-controls="弹窗ID"：直接关联对应弹窗的ID，让辅助技术明确按钮控制的目标元素
  • aria-expanded="true/false"：弹窗显示时设为true，关闭时设为false，同步按钮的状态
• 弹窗元素需添加：
  • role="dialog"：声明这是对话框组件
  • aria-modal="true"：明确这是阻塞式模态弹窗，告知辅助技术忽略背景内容，仅聚焦弹窗内元素
  • aria-labelledby="弹窗标题ID"：关联弹窗标题的ID，帮助辅助技术读取弹窗主题，提升内容可理解性

示例代码片段：

<button id="delete-btn" aria-haspopup="dialog" aria-controls="delete-dialog" aria-expanded="false">Delete</button>

<div id="delete-dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title" hidden>
  <h2 id="dialog-title">确认删除吗？</h2>
  <button id="close-btn">关闭</button>
  <button id="cancel-btn">Cancel</button>
  <button id="confirm-btn">确认删除</button>
</div>

2. 让ARIA识别弹窗的焦点元素 #

模态弹窗显示后，必须主动管理焦点：

• 弹窗显示时，立即将焦点移到弹窗内的可交互元素上（优先选择关闭按钮或高频操作按钮，比如示例里的关闭按钮），这是WAI-ARIA的规范要求
• 同时要实现焦点陷阱：在弹窗内循环焦点，用户按Tab时不会跳出弹窗到背景内容，Shift+Tab也能回到弹窗内的第一个可交互元素
• 辅助技术会通过role="dialog"和aria-modal="true"识别弹窗区域，配合主动的焦点转移，就能正确聚焦弹窗内容

3. 关闭弹窗后返回焦点到原触发按钮 #

这个逻辑需要结合JavaScript实现：

• 点击触发按钮时，先将当前按钮元素存储到变量中
• 当点击关闭按钮或Cancel按钮时，先隐藏弹窗，再调用triggerBtn.focus()将焦点移回原触发按钮
• 同步更新触发按钮的aria-expanded属性为false，保持状态一致

示例JS逻辑：

const deleteBtn = document.getElementById('delete-btn');
const deleteDialog = document.getElementById('delete-dialog');
const closeBtn = document.getElementById('close-btn');
const cancelBtn = document.getElementById('cancel-btn');

// 打开弹窗
deleteBtn.addEventListener('click', () => {
  deleteDialog.hidden = false;
  deleteBtn.setAttribute('aria-expanded', 'true');
  // 焦点移到弹窗的关闭按钮
  closeBtn.focus();
});

// 关闭弹窗并返回焦点
function closeDialog() {
  deleteDialog.hidden = true;
  deleteBtn.setAttribute('aria-expanded', 'false');
  // 焦点返回原触发按钮
  deleteBtn.focus();
}

closeBtn.addEventListener('click', closeDialog);
cancelBtn.addEventListener('click', closeDialog);

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