<legend>必须直接嵌套在<fieldset>内且为首个子元素，否则语义失效、屏幕阅读器不朗读、tabindex错乱；不可为空、不宜过长、禁用display:none隐藏，更新内容应避免innerHTML直接替换。
为什么 <legend> 必须直接嵌套在 <fieldset> 里
因为浏览器和辅助技术（如屏幕阅读器）只认这种严格嵌套结构：<fieldset> 的第一个子元素要是 <legend>，否则语义就断了。不是“建议放”，是“不放就失效”——表单分组标题不会被朗读，tabindex 逻辑也会错乱。
常见错误现象：
-
<legend>被包在<div>或<p>里 - 用
<h3>替代<legend>，以为视觉效果一样就行 -
<legend>放在<fieldset>外面，靠 CSS 定位“看起来”挨着
<legend> 的内容必须可访问、不可空、不宜过长
空的 <legend>（比如 <legend></legend>）等于没写；纯图标（<legend><svg>...</svg></legend>）对屏幕阅读器不友好；超过一行的文字会让某些旧版浏览器渲染错位。
实操建议：
- 用简明动词短语，比如
<legend>登录凭证</legend>，别写“请输入您的用户名和密码以完成身份验证” - 需要图标时加
aria-label或隐藏文本，例如：<legend><span aria-hidden="true">?</span>安全设置</legend> - 避免在
<legend>里塞<input>或交互控件——它只负责说明，不负责操作
样式控制要小心：不要用 display: none 或 visibility: hidden 隐藏 <legend>
这两者都会让屏幕阅读器彻底忽略 <legend>，导致分组语义丢失。想“视觉隐藏但保留可访问性”，得用专门的辅助技术隐藏类：
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
然后这样用：<legend class="visually-hidden">地址信息</legend>。注意：这不是为了“隐藏标题”，而是极少数场景下（比如已有视觉标题）做冗余规避，正常情况不该隐藏。
与 JavaScript 交互时，别用 innerHTML 动态替换 <legend>
直接改 <legend> 的 innerHTML 可能触发某些浏览器的重绘 bug，尤其在 Safari 和旧 Edge 中，会导致 <fieldset> 边框错位或焦点环异常。
更稳妥的做法：
- 用
textContent更新纯文本内容 - 如果真要插 HTML，先移除旧
<legend>，再用appendChild()插入新节点 - 更新后手动调用
legend.focus()（如果业务需要焦点跟随）
复杂点在于：很多人以为 <legend> 就是个装饰标签，其实它是表单可访问性的关键支点——漏掉它，整个 <fieldset> 分组在无障碍链路里就断了。
