单选按钮组无障碍核心是语义完整：必须用完全一致的name（全小写、短横线分隔）统一分组，每个选项配唯一id+显式label[for]关联，多维量表用table+aria-labelledby，checked须html属性写死。

单选按钮组的无障碍问题，核心不在“能不能点”，而在于“屏幕阅读器能不能说清楚、键盘用户能不能高效操作”。光靠 CSS Grid 或 flex 布局对齐，会直接切断语义链路——这是绝大多数人踩坑的起点。

必须用 name 统一分组，且大小写/空格零容错

浏览器只认 name 属性完全一致（字节级相同）的一组 input[type="radio"] 为互斥组。漏写、拼错、大小写混用（比如 q1 和 Q1），都会让某个按钮变成“幽灵单选”：能点、不取消别人、读屏报成复选框。

• 所有同组项的 name 必须全小写、短横线分隔，例如 user-preference
• 服务端渲染或模板循环中，避免用变量拼接 name，尤其注意作用域污染导致值为空或错乱
• 快速验证：在控制台运行 document.querySelectorAll('input[type="radio"][name="user-preference"]').length，结果应等于你预期的选项数

每个单选按钮都要有独立 id + 显式 label[for] 关联

仅靠包裹式 <label><input>文本</label> 在多选项场景下不可靠——屏幕阅读器无法区分“男”和“女”各自对应哪个控件，尤其当它们被拆到不同容器里时。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 正确写法是为每个 input 分配唯一 id（如 gender-m、gender-f），再用 label[for] 显式绑定
• for 和 id 必须字节级一致，大小写、连字符、顺序都不能差
• SSR 或 Vue/React 循环渲染时，id 必须带唯一标识（如 gender-m-{{uid}}），否则所有 for 都指向第一个元素

网格类评分表必须用 <table> + <code>aria-labelledby

像 Likert 量表这种「多问题 × 同一选项集」的布局，CSS Grid 只解决视觉对齐，却让屏幕阅读器丢失“第2行第4列 = 问题2，得分为+1”这一关键上下文。

• 用 <table> 是语义正解：<code><th scope="row"> 表示问题，<code><th scope="col" id="plus1"> 表示选项值 <li>每个 <code>input 的 aria-labelledby 同时引用行头 id 和列头 id，例如 aria-labelledby="q2 plus1"
• 避免用 aria-label 硬编码文本，它会覆盖原生标签，且无法随语言/上下文动态更新

checked 属性必须作为 HTML attribute 写死，不能靠 JS 动态赋值

用 document.getElementById('r1').checked = true 设置默认选中，视觉上有效，但会破坏无障碍树：屏幕阅读器看不到初始选中状态，:checked 伪类也不触发，aria-checked 更不会同步。

• 静态页或 SSR 输出中，必须显式写出 checked 属性：<input type="radio" name="theme" value="dark" checked>
• React 中用 defaultChecked，Vue 中用 v-model 绑定初始值，而非 :checked="true"
• 后续切换逻辑，应通过修改同组其他项的 checked 属性（removeAttribute('checked')）来模拟，而不是只动一个

真正卡住人的从来不是语法怎么写，而是 name 是否全局一致、id 是否在动态渲染中保持唯一、aria-labelledby 引用的是否是真实存在的 id 节点——这些地方一出错，无障碍就断在第一层。

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