一、概念与定位
aria-haspopup 的基本定义与取值
在<HTML>无障碍设计中，aria-haspopup 是一个用于通知辅助技术的属性，指示一个控件将引发一个弹出层或对话框。理解它的核心在于知道它的取值不仅是布尔值，而是包含具体弹出类型的字符串。本质上，它并不替代键盘导航，而是与其它辅助属性一起增强可访问性。
常见的取值包括 true、false 以及具体的弹出类型，例如 menu、listbox、tree、grid、dialog。选择具体取值时应与实际弹出层的角色相匹配，以避免误导辅助技术。从概念的角度，取值越明确，屏幕阅读器的提示就越语义化。
<button id="trigger" aria-haspopup="menu" aria-expanded="false" aria-controls="menu">菜单</button>
<ul id="menu" role="menu" aria-labelledby="trigger" hidden><li role="none"><button role="menuitem">新建</button></li><li role="none"><button role="menuitem">打开</button></li>
</ul>
与无障碍设计的关系
aria-haspopup 可以帮助屏幕阅读器用户理解后续的交互状态，但它并不是唯一的无障碍要素。正确的组合 应包括 aria-expanded、aria-controls、以及对焦点的合理管理，确保在打开与关闭弹出层时，焦点能够被准确定位到可操作的项上。从概念到实战，这类组合需要与实际的 DOM 结构和键盘事件紧密协同。
在实现时应牢记：aria-haspopup 表达意图，aria-expanded 表示当前的展开状态，aria-controls 指向实际的弹出层元素。若不配合正确的焦点管理，辅助技术可能仍无法提供稳定的导航体验。
二、无障碍与兼容性的实现要点
正确标记触发元素与弹出层的关系
要点在于让触发元素与弹出层之间建立清晰的关系。aria-haspopup 应与弹出层的角色匹配，且通过 aria-controls 将两者在 DOM 中建立关联。使用 button 作为触发控件能自然获得可聚焦和可点击的行为，避免使用 div/span 这类不具交互语义的元素。
此外，弹出层本身需要合适的角色定位，如 role="menu"、role="dialog"、role="listbox" 等，结合 aria-labelledby 指向触发元素的可见文本，能让屏幕阅读器更准确地描述弹出内容。
<button id="trigger2" aria-haspopup="menu" aria-expanded="false" aria-controls="menu2">选项</button>
<ul id="menu2" role="menu" aria-labelledby="trigger2" hidden><li role="none"><button role="menuitem" id="m1">设置</button></li><li role="none"><button role="menuitem" id="m2">退出</button></li>
</ul>
键盘导航与焦点管理的要点
无障碍体验不仅来自标记，还来自对键盘交互的正确处理。焦点管理 要在弹出层打开时将焦点移到第一个可聚焦项，并在关闭时回到触发控件。常见的实现策略是通过监听 Tab 键的循环，以及在 Escape 时关闭弹出层并恢复焦点。
aria-expanded 与 aria-controls 的组合应在打开/关闭状态之间同步，避免状态不一致导致辅助技术混淆。若要强化无障碍，可以在打开时设置对话框的 aria-modal="true" 或在菜单项中使用明确的提示文本。
const btn = document.getElementById('trigger2');
const menu = document.getElementById('menu2');
btn.addEventListener('click', () => {const expanded = btn.getAttribute('aria-expanded') === 'true';btn.setAttribute('aria-expanded', String(!expanded));menu.hidden = expanded;if (!expanded) {// 将焦点移到第一个菜单项const firstItem = menu.querySelector('[role="menuitem"]');firstItem && firstItem.focus();} else {btn.focus();}
});
三、实战示例与代码解读
简单下拉菜单的可访问实现
下面的示例展示了一个通过 aria-haspopup="menu" 指示的触发按钮，以及一个 role="menu" 的弹出菜单。aria-expanded 的状态与菜单可见性保持同步，aria-controls 指向弹出层的标识，提升屏幕阅读器的理解度。
在此结构中，aria-labelledby 将菜单与触发按钮文本关联起来，辅助技术可以稳定地朗读出菜单的标题。请注意在实际应用中要实现键盘导航与焦点循环，以确保用户可以从一个菜单项无障碍地移到下一个。
<button id="menuBtnMain" aria-haspopup="menu" aria-expanded="false" aria-controls="mainMenu">更多操作</button>
<ul id="mainMenu" role="menu" aria-labelledby="menuBtnMain" hidden><li role="none"><button role="menuitem">下载</button></li><li role="none"><button role="menuitem">分享</button></li>
</ul>
// 简单示例：切换菜单可见性并聚焦第一个菜单项
const btnMain = document.getElementById('menuBtnMain');
const menuMain = document.getElementById('mainMenu');
btnMain.addEventListener('click', () => {const expanded = btnMain.getAttribute('aria-expanded') === 'true';btnMain.setAttribute('aria-expanded', String(!expanded));menuMain.hidden = expanded;if (!expanded) {const first = menuMain.querySelector('[role="menuitem"]');first && first.focus();} else {btnMain.focus();}
});
对话框式弹出与 aria-haspopup 的组合
当弹出层是一个对话框（dialog）时，aria-haspopup="dialog" 以及 role="dialog" 的组合可以给辅助技术清晰的上下文。配合 aria-modal="true"、aria-labelledby、以及对焦点的初始定位，可以提升对话框的可访问性。
下面的代码演示一个对话框触发场景，触发按钮拥有对应的弹出标记，弹出对话框后自动聚焦对话标题以帮助用户快速进入交互状态。
<button id="dialogBtn" aria-haspopup="dialog" aria-expanded="false" aria-controls="myDialog">打开对话框</button>
<div id="myDialog" role="dialog" aria-labelledby="dialogTitle" aria-modal="true" hidden><h2 id="dialogTitle">许可信息</h2><p>这是一个对话框示例，用于演示 aria-haspopup 与对话框的组合。</p><button id="closeDialog">关闭</button>
</div>
const btnDialog = document.getElementById('dialogBtn');
const dlg = document.getElementById('myDialog');
const closeBtn = document.getElementById('closeDialog');
btnDialog.addEventListener('click', () => {const expanded = btnDialog.getAttribute('aria-expanded') === 'true';btnDialog.setAttribute('aria-expanded', String(!expanded));dlg.hidden = expanded;if (!expanded) {// 将焦点移动到对话框标题const title = document.getElementById('dialogTitle');title && title.focus();} else {btnDialog.focus();}
});
closeBtn.addEventListener('click', () => {btnDialog.setAttribute('aria-expanded', 'false');dlg.hidden = true;btnDialog.focus();
});
