legend必须作为fieldset的第一个子元素，这是HTML规范强制要求而非建议；位置错位会导致屏幕阅读器跳过、重复读或完全忽略，使分组语义失效、WCAG不合规。
legend 必须作为 fieldset 的第一个子元素才能被屏幕阅读器识别
不是“建议”，而是 HTML 规范强制要求。如果把 <legend> 放在 <fieldset> 中间或末尾，比如先写 <input> 再写 <legend>，浏览器可能仍渲染文字，但可访问性树里它就“失效”了——NVDA、VoiceOver 等工具大概率跳过不读，视障用户完全感知不到这组字段的逻辑归属。
常见错误写法：
<fieldset> <input name="phone"> <legend>联系方式</legend> </fieldset>这种结构下，
legend 语义断裂，等同于没写。
- 正确顺序永远是：
<fieldset><legend>标题</legend>...表单控件...</fieldset></li> <li>动态插入时也要确保 DOM 位置正确，用 <code>insertBefore()
或直接拼接字符串时留意顺序 - React/Vue 中若用条件渲染 legend，需保证它始终是第一个子节点，别被
v-if或{condition && ...}挤到后面
没有 legend 的 fieldset 会让屏幕阅读器丢失分组上下文
一个空的 <fieldset></fieldset> 或只有 <fieldset disabled> 而无 <legend>，对辅助技术来说就是个“黑盒”。焦点进入内部 <input> 时，屏幕阅读器只会读“邮箱，编辑文本”，不会提“这是登录信息组里的邮箱”。
真实影响场景：
- 一组
type="radio"若没包裹在带legend的fieldset里，会被逐个读作“选项一”“选项二”，毫无关联性 - 表单校验报错后，用户靠键盘导航回到该区域，却无法快速定位“这是哪部分出了问题”
- 自动化测试工具（如 axe、Lighthouse）会直接标记为“
fieldset缺少legend”，可访问性得分归零
修改 legend 样式时最常踩的坑：脱离文档流导致语义与视觉脱节
很多人想让 legend 居中或上移出边框，第一反应是加 position: absolute + top: -20px。结果：文字悬空，fieldset 边框没跟着上抬，视觉割裂；更严重的是，某些旧版辅助技术会因脱离流而忽略其语义绑定。
立即学习“前端免费学习笔记（深入）”；
安全做法是：
- 给
fieldset设position: relative，再让legend绝对定位，手动控制left/transform微调 - 避免用已废弃的
align属性（如<legend align="center">），HTML5 不支持，现代浏览器直接忽略 - 真要完全脱离边框（比如标题浮在上方），改用
<h2>+<div class="form-group">，但必须补aria-labelledby关联标题 ID，否则语义链断掉
隐藏 legend 文本 ≠ 隐藏语义，display: none 是危险操作
有些设计稿要求“视觉上不要显示 legend”，但又想保留分组语义。这时用 display: none 或 visibility: hidden 都不行——前者彻底切断语义，后者虽保留但屏幕阅读器可能跳过（取决于实现）。
真正可行的方案只有两个：
- 用“视觉隐藏”技巧：比如
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;，既不可见又保语义 - 用
aria-hidden="true"+ 同时设置aria-label或aria-labelledby在父级或控件上补上下文
最容易被忽略的，是 legend 的“不可见但不可弃”属性——它可能被 CSS 压得看不见，但只要 DOM 存在且位置合法，屏幕阅读器就能读到；一旦删掉或藏错，整个分组就退化成一堆散装 input。
