利用checked表单属性构建无障碍可访问的单选按钮组件-html教程-PHP中文网

checked 属性必须作为 html 属性在初始 dom 中存在，而非 js 动态赋值，否则破坏屏幕阅读器识别、aria-checked 同步及 :checked 伪类映射；name 必须完全一致以保障单选互斥；id/for 显式关联 label 提升可访问性；value 必须非空且语义明确。

利用checked表单属性构建无障碍可访问的单选按钮组件

为什么 `checked` 属性不能靠 JS 动态赋值来控制选中状态

很多开发者习惯用 document.getElementById('radio1').checked = true 来“设为选中”，这在视觉上确实生效，但会绕过浏览器对表单控件的原生可访问性管理。屏幕阅读器（如 NVDA、VoiceOver）依赖 DOM 中 checked 属性的**初始存在与否**来判断默认选中项；后续 JS 修改 checked 属性值（布尔）不会触发 aria-checked 同步更新，也不影响 :checked 伪类在无障碍树中的映射。

真正可靠的做法是：让 checked 作为 HTML 属性（attribute）出现在初始 DOM 中 —— 即写成 <input type="radio" name="theme" value="dark" checked>，而不是靠 JS 补上。

服务端渲染或静态 HTML 必须显式写出 checked 属性，不能留空
React/Vue 等框架中，要用 defaultChecked（React）或 v-model + 初始值（Vue）而非 checked={true}，否则会变成受控组件并切断无障碍链路
动态切换时，应通过改变 name 组内其他 input 的 checked 属性（用 setAttribute('checked', '') 或移除）来模拟，而不是只操作一个

`name` 属性缺失会导致单选组完全失效

单选按钮的“互斥”行为不是靠 JS 实现的，而是浏览器原生根据 name 相同的一组 input[type="radio"] 自动管理。一旦某个按钮漏写 name，或大小写不一致（如 theme vs Theme），它就脱离了该组，变成独立可选的“幽灵按钮”——用户能点它，但它不取消同组其他项，屏幕阅读器也会把它读作普通复选框（因为缺少分组上下文）。

MarsCode

MarsCode 是一款带有 AI 编程助手和云开发环境的 AI IDE 工具。

下载

所有同组单选按钮必须共用**完全相同拼写的 name 值**，建议全小写、无空格、用短横线分隔（如 user-preference）
避免用变量拼接 name，尤其在循环渲染时容易因作用域出错（例如 Vue 的 v-for 中未绑定正确 scope）
可以用 document.querySelectorAll('input[type="radio"][name="theme"]') 快速验证是否全部命中

没有 `id` + `for` 关联的 `<label></label>` 会让点击区域和语义双双丢失

仅靠包裹式 <label><input>...</label> 虽然能点击触发，但对屏幕阅读器不够友好：它可能无法准确将标签文本与具体某个单选按钮关联，尤其当一组按钮渲染在不同容器里时。显式用 id 和 for 绑定才是最稳妥的。

错误写法：<label><input type="radio" name="size" value="m"> Medium</label>
正确写法：<input type="radio" id="size-m" name="size" value="m"><label for="size-m">Medium</label>

id 值必须唯一，且只能包含字母、数字、短横线、下划线，不能以数字开头
for 的值必须与对应 input 的 id 完全一致（区分大小写）
不要为了“省事”给多个 input 设同一个 id，这会破坏整个页面的无障碍结构

忽略 `value` 或设为空字符串会让提交数据不可用

表单提交时，单选按钮只发送被选中项的 value 值。如果忘了写 value，或者写成 value=""，后端收到的就是空值或 undefined —— 这不是 UI 问题，是数据完整性漏洞。更隐蔽的是：某些前端库（如 Formik）在初始化时若发现 value 缺失，会静默 fallback 到 "on"，导致前后端约定错乱。

每个 input[type="radio"] 都必须有明确、非空、语义清晰的 value（如 value="dark"，而非 value="1"）
避免用中文或含空格的字符串作 value，URL 编码和后端解析都易出错
如果选项逻辑上需要“无选择”，应额外提供一个 <input value=""> 并配相应文案（如“暂不选择”），而不是靠 JS 清空