单选按钮旁的说明文字必须用包裹或for属性显式关联，不可仅靠等纯视觉元素；包裹式更简洁可靠，显式绑定需确保id与for字节级一致，补充提示宜用aria-describedby指向可见DOM元素。
单选按钮旁的说明文字怎么加才不会断开语义
直接在 <input type="radio"> 后面写文字，浏览器能显示，但屏幕阅读器可能无法把文字和按钮正确关联——这不是“可访问”的做法。真正可靠的方式是用 <label></label> 包裹整个选项，或用 for 属性显式绑定。
两种写法：包裹式 vs 显式绑定式
推荐优先用包裹式，简洁且不易出错；显式绑定适合 label 和 input 在 DOM 中相隔较远的场景（比如表格布局）。
- 包裹式：
<label><input type="radio" name="theme" value="dark"> 深色模式（省电，适合夜间）</label>
- 显式绑定式：
<input type="radio" id="theme-light" name="theme" value="light"><label for="theme-light">浅色模式（默认，高对比度）</label>
注意：显式绑定时 id 和 for 值必须完全一致，大小写、空格、连字符都不能错。
为什么不能只靠 CSS 或 span 模拟说明文字
纯视觉处理（比如给 <span></span> 加样式）会让辅助技术“看不见”这段说明，导致视障用户只听到“单选按钮”，却不知道它代表什么含义。W3C WCAG 明确要求每个表单控件必须有可编程确定的标签（programmatically associated label）。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<input type="radio" name="size"><span>大号（适合 180cm+）</span>
- 后果：VoiceOver、NVDA 等读屏软件不会将
span内容作为该按钮的说明朗读 - 修复方式：必须通过
<label></label>关联，哪怕只是加个空aria-label也不如原生<label></label>可靠
需要额外提示时用 aria-describedby
如果说明文字较长，或属于补充性提示（比如“选择后不可更改”），不要塞进 <label></label> 主文本里干扰主语义，而是用 aria-describedby 指向一个独立元素：
<input type="radio" id="confirm-delete" name="action" value="delete" aria-describedby="delete-hint"><label for="confirm-delete">永久删除</label><div id="delete-hint" class="hint">此操作无法撤销，请提前备份</div>
这样主 label 保持简洁，补充说明只在用户聚焦该按钮时由读屏软件追加朗读，且不影响视觉布局灵活性。
容易忽略的是：被 aria-describedby 引用的元素必须存在于 DOM 中且未被 display: none 或 aria-hidden="true" 隐藏，否则读屏软件会跳过它。
