aria-selected 应用于 role="tab"、role="treeitem"、role="option"、role="gridcell" 等可选集合元素，不可用于 button、div 或原生表单控件；必须与 role 和 tabindex 配合使用，并在交互时严格同步状态。
aria-selected 应该用在哪些元素上
aria-selected 是一个 ARIA 状态属性，只适用于可选中、且本身不带原生选中语义的容器类元素，比如 tab、treeitem、option（当不用 <select></select> 时）、gridcell。它不能用在 button、div 或普通链接上——除非你正在手动实现一个自定义 tablist 或列表选择器。
常见误用：
- 给
<button role="tab"></button>加aria-selected="true"✅ 合理（因为tab角色支持该状态） - 给
<div role="button"> 加 <code>aria-selected❌ 无效（button角色不支持该状态）注意：如果用了原生控件（如
<input type="radio">或<select></select>），不要手动加aria-selected—— 浏览器会自动管理aria-checked或selected属性，额外添加反而可能干扰辅助技术。如何同步 aria-selected 和视觉/行为状态
aria-selected必须和实际交互逻辑严格一致。它不是装饰属性，而是告诉屏幕阅读器“当前哪个项是被选中的”。关键点：
- 点击切换时，必须同时更新 DOM 属性和 JavaScript 状态变量
- 不要仅靠 CSS 类（如
.is-active）判断是否选中，而应以aria-selected值为准做逻辑分支 - 使用
element.getAttribute('aria-selected') === 'true'判断，而不是element.ariaSelected（后者在部分浏览器中不可靠）
示例（tab 切换）：
<div role="tablist"> <button role="tab" aria-selected="true" id="tab1">设置</button> <button role="tab" aria-selected="false" id="tab2">帮助</button> </div> <div role="tabpanel" aria-labelledby="tab1">...</div>
切换时需：
- 移除之前
tab的aria-selected="true"，设为"false" - 给新
tab设aria-selected="true" - 同时控制对应
tabpanel的hidden属性或aria-hidden
aria-selected 和 aria-checked 的区别
二者都表示“选中”，但语义和适用场景完全不同：
-
aria-selected表示“在一组可互斥或可多选的项中，该项当前被选中”，用于导航类或容器类控件（tab、treeitem、gridcell） -
aria-checked表示“该控件处于‘已勾选’状态”，专用于checkbox、radio、switch等输入类角色
混淆后果：
- 给
role="radio"用aria-selected→ 屏幕阅读器读作 “selected”，而非 “checked”，用户困惑 - 给
role="tab"用aria-checked→ 该属性对tab角色无效，会被忽略
容易被忽略的兼容性细节
aria-selected在旧版 IE 中基本不被支持；NVDA + Firefox 组合下，若未正确设置role="tablist"和aria-controls，即使有aria-selected="true"，焦点切换时也不会自动朗读“已选中”。务必检查：
- 父容器是否设置了正确的 ARIA 容器角色（如
tablist、tree、grid） - 所有可选中子项是否都有明确
role（不能只靠aria-selected拖底） - 避免在动态渲染后忘记补全
aria-selected（React/Vue 中容易漏掉 useEffect / mounted 里的同步逻辑）
真正麻烦的不是加这个属性，而是保证它在所有交互路径（键盘、鼠标、屏幕阅读器快捷键）下都实时准确。一旦不同步，辅助功能用户会彻底迷失当前在哪。
