复选框群组必须用 fieldset 包裹且含 legend，name 属性须一致，每个复选框需独立 for/id 绑定的 label；否则屏幕阅读器无法识别分组上下文，后端也无法正确接收数组数据。
复选框群组必须用 fieldset 包裹，不能只靠 class 或 CSS 布局
浏览器和屏幕阅读器不认样式类名，只解析语义结构。fieldset 是唯一被标准认可的逻辑分组容器。如果把多个 input[type="checkbox"] 并列写在 form 里，即使它们 name 相同、视觉上排成一组，辅助技术仍会把每个复选框当作孤立控件处理——用户听到的是“选项一，复选框，未选中”“选项二，复选框，未选中”，完全丢失“这是‘通知偏好’设置”的上下文。
常见错误包括：
• 用 div + class="checkbox-group" 替代 fieldset
• 把 legend 放在 fieldset 外面或用 h3 模拟
• 同一表单内多个复选框组共用一个 fieldset
legend 必须存在且位于 fieldset 开头，不可省略或隐藏
legend 不是装饰性标题，而是该组的语义锚点。屏幕阅读器依赖它宣告“你现在进入‘兴趣爱好’区域”，并据此建立父子关系。如果省略 legend，整个 fieldset 就退化为普通容器，失去分组效力。
注意：
• legend 必须是 fieldset 的第一个子元素
• 不能用 display: none、visibility: hidden 或 aria-hidden="true" 隐藏它（可用 clip-path 或 sr-only 类做视觉隐藏）
• 如果组名需动态渲染，确保 DOM 中真实存在该 legend 元素，而非仅靠 JS 插入文本节点
立即学习“前端免费学习笔记（深入）”；
同组复选框的 name 属性必须一致，后端才能正确接收数组
HTML 表单提交时，只有同名的复选框才会被聚合为数组。例如 name="preference[]" 或 name="preference"（现代后端通常能自动解析为数组）。如果误写成 name="preference1"、name="preference2"，后端收到的将是零散字段，无法还原多选意图。
实操要点：
• 所有同组 input[type="checkbox"] 共享同一 name 值
• 推荐使用带方括号的命名（如 name="topic[]"），兼容性更稳
• 不要为每个复选框设不同 name 再靠 JS 拼接——这绕过了原生表单机制，增加出错概率
每个复选框仍需独立 label，且必须用 for/id 显式绑定
即使有了 fieldset + legend，每个复选框仍需自己的 label。因为 legend 只提供组级上下文，而具体选项含义（如“邮件通知”“短信提醒”）必须由各自 label 说明。包裹式写法（<label><input type="checkbox">邮件通知</label>）在动态插入或复杂模板中容易失效，推荐显式绑定：
<fieldset>
<legend>通知方式</legend>
<p>
<label for="notify-email">邮件通知</label>
<input type="checkbox" id="notify-email" name="notify[]" value="email">
</p>
<p>
<label for="notify-sms">短信提醒</label>
<input type="checkbox" id="notify-sms" name="notify[]" value="sms">
</p>
</fieldset>
关键细节：
• 每个 input 必须有唯一 id
• 对应 label 的 for 值必须严格匹配该 id
• 不要用 aria-labelledby 替代 for/id 绑定——它不触发点击聚焦行为
legend 的强制存在性和 name 的一致性。开发者常以为“视觉对齐了就行”或“JS 能兜底”，但这两点一旦缺失，无障碍体验就直接断裂，且后端收不到预期数据。 
