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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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 第一个子元素且仅含纯文本这条线——它卡在语义链最前端，错一点，整组控件的可访问性就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
