aria-haspopup 应设为枚举值"menu"、"listbox"、"tree"、"grid"或"dialog"之一；设true/false虽不报错但违反ARIA 1.1+规范，会导致屏幕阅读器误读。

aria-haspopup 应该设成什么值才合法

aria-haspopup 不是布尔开关，它是个枚举属性，必须指定具体类型。设成 true 或 false 虽然不会报错，但不符合 ARIA 1.1+ 规范，屏幕阅读器可能忽略或误读弹出内容类型。

合法取值只有这几个："menu"、"listbox"、"tree"、"grid"、"dialog"。最常用的是 "menu"（对应传统下拉菜单）和 "dialog"（对应模态/非模态弹层）。

• 按钮触发横向导航菜单？用 aria-haspopup="menu"
• 输入框展开带搜索的下拉选项？用 aria-haspopup="listbox"（同时需配 role="listbox"）
• 点击后打开一个带表单的浮层？用 aria-haspopup="dialog"（且浮层本身应有 role="dialog" 和焦点管理）

为什么加了 aria-haspopup 还被读成“可点击”

只加 aria-haspopup 不足以让屏幕阅读器明确播报“有菜单”或“有对话框”。它只是声明“存在弹出”，但不自动绑定语义或交互行为。

必须同步满足三个条件：

立即学习“前端免费学习笔记（深入）”；

• 元素本身要有可操作语义：比如用 <button></button>，或给 <div> 加 <code>role="button" 和 tabindex="0"
• 显式标注控件与弹出内容的关系：用 aria-controls="id-of-popup" 指向弹层 ID（注意：不是 aria-labelledby）
• 弹出容器要有正确 role：如 <div role="menu"> 或 <code><div role="dialog">，否则辅助技术无法识别其类型 <p>漏掉任意一项，NVDA/JAWS 就可能只读“按钮”，不提“有菜单”。</p> <h3>aria-haspopup="menu" 和原生 <select> 的区别</select> </h3> <p><code><select></select> 是语义化原生控件，自带 aria-haspopup="listbox"（浏览器自动注入），无需手动加。强行再加 aria-haspopup="menu" 反而会覆盖默认行为，导致读屏混乱。
  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载

  自定义下拉必须手动标注，但要注意对齐真实结构：

  • 如果弹出的是扁平选项列表（无层级、无图标、可键盘上下键切换）→ 用 aria-haspopup="listbox" + role="listbox"
  • 如果弹出的是带分组、子菜单、右箭头展开项的树形结构 → 用 aria-haspopup="tree" + role="tree"
  • 如果弹出的是表格状筛选面板（行列焦点）→ 用 aria-haspopup="grid"

  拿 "menu" 硬套所有下拉，容易让盲人用户误以为支持 → 键展开子项——实际并不支持时，体验反而更差。

  常见 DOM 结构错误与修复示例

  下面这个写法看着像那么回事，但实际有问题：

  <button aria-haspopup="true">设置</button>
  <div id="popup">...</div>

  问题有三处：aria-haspopup="true" 值非法；没标 aria-controls；弹层缺 role。

  正确写法示例（菜单型）：

  <button aria-haspopup="menu" aria-controls="settings-menu">设置</button>
  <div id="settings-menu" role="menu" aria-hidden="true">
    <div role="menuitem">账号设置</div>
    <div role="menuitem">通知偏好</div>
  </div>

  注意：aria-hidden="true" 要随显示状态动态切换，不能写死；role="menuitem" 必须在 role="menu" 容器内才有效；键盘 ↓/↑ 导航逻辑得自己用 JS 实现，ARIA 不自动提供。

  最易被忽略的点：弹出层出现后，焦点必须立即移到第一个可交互项（如首个 menuitem），否则屏幕阅读器用户根本不知道菜单已打开。