aria-haspopup="listbox" 告诉屏幕阅读器“该元素点击后将弹出一个列表框”，但不包含选项数、选中项或展开状态；必须搭配role="combobox"、aria-expanded、aria-controls及role="listbox"/role="option"等完整语义链才能实现正确提示。

aria-haspopup="listbox" 的语义到底告诉屏幕阅读器什么

这个属性值本身只声明“点击/聚焦后会弹出一个 listbox 类型的菜单”，但不包含任何关于选项数量、当前选中项、是否已展开等信息。屏幕阅读器（如 NVDA、VoiceOver）听到的通常是类似“下拉列表，已折叠”或“选择框，未展开”，具体措辞取决于浏览器+读屏组合，但绝不会自动读出选项内容或提示“按方向键浏览”。

• aria-haspopup="listbox" 必须搭配 role="combobox" 或 role="select" 使用才合理，单独设在按钮上容易误导
• 它不替代 aria-expanded —— 必须显式同步控制该属性的 true/false 值，否则读屏无法感知开闭状态
• 不会触发自动朗读选项列表，用户必须手动操作（如按 ↓ 键）才能进入 listbox 流程

listbox 场景下真正起提示作用的是哪些属性

盲人用户依赖的是 listbox 容器本身的可访问性结构，而非 aria-haspopup。关键在以下三点：

• role="listbox" 容器必须有 aria-labelledby 或 aria-label，明确说明用途，例如 aria-label="请选择城市"
• 每个选项用 role="option"，且带 aria-selected="true" 标记当前选中项（否则读屏不告知“已选中”）
• 容器需有 tabindex="-1"，并确保键盘焦点能正确落入 listbox 内部（靠 JS 管理，不是仅靠 HTML）

示例片段：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

<div role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="city-list">
  <input type="text" aria-autocomplete="list" aria-controls="city-list">
</div>
<div id="city-list" role="listbox" aria-labelledby="city-label">
  <div role="option" aria-selected="false">北京</div>
  <div role="option" aria-selected="true">上海</div>
</div>

为什么设成 listbox 却没提示“按方向键选择”，常见原因

这不是配置遗漏，而是交互流程没走完。listbox 的键盘导航提示（如 VoiceOver 说“上下键选择”）只在焦点真正进入 listbox 后触发。以下情况会阻断提示：

• aria-expanded="true" 设了，但 listbox 容器不可聚焦（缺少 tabindex="-1" 或被 display: none 隐藏）
• 用户用鼠标点击展开，但焦点仍停留在触发按钮上，没自动移入 listbox（需 JS 调用 focus()）
• listbox 内部 role="option" 元素没设 tabindex="-1"，导致键盘无法进入选项流
• 浏览器 bug：Chrome + NVDA 对动态插入的 listbox 有时延迟识别，需加 aria-live="polite" 包裹变化区域

aria-haspopup="listbox" 和原生 的提示差异

原生 <select></select> 自带完整可访问性支持：展开时自动朗读选项数、当前选中项、方向键提示。而 aria-haspopup="listbox" 是手动实现的模拟组件，所有提示逻辑都得自己补全：

• 原生 <select></select> 按 ↑/↓ 时，读屏会逐条读出选项名 + “未选中/已选中”
• 自定义 listbox 必须监听键盘事件，用 aria-activedescendant 手动管理焦点指示器，并更新其指向的 id 值
• 如果选项是异步加载的，必须等 DOM 渲染完成再设 aria-expanded="true"，否则读屏可能跳过整个 listbox

真正影响提示效果的，从来不是 aria-haspopup 的值，而是 listbox 是否被正确激活、焦点是否到位、状态属性是否实时同步。漏掉其中一环，用户就只能听到“一个空的列表框”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！