fieldset必须配legend且legend必须是第一个子元素，否则语义断裂；浏览器和辅助技术只识别fieldset开头紧接legend的结构，任何插入、包裹或移位（如被div、p或h3包裹）均导致wcag报错、屏幕阅读器忽略整组。
fieldset 必须配 legend，且 legend 必须是第一个子元素——否则语义断裂，屏幕阅读器直接忽略整组，后端也收不到数组。
为什么 fieldset 里 legend 放错位置就失效
浏览器和辅助技术（如 NVDA、VoiceOver）只认一种结构：fieldset 开头紧跟着 legend。任何中间插入、包裹或移位，都会让整组失去“分组”含义。
-
<fieldset><div><legend>地址</legend></div></fieldset>→legend不再是直接子元素，WCAG 检查报fieldset-missing-legend -
<legend><h3>地址</h3></legend>→h3干扰可访问名称计算，读屏器可能跳过 -
<fieldset> <p>说明文字</p> <legend>地址</legend> </fieldset>→p占了第一个位置，legend被完全忽略
怎么让 fieldset 内部控件对齐更干净
默认 fieldset 的 padding 和子元素的 margin 容易错位，尤其混用 input、select、textarea 时。
- 统一设
fieldset > * { margin-bottom: 0.5rem; }，比依赖各控件自身margin更可控 - 避免在
fieldset上设line-height或font-size，这些会干扰legend的垂直居中计算 - 如果用了 CSS Grid 布局，
fieldset可设display: contents;—— 但注意：这会让legend脱离语义结构，屏幕阅读器可能跳过；仅限纯视觉优化场景 - IE 不支持
display: contents，降级方案是用div模拟分组 +aria-labelledby补充语义
legend 文字换行后位置错乱怎么修
legend 默认是 inline 元素，文字一换行，浏览器容易把它“挤”到左边或顶部，尤其在设置了 width 或 text-align 后。
- 强制
legend { display: block; width: fit-content; margin: 0 auto; }是最稳的组合 - 别用
text-align: center配合legend，它只对inline内容生效；中心对齐实际靠的是块级容器的margin自动分配 - 要左对齐且带缩进，用
margin-left: 1rem;，别用padding-left，后者会影响legend在fieldset上边框中的锚点位置
动态渲染时最容易漏掉的结构断裂点
服务端模板或前端框架里，legend 极易因条件分支没覆盖全而缺失——HTML 验证器难发现，但 axe-core 会立刻报 aria-required-parent 错误。
- Vue/React 中用
v-if或{show && }包整个fieldset，但忘了确保legend总在内部最前 - Jinja2/Twig 模板中，
{% if show_billing %}只包了input，没把legend一起包进去 → 渲染出孤立legend节点 - 模板里漏写一次，后续所有
legend都被解析为孤儿节点
真正难的不是手写一次正确结构，而是每次动态生成都守住 legend 必须是 fieldset 第一个子元素且仅含纯文本这条线——它卡在语义链最前端，错一点，整组控件的可访问性就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
