aria-selected不可用于原生单选框，应仅用于自定义控件；原生radio必须用checked属性，自定义单选需role="radiogroup"及role="radio"配合aria-selected，并手动同步状态与焦点。

aria-selected 不能用在原生单选框上

直接给 <input type="radio"> 加 aria-selected="true" 是无效的，而且危险。原生单选框自带 checked 状态和完整的无障碍支持，aria-selected 是为自定义控件设计的语义补位，不是增强原生行为的“开关”。强行混用会导致读屏器重复播报、状态错乱，甚至跳过真实选中项。

常见错误现象：NVDA 读出“已选中”两次，或 VoiceOver 完全忽略当前选中项，只报“未选中”——往往就是 checked 和 aria-selected 同时存在且不同步。

• 原生 <input type="radio"> 必须靠 checked 属性驱动，JS 更新时只操作 .checked = true，不要碰 aria-selected
• 如果用了 CSS 自定义外观（比如隐藏原生 radio、用伪元素画圆点），仍要保留原生 input 的结构和 checked 状态，仅用 CSS 控制视觉，不干预 ARIA
• 表格化单选组（如 Likert 量表）推荐用 <table> + <code>aria-labelledby，而非试图给每个 td 加 aria-selected —— td 不在 aria-selected 支持的角色列表里

  什么时候才该用 aria-selected？

  只在你完全接管了单选逻辑、且无法使用原生 radio 的场景下：比如自定义 tab 切换、手风琴展开项、纯 div 构建的单选菜单（无 form 提交需求）。

  关键前提：父容器必须有明确的可选角色，例如 role="tablist"、role="listbox" 或 role="radiogroup"；子项必须对应设 role="tab"、role="option" 或 role="radio"。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • role="radiogroup" 容器内，每个子项设 role="radio"，再配合 aria-selected="true" —— 这是 WAI-ARIA 允许的单选语义路径
  • 必须用 JS 手动管理：点击/键盘操作后，先清空所有兄弟项的 aria-selected="true"，再给目标项设 aria-selected="true"
  • 同步焦点：设完 aria-selected 后，立刻调用 element.focus()，否则屏幕阅读器无法关联状态与焦点位置

  为什么 [aria-selected="true"] CSS 选择器容易失效？

  不是写法错了，而是属性没更新到 DOM 上。很多开发者以为加个 class 就够了，但 [aria-selected="true"] 匹配的是真实存在的 HTML 属性值，不是 CSS 类名。

  典型坑点：用 classList.add("active") 视觉高亮，却忘了 el.setAttribute("aria-selected", "true") —— 浏览器 DevTools 的“Accessibility”面板会立刻显示该属性缺失。

  • 永远用 el.getAttribute("aria-selected") 或 DevTools 的无障碍树验证，别信视觉样式
  • 禁止写成 [aria-selected] —— 它会匹配 aria-selected="false"，导致未选中项也被样式覆盖
  • React/Vue 等框架中，确保 ARIA 属性在渲染后真实写入 DOM 节点，避免 hydration 阶段丢失

  多选场景下别误用 aria-selected

  aria-selected 本身不区分单选或多选，它只是个布尔标记。真正决定是否支持多选的是父容器的 aria-multiselectable="true"。如果你有一组单选按钮，却意外设置了这个属性，读屏器会进入“多选模式”，破坏用户预期。

  常见错误：把 role="listbox" 容器同时设 aria-multiselectable="true" 和单选逻辑（比如每次只允许一个 aria-selected="true"）—— 语义矛盾，JAWS 可能拒绝播报选中态。

  • 单选组：用 role="radiogroup" 或原生 input[type="radio"]，禁用 aria-multiselectable
  • 多选组：用 role="listbox" + aria-multiselectable="true"，每个 role="option" 独立控制 aria-selected
  • 切记：aria-selected 是辅助技术同步状态的“出口”，真实选中数据必须由 JS 维护独立变量（如 selectedId），不能反向依赖它做逻辑判断

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