legend是fieldset的语义心脏，必须为第一个子元素，否则屏幕阅读器无法识别分组；不可用于table（应使用caption），禁用时需手动设置legend样式，视觉隐藏须保留语义。

legend 标签不是“加个标题图个好看”，它是

的语义心脏——没有它，分组就只剩视觉框线，对屏幕阅读器来说等于哑巴。

legend 必须是 fieldset 的第一个子元素，否则语义失效

浏览器和辅助技术只认这个硬性位置。把 legend 放在 fieldset 中间或末尾，HTML 解析器会降级处理：文字可能还显示，但可访问性树里找不到上下文。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• ✅ 正确：<fieldset> <legend>收货地址</legend> <input name="addr"> </fieldset>
• ❌ 错误：<fieldset> <input name="addr"><legend>收货地址</legend> </fieldset>
• 后果：NVDA / VoiceOver 不朗读该标题，用户无法获知这组输入框属于哪个逻辑单元

legend 不能用在 table 里，caption 才是表格的合法标题

试图在 <table> 中写 <code><legend></legend>，浏览器会直接忽略或把它踢出 DOM —— 它不是 table 的合法子元素，HTML 验证通不过，也绑定不了任何语义。

• 表格标题必须用 <caption></caption>，且必须是 <table> 的第一个子元素 <li>如果真想给表格加表单分组语义（比如“订单明细”表格含多个编辑控件），得把整个 <code><table> 包进 <code><fieldset></fieldset>，再放 <legend></legend> 作为其第一个子元素
• 别用 display: none 隐藏 legend —— 这等于删掉语义；要用 visibility: hidden 或 aria-hidden="true" + 视觉隐藏类

CSS 调整 legend 位置时，别让它脱离文档流

默认渲染在 fieldset 左上角边框内侧，这是 UA 样式实现的视觉效果，不是语义本身。动它之前得清楚代价：

• 禁用 position: absolute、float、负 margin-top —— 否则键盘 Tab 顺序错乱，屏幕阅读器无法关联标题与控件
• 右对齐可用 text-align: right 或 margin-left: auto，前提是保持 DOM 位置不变、不包裹空格、不换行
• fieldset[disabled] 不影响 legend 样式，需手动设 fieldset[disabled] legend { color: #999; }，否则视觉状态与交互状态不一致

最常被忽略的点：哪怕只改一个字，比如动态切换 legend 文本为“国际快递”，也绝不能删掉它或用伪元素伪造——语义链一旦断开，对视障用户的破坏是不可逆的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！