中legend标签_html表单分组标题的设置方式

<legend>必须作为<fieldset>的第一个子元素且仅含纯文本，否则屏幕阅读器无法正确识别分组语义，导致跳读、重复或忽略；DOM位置错位或样式误用（如display:none、order）会破坏可访问性与WCAG合规性。

<legend></legend> 必须作为 <code><fieldset></fieldset> 的第一个子元素，且只能是纯文本；缺它，分组就失去语义和可访问性支撑。

为什么 <legend></legend> 不能省略或放错位置

屏幕阅读器依赖 <legend></legend> 的 DOM 位置来宣告整组控件的用途。如果它不在 <fieldset></fieldset> 开头，或被 <h3></h3>、<div> 包裹，NVDA 或 VoiceOver 可能跳过、重复读、甚至完全忽略该分组。<ul><li>浏览器解析时，<code><legend></legend> 不在首位 → 部分辅助技术不识别为标题，WCAG 检查直接报 fieldset-missing-legend

<legend><h3>地址信息</h3></legend> → <h3></h3> 会干扰可访问名称计算，读屏器只读“地址信息”或干脆静音 用 CSS 的 order 或 position: absolute 移动 <legend></legend> → 它脱离语义流，键盘焦点顺序错乱

<legend></legend> 的样式控制要注意什么

默认渲染中，<legend></legend> 会“嵌入”边框左上角，但这个效果是浏览器 UA 样式实现的，不是语义本身。你可以改，但得守住两个底线：不破坏 DOM 顺序、不隐藏其可访问性。

• 想右对齐？用 text-align: right 或 margin-left: auto，别碰 flex 排序
• 要视觉隐藏但保留语义？用标准 sr-only 类（position: absolute; width: 1px; 等），别写 display: none 或 visibility: hidden
• 禁用整组时，<legend></legend> 不响应 disabled 属性——这是对的，它本就不该被禁用；灰掉文字颜色需靠 fieldset[disabled] legend 单独加 opacity 或 color

服务端渲染或条件分组时容易漏掉的点

模板里动态生成字段组，常因逻辑分支没覆盖完整，导致 <legend></legend> 缺失或 <fieldset></fieldset> 开闭标签不匹配。这类结构断裂在 SSR 场景下特别隐蔽。

• Vue/React 中用 v-if / conditional rendering 包裹整个 <fieldset></fieldset>，但忘了确保 <legend></legend> 总在内部最前
• 后端模板（如 Jinja2、Twig）中，{% if show_billing %} 只包了 input，没把 <legend></legend> 一起包进去 → 渲染出孤立的 <legend></legend>，HTML 验证失败
• 自动化测试（如 axe-core）会报 aria-required-parent 错误：因为 <legend></legend> 被解析为孤儿节点，而非 <fieldset></fieldset> 的合法子元素

<legend></legend> 看似简单，但它卡在语义链最前端——DOM 位置错一毫，可访问性就断一截；样式动一寸，读屏体验就偏一分。