一、aria-haspopup 的基础含义与适用场景
何为 aria-haspopup
aria-haspopup 是一个用于告诉辅助技术的属性，表示该元素会触发一个弹出控件，常见的类型包括菜单、对话框、列表框等。明确的弹出类型可以帮助屏幕阅读器用户提前知道将要出现的控件类型，提升可预测性。
在实现时，开发者应将 aria-haspopup 与实际的弹出控件实现配合使用，而不仅仅是赋值属性。它本身并不创建可操作的界面，需要结合其他 ARIA 属性和对应的 HTML 元素来完成完整体验。
与原生控件的关系
尽管 aria-haspopup 可以标记一个按钮会打开弹出内容，但它不是让原生控件具备弹出能力的万能钥匙。要实现真正的可操作性，需使用合适的角色以及可聚焦的菜单项，并确保键盘导航与焦点管理正确。
如果使用自定义控件，务必为弹出区域设置角色和标签，例如 role="menu"、role="menuitem" 等，并在打开时更新 aria-expanded 与 aria-hidden 等状态。
<button aria-haspopup="menu" aria-expanded="false" aria-controls="menu1">打开菜单</button>
<ul id="menu1" role="menu" aria-label="主菜单" hidden><li role="none"><a role="menuitem" href="#">选项一</a></li><li role="none"><a role="menuitem" href="#">选项二</a></li>
</ul>二、aria-haspopup 的取值与行为差异
取值及语义
aria-haspopup 的值可为 true、false、menu、listbox、tree、grid、dialog 等。推荐明确指定具体类型，例如 aria-haspopup="menu" 或 aria-haspopup="dialog"，以便屏幕阅读器能向用户传达精确的期望控件。
当值为 true 时，表示存在某种弹出控件，但未指明具体类型；这在有自定义弹出但无明确角色时会用到，但通常不如指定类型直观。
对键盘导航与聚焦的影响
不同类型的弹出控件需不同的键盘交互约定。应为弹出项提供可聚焦的元素，支持方向键导航、回车/空格激活以及 Esc 关闭，并在打开时将焦点移至合适的入口项。
在实现时，记得随弹出打开关闭状态同步 aria-expanded 的值，以帮助辅助技术了解当前可见性。
<button id="btn" aria-haspopup="menu" aria-expanded="false" aria-controls="menu1">打开菜单</button>
<ul id="menu1" role="menu" aria-label="主菜单" hidden>...</ul>三、无障碍最佳实践与常见陷阱
最佳实践：与控件角色协同
在可弹出场景中，应使用清晰的角色分工：按钮触发器使用按钮标签，弹出区域使用 role="menu" 或 role="dialog"（如果是对话框），菜单项使用 role="menuitem"。这样可以让辅助技术理解结构层级，并提供更合适的交互提示。
避免在不具备具体弹出行为的元素上强行应用 aria-haspopup；这会让屏幕阅读器产生混乱信息。仅在确有弹出内容时应用 aria-haspopup。
另外，若你的弹出控件是模态对话框，务必在打开时把焦点放在对话框内的初始焦点元素，并在关闭时返回可聚焦的触发点。
常见误区与纠正
误区1：aria-haspopup 可以替代可访问的控件实现。事实是它只是标注提示，实际控件需要具备完整的可访问性实现。
误区2：所有屏幕阅读器都会一致地朗读 aria-haspopup 提示。不同实现与版本差异较大，仍需结合测试。
误区3：aria-expanded 与 aria-hidden 不需要同步更新。应始终在打开/关闭时同步更新，保持状态一致。
四、实战示例：一个简易的弹出菜单实现
HTML 结构与 ARIA 属性
下面的结构展示了一个简易的弹出菜单：按钮带有 aria-haspopup，菜单位于同一层级，使用 role="menu" 与 menuItem 做为可聚焦项。清晰的结构有助于屏幕阅读器正确读出层级信息。
<button id="menuBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="mainMenu">菜单</button>
<ul id="mainMenu" role="menu" aria-label="主菜单" hidden><li role="none"><a role="menuitem" href="#">选项 A</a></li><li role="none"><a role="menuitem" href="#">选项 B</a></li><li role="none"><a role="menuitem" href="#">选项 C</a></li>
</ul>JavaScript 控制与键盘交互
要实现基本的可访问性，需在打开时设置 aria-expanded 为 true，同时将焦点管理交给菜单项，支持 Esc 键关闭菜单。良好的焦点管理是无障碍体验的关键。
const btn = document.getElementById('menuBtn');
const menu = document.getElementById('mainMenu');function openMenu() {btn.setAttribute('aria-expanded', 'true');menu.hidden = false;// 将焦点移动到第一个菜单项const firstItem = menu.querySelector('[role="menuitem"]');firstItem && firstItem.focus();
}function closeMenu() {btn.setAttribute('aria-expanded', 'false');menu.hidden = true;btn.focus();
}btn.addEventListener('click', () => {const isOpen = btn.getAttribute('aria-expanded') === 'true';isOpen ? closeMenu() : openMenu();
});// 简单的键盘导航：向下箭头聚焦下一个菜单项
menu.addEventListener('keydown', (e) => {if (e.key === 'Escape') { closeMenu(); }// 这里给出简化示例，完整实现可循环循环导航
});
