role="option" 必须作为 role="listbox" 的直接子元素或嵌套于其子元素 role="group" 中，否则语义失效；需手动绑定交互、维护 aria-selected、实现完整键盘导航（方向键/home/end/空格/回车）并避免与原生 混用。
role="option" 必须出现在 role="listbox" 容器内
单独写 role="option" 没有意义，浏览器和读屏软件不会识别它为可选项目。它必须作为 role="listbox" 的直接子元素，或者嵌套在 role="group"（且该 group 是 listbox 的子元素）中，否则语义断裂，键盘导航（如方向键切换）和 ARIA 属性（如 aria-selected）会失效。
-
role="option"本身不触发任何交互行为，需手动绑定点击、空格/回车响应，并同步更新aria-selected - 不能用在
<select><option></option></select>内部——原生<option></option>已有内置语义，再加role="option"属于冗余甚至冲突 - 若容器是
role="combobox"，其弹出层通常用role="listbox"包裹多个role="option"，而非直接挂载在 combobox 上
aria-selected 是必需的，且要手动维护
仅写 role="option" 不代表它被选中；必须显式设置 aria-selected="true" 或 "false"。这个值不会自动同步，得靠 JS 在用户操作后更新——比如点击某个选项时，要把之前所有 aria-selected="true" 清掉，只给当前项设为 true。
- 初始状态建议显式写
aria-selected="false"，避免部分读屏器对缺失属性解读不一致 - 不要依赖 CSS 类名（如
.is-selected）代替aria-selected——辅助技术不读类名 - 若支持多选，需同时设
aria-multiselectable="true"在listbox上，并允许多个option的aria-selected="true"
键盘交互必须补全，尤其方向键和 Home/End
ARIA listbox 没有默认键盘行为。用户按 ↓ 键应移动焦点到下一个 role="option"，↑ 键回到上一个，Home 跳首项，End 跳末项——这些全得手写事件监听。
- 每个
role="option"需要有tabindex="-1"，保证能通过 JS 聚焦，但不进入自然 tab 顺序 - 首次打开下拉时，焦点应落在第一个
option上（或上次选中的项），否则键盘用户无法开始操作 - 空格键在单选场景下应触发选择（类似点击），在多选场景下应切换当前项的选中状态
role="option" 和原生
如果你用的是真实 <select></select> 元素，里面的所有 <option></option> 都不该加 role="option"。原生语义已完备，强行添加反而可能让某些读屏器重复播报或忽略状态变化。
- 自定义下拉（如 div + ul + li 实现）才需要
role="listbox"+role="option" - 若为了样式放弃
<select></select>，就彻底放弃原生语义，从头实现 ARIA 行为，别“半原生半自定义” - 测试时用 NVDA + Firefox 或 VoiceOver + Safari 真机验证，仅靠 Chrome DevTools 的 ARIA 检查器不够可靠
role 和 aria- 属性，而是把焦点管理、键盘逻辑、状态同步这三块严丝合缝地串起来——漏掉任意一环，对屏幕阅读器用户来说，整个控件就等于不存在。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
