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）
示例片段：
<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>按↑/↓时，读屏会逐条读出选项名 + “未选中/已选中” - 自定义 listbox 必须监听键盘事件，用
aria-activedescendant手动管理焦点指示器，并更新其指向的id值 - 如果选项是异步加载的，必须等 DOM 渲染完成再设
aria-expanded="true"，否则读屏可能跳过整个 listbox
真正影响提示效果的，从来不是 aria-haspopup 的值，而是 listbox 是否被正确激活、焦点是否到位、状态属性是否实时同步。漏掉其中一环，用户就只能听到“一个空的列表框”。
