legend必须是fieldset的第一个子元素，否则屏幕阅读器无法识别分组语义；DOM顺序决定可访问性绑定，任何插入、包裹或移位都会导致语义链断裂，WCAG检查直接报错。
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被忽略
怎么安全地改legend的样式
默认左上角嵌入边框的效果是 UA 样式实现的，不是语义本身。你可以调样式，但必须守住两条底线：不破坏 DOM 顺序、不隐藏可访问性。
立即学习“前端免费学习笔记（深入）”；
- 右对齐用
text-align: right或margin-left: auto，别用flex的order或justify-content - 视觉隐藏但保留语义，用标准
.visually-hidden类，别写display: none或visibility: hidden - 禁用整组时，
fieldset[disabled]才生效；legend本身不响应disabled，灰化需靠fieldset[disabled] legend { opacity: 0.6; }
动态渲染时最容易漏掉的结构断裂点
服务端模板或前端框架里，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 第一个子元素且仅含纯文本这条线——它卡在语义链最前端，错一点，整组控件的可访问性就断了。
