legend必须是fieldset首个子元素，否则屏幕阅读器无法识别分组语义；它不可隐藏或错位，且fieldset内须含可聚焦控件才能激活逻辑分组功能。
legend 标签不是“加个标题”那么简单——它直接决定屏幕阅读器能否把一组控件识别为一个逻辑单元。没它，或放错位置，辅助技术就只能线性读字段，用户根本分不清哪几个是“收货地址”，哪几个是“发票信息”。
legend 必须是 fieldset 的第一个子元素
这不是建议，是 HTML 规范强制要求。只要中间插了空格、注释、<div> 或其他节点，NVDA/VoiceOver 就大概率跳过 <code>legend，语义链断裂。
- 正确写法：
<fieldset> <legend>支付方式</legend> <input type="radio" name="pay"> </fieldset> - 错误写法：
<fieldset> <input type="text"><legend>支付方式</legend> </fieldset>（legend在input后面） - 动态渲染时（React/Vue），避免用
{condition && <legend>...</legend>}把它挤到非首位；改用条件包裹整个fieldset，或确保legend恒为首个子节点
隐藏 legend 文本 ≠ 隐藏语义
有些设计要求视觉上“不显示标题”，但又想保留分组上下文。这时候用 display: none 或 visibility: hidden 是危险操作——它会彻底切断语义绑定。
- 安全做法：用
position: absolute; clip: rect(1px, 1px, 1px, 1px);把文字移出视口，同时保留在可访问性树中 - 别用
<legend align="center"></legend>—— HTML5 已废弃该属性，现代浏览器直接忽略 - 真要完全脱离边框（比如浮在上方的标题），改用
<h2 id="addr">收货地址</h2> <div class="form-group" aria-labelledby="addr">...</div>，否则语义链断掉
fieldset 内必须有可聚焦控件才能激活语义
只包 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/js/8068" title="jQuery可视化表单拖拽编辑代码"><img
src="https://img.php.cn/upload/jscode/000/000/001/170920620397078.jpg" alt="jQuery可视化表单拖拽编辑代码" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/js/8068" title="jQuery可视化表单拖拽编辑代码" class="overflowclass">jQuery可视化表单拖拽编辑代码</a>
<p class="overflowclass">jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单。</p>
</div>
<a rel="nofollow" href="/xiazai/js/8068" title="jQuery可视化表单拖拽编辑代码" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<span></span> 或纯文本的 fieldset，浏览器可能忽略其分组作用，甚至不渲染边框。辅助技术也感知不到这是个“表单组”。
- 有效子元素包括：
<input>、<select></select>、<textarea></textarea>、<button></button>、<input type="radio">等可交互控件 - 错误示例：
<fieldset> <legend>说明</legend> <p>仅作提示</p> </fieldset>—— 这组对读屏器来说基本无效 - 如果只是展示说明，直接用
<div> + CSS 更稳妥 <h3>禁用整组时，legend 自身不会变灰但语义仍生效</h3> <p>给 <code>fieldset加disabled属性，能一键禁用所有直属表单控件，并从提交中排除——这是原生行为，比 JS 手动遍历可靠得多。但要注意legend本身不受影响。-
legend文字颜色可能因继承 CSS 变浅，建议显式重置：fieldset[disabled] legend { opacity: 0.7; } -
<input type="hidden">不受fieldset disabled影响，仍会提交（规范行为，不是 bug） - 别用
fieldset[disabled] input { opacity: 0.5; }模拟禁用态——原生disabled已处理焦点、交互、提交逻辑，手动覆盖反而破坏可访问性
最常被忽略的点是：即使视觉上你把
legend移出了边框、调了透明度、甚至用 JS 动态插入，只要 DOM 顺序错、或内部没可聚焦控件，它就只是个普通文字，不是“分组标题”。语义有效性不看样式，只看结构和内容。 -
