fieldset 和 legend 是唯一同时满足语义分组、可访问性命名、原生批量禁用的 html 原生机制；div 等替代方案无法完整支持键盘导航、屏幕阅读器播报和提交排除。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
fieldset 和 legend 是唯一能同时满足语义分组、可访问性命名、原生批量禁用三件事的 HTML 原生机制；其他方案（比如用 div + aria-labelledby）只能模拟其中一两项，且在键盘导航、屏幕阅读器播报、提交排除等关键环节会失效。
为什么不用 div 包裹表单分组
常见错误是把“收货地址”“账单地址”两组控件都塞进 <div class="section"> 里，再加个 <code><h3></h3> 当标题。问题在于：
• 屏幕阅读器无法将该 <h3></h3> 绑定为整组控件的可访问名称
• Tab 键不会自动跳过整组（哪怕你加了 tabindex="-1"）
• 没法用 fieldset[disabled] 真实禁用所有子控件并排除提交
• 搜索引擎和辅助工具可能报错 “missing landmark” 或 “ambiguous grouping”
legend 必须是 fieldset 的第一个子元素且不可包裹
这是最常被破坏的语义链。
• 错误写法：<fieldset>
<div><legend>地址</legend></div>
<input name="city">
</fieldset> → legend 被忽略，NVDA/VoiceOver 完全不播报组名
• 错误写法：<fieldset>
<input name="zip"><legend>地址</legend>
</fieldset> → Safari 旧版本可能跳过 legend
• 正确写法：<fieldset>
<legend>收货地址</legend>
<input name="city">
</fieldset>
• legend 内容必须是纯文本，不能含 <span></span>、<strong></strong> 或空格占位符（如 ）
fieldset[disabled] 的生效范围只限直属子控件
这个限制直接影响禁用逻辑是否可靠。
• 有效：<fieldset disabled>
<input name="phone"><select name="country"></select>
</fieldset> → 两个控件都被禁用、不提交、focus() 失败
• 无效：<fieldset disabled><div><input name="phone"></div></fieldset> → input 不受影响，仍可聚焦、提交
• IE11 对 <button></button> 在 fieldset[disabled] 下兼容性差，建议额外加 style="pointer-events: none;" 保底
• 禁用后，整组在 FormData 中自动被排除，无需手动过滤
多组 fieldset 应平级排列，不要嵌套
注册页、多步骤表单、保险报价等场景，天然适合按用户心智模型拆分成多个平行 fieldset。
• 正确：<form>
<fieldset><legend>身份信息</legend></fieldset>
<fieldset><legend>联系方式</legend></fieldset>
</form>
• 错误：<fieldset>
<legend>主信息</legend>
<fieldset><legend>紧急联系人</legend></fieldset>
</fieldset> → 嵌套破坏语义层级，部分辅助技术无法识别内层 legend
• 删除默认边框和内边距后，必须手动补视觉线索（如背景色、分割线、间距），否则用户完全看不出哪块是一组
• 每个 fieldset 都应有明确、简短、动词导向的 legend（例如 “设置密码”，而非 “密码相关”）
fieldset，而是让每个 legend 成为屏幕阅读器用户能直接跳转、能记住、能依赖的锚点——这要求它位置绝对正确、内容绝对干净、上下文绝对独立。
