aria-autocomplete="list"是combobox的默认安全选择，明确告知辅助技术用户只能通过点击或方向键选择列表项，输入框内容由用户完全控制，避免光标跳脱和覆盖输入等问题。
aria-autocomplete="list" 是 combobox 的默认安全选择
绝大多数自定义下拉补全场景，aria-autocomplete="list" 就够了，别碰 "both" 或 "inline"。它明确告诉辅助技术：“用户只能通过点击或方向键选列表项来设值，输入框本身不自动改内容”。这和原生 <select></select> 行为一致，也避免了光标跳脱、覆盖输入等常见冲突。
常见错误是看到“autocomplete”就直觉配 "both"——结果 JS 一监听 input 事件往里塞字符，用户刚输一半就被截断，读屏器还报“已填入 Zebra”，实际光标卡在中间。
-
"list"：只响应列表选择，输入框内容由用户完全控制，JS 只需同步更新aria-activedescendant和aria-expanded -
"both"：要求实时插入补全文本（如 Chrome 地址栏），必须手动处理光标位置、keydown拦截、input节流，且需严格区分“用户输入”和“自动补全”状态 -
"inline"：仅适用于搜索建议内联插入（如 GitHub @ 用户），不能用于表单字段——它会让屏幕阅读器朗读补全片段，但无法提交，用户会困惑“我到底选没选？”
combobox 必须配 aria-expanded 和 aria-controls
role="combobox" 单独存在毫无意义。辅助技术看到这个 role，第一反应是找两个东西：aria-expanded（当前是否展开）和 aria-controls（指向哪个列表）。缺一个，读屏器就只报“组合框”，不提示可操作、不朗读列表项、不支持方向键导航。
典型错误是写了 aria-controls="my-listbox"，但页面里根本没有 id="my-listbox" 的元素，或者该元素是 display: none 状态——此时 aria-expanded="true" 也会被忽略，因为目标不可见。
-
aria-expanded必须用布尔字符串"true"/"false"，不能写成true或1 -
aria-controls的值必须是真实存在的、可访问的 DOM ID，且该元素要带role="listbox" - 展开/收起时，必须用 JS 同步更新这两个属性，不能只改 CSS 或 class
为什么加了 role="combobox" 还是没反应？
根本原因不是没写 role，而是语义链断裂：role 声明了“这是组合框”，但没配套行为支撑。比如没给触发按钮加 aria-haspopup="listbox"，没给列表容器加 role="listbox"，没给每个选项加 role="option" —— 浏览器和读屏器直接判定“结构不完整”，静默跳过。
另一个高频坑是动态渲染：JS 插入下拉列表后，忘了调用 focus() 到第一个 role="option"，或没设 tabindex="0"。键盘用户按 ↓ 键，焦点却卡在输入框不动，读屏器也不播报任何选项。
- 所有交互元素（包括
role="option"）都得有tabindex="0"，否则键盘不可达 - 方向键切换必须用
aria-activedescendant指向当前高亮项 ID，而不是靠focus()移动焦点（否则会破坏输入框焦点） - 用
innerHTML替换整个列表后，aria-activedescendant指向的 ID 若不存在，该属性失效，必须重新赋值
原生 input + role="combobox" 不等于原生 select
哪怕你用了 <input type="text" role="combobox">，它也不会自动获得 <select></select> 的键盘行为（如 ↑/↓ 展开、Enter 确认）。所有交互逻辑都得手写：监听 keydown 处理方向键、Enter、Escape；管理焦点；同步 aria-expanded 和 aria-activedescendant。
更隐蔽的问题是状态同步：如果 JS 改了输入框 value，但忘了同步更新 aria-activedescendant 或 aria-selected（在选项上），读屏器就会读错当前选中项，视障用户完全不知道自己点了什么。
- 不要给
<input>加role="combobox"后，再套个无语义<div> 当列表——列表必须是独立可聚焦容器，带 <code>role="listbox" -
<input>本身不能有role="option"，选项必须在外部role="listbox"内，且每个选项是独立元素 - 若已有原生
<select></select>，别为了“统一风格”强行改成role="combobox"——原生 select 的无障碍支持远比手写稳定
真正难的不是写对这几个属性，而是确认：这个组件是不是非得用
div + role 实现？多数时候，问题出在设计阶段就放弃了原生语义，后面补 ARIA 只是在打补丁。
