aria-haspopup="menu"本身不触发屏幕阅读器自动播报“有菜单”，必须配合role="button"、aria-expanded、tabindex及正确的菜单结构（role="menu"/"menuitem"、aria-labelledby）才能实现可靠提示。

aria-haspopup="menu" 本身不触发屏幕阅读器自动播报“有菜单”

很多开发者以为设了 aria-haspopup="menu"，屏幕阅读器就会主动说“此按钮有下拉菜单”，实际不会。它只是声明“可展开一个 menu 类型的弹出内容”，是否播报、如何播报，取决于元素角色（role）、状态（aria-expanded）和上下文语义是否完整。

必须配合 role="button" 和 aria-expanded 才能可靠提示

单纯给 <div> 或 <code><span></span> 加 aria-haspopup="menu" 是无效的——屏幕阅读器无法识别其可交互性。正确做法是：

• 用 role="button" 显式声明该元素是按钮（哪怕它不是 <button></button>）
• 同步维护 aria-expanded="true" 或 "false"，反映当前展开状态
• 确保有可见焦点样式，支持键盘 Tab 进入和 Enter/Space 触发

示例：

<div role="button" aria-haspopup="menu" aria-expanded="false" tabindex="0">
  更多操作
</div>

菜单容器必须用 role="menu" + aria-labelledby 关联

弹出的菜单本身也要符合 ARIA 菜单模式，否则屏幕阅读器进不去或读错结构：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 菜单根元素设 role="menu"
• 每个菜单项用 role="menuitem"
• 菜单需通过 aria-labelledby 指向触发按钮的 ID，建立语义关联
• 菜单默认隐藏（display: none 或 visibility: hidden），展开时才显示

否则即使按钮提示了“有菜单”，用户按 Enter 后焦点进不去、读不出选项，等于没提示。

别依赖 aria-haspopup 单独工作，它只是协议的一部分

aria-haspopup 是个“声明”，不是“指令”。它不控制行为，也不保证播报。真正起作用的是整套组合：

• 触发器：具备交互语义（role="button" + tabindex + aria-expanded）
• 菜单体：正确角色（role="menu"）、层级（menuitem）、关联（aria-labelledby）
• 状态同步：JavaScript 必须实时更新 aria-expanded 和菜单显隐

漏掉任意一环，视障用户就可能卡在“知道有菜单”但“打不开/读不到/没法选”的状态里——这比完全没有提示更糟。