legend必须是fieldset的第一个子元素，专用于语义化表单分组，影响无障碍访问、键盘导航及浏览器渲染；脱离此结构将破坏可访问性链路。
legend 不是“标题定位工具”，它是 fieldset 的语义标题节点，位置由 HTML 规范强制锁定——必须是 fieldset 的第一个子元素，任何试图“定位”它的 CSS 操作都可能破坏可访问性链路。
legend 必须紧贴 fieldset 开头，不能靠 CSS 移动
浏览器默认把 legend 渲染在 fieldset 左上角边框内，这是 UA 样式实现的视觉效果，不是语义本身。你不能用 position: absolute、flex 排序或 float 把它“拖到右边”或“居中”，否则：
- 键盘 Tab 顺序错乱：焦点不会自然落到
legend上，点击它也不会聚焦第一个表单控件 - 屏幕阅读器（NVDA / VoiceOver）无法将其绑定为整组可访问名称，可能静音或跳读
- 旧版 Safari 对脱离默认流的
legend渲染异常，文字被裁切或消失
右对齐可用 text-align: right 或 margin-left: auto，但前提是保持其 DOM 位置不变、不包裹、不含空格或换行符。
fieldset disabled 时 legend 不自动变灰，需手动处理
fieldset[disabled] 会禁用所有直属子控件（input、select、button），但 legend 本身不受影响——它不响应 disabled 属性，这是规范行为，不是 bug。
常见错误是只写 fieldset[disabled] { opacity: 0.5; }，结果 legend 灰了，但内部控件仍可交互；或反过来，只禁用控件却忘了同步视觉状态。
正确做法：
- 显式重置
legend颜色：fieldset[disabled] legend { color: #999; } - 避免用
opacity全局降级，它会让整个fieldset内容不可点击但语义未禁用 -
input[type="hidden"]始终提交，不受fieldset[disabled]影响，这点常被忽略
用 ::before 伪造 legend 标题？风险远大于收益
有人用 fieldset::before + position: absolute 替代真实 legend，理由是“更自由定位”。这等于主动放弃语义和可访问性：
- 屏幕阅读器完全无视
::before伪元素内容，整组失去可访问标题 - HTML 验证失败：
fieldset缺失legend直接触发fieldset-missing-legend错误 - axe-core 等自动化检测工具立刻报
aria-required-parent
如果真需要复杂视觉布局（比如标题悬浮、带图标、多行排版），应改用 section + aria-labelledby + h2，而非硬套 fieldset。
真正难的不是让 legend “看起来在哪儿”，而是让它始终在 DOM 里待对地方——它卡在语义链最前端，错一个字符、多一个空格、少一个换行，整组控件的可访问性就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
