1. legend 标签的基本作用与语义定位
legend 的定义与 fieldset 的关系
本文围绕“HTML 中 legend 标签的作用与使用场景全解：表单分组的正确用法与可访问性最佳实践”这一主题展开。legend 与 fieldset 搭配使用，能够为一组控件提供一个共同的语义标签，明确该分组的用途与边界。语义定位是可访问性设计的核心，能够帮助屏幕阅读器按顺序朗读分组信息。
fieldset 是一个容器，用来对相关控件进行分组。相比于简单的并列控件，使用 legend 作为组的标题，能够让用户快速理解该组的目的，提升导航效率。
<fieldset><legend>个人信息</legend><label for="name">姓名</label><input id="name" name="name" type="text" /><label for="email">邮箱</label><input id="email" name="email" type="email" />
</fieldset>
在默认的渲染中，浏览器会把 legend 显示为一个分组的标题，紧贴 fieldset 的边框，提供直观的分组视觉线索。这种呈现对视觉用户和依赖辅助技术的用户都很有帮助。
2. 使用场景：表单分组的正确用法与可访问性相关性
何时使用 fieldset 与 legend
当你需要把一组相关控件放在一起时，应该使用 fieldset 以及其内的 legend。常见场景包括：个人信息的分组、地址信息、支付信息、偏好设置等。这样的结构能显著提升表单的可读性和导航效率，尤其是在较长的表单中。
请避免仅仅为了美观而在表单上添加边框或标题标签。可访问性要求你明确描述该分组的语义，不要把文字置于普通的 div 容器中来代替 legend，因为屏幕阅读器对分组标题的处理会比一般文本更显著。
<form action="/subscribe" method="post"><fieldset><legend>订阅选项</legend><label><input type="radio" name="plan" value="basic" /> 基本计划</label><label><input type="radio" name="plan" value="premium" /> 高级计划</label></fieldset><fieldset><legend>联系信息</legend><label>姓名</label> <input type="text" name="name"/><label>邮箱</label> <input type="email" name="email"/></fieldset>
</form>
在这两个分组中，legend 提供简单清晰的分组标题，帮助用户快速把控需要填写的字段范围。
3. 可访问性最佳实践：屏幕阅读器友好实现
为群组提供简明的描述
legend 的文本应简洁明确，概括该分组的用途。过长的描述容易打断朗读节奏，降低可用性。通常建议控制在一两句话之内，确保屏幕阅读器用户能快速理解分组的目标。
为了兼容没有渲染样式偏好的场景，可以保留原生渲染，同时提供对视觉样式的可选增强。必要时，可以使用辅助技术属性来增强可访问性，例如对某些控件使用 aria-labelledby 将分组标题与控件关联起来。
<fieldset aria-labelledby="grp1-legend"><legend id="grp1-legend">联系方式</legend><label for="phone">电话</label> <input id="phone" type="tel" /><label for="wechat">微信</label> <input id="wechat" type="text" />
</fieldset>
当需要隐藏视觉文本时，可以将 legend 以屏幕可见的方式隐藏，同时保持对辅助技术的可访问性，例如：
/* 可视上隐藏 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;
}此类做法需要谨慎使用，确保仍然存在可访问的分组标签，不至于让辅助技术难以理解表单结构。
4. 兼容性与样式注意：跨浏览器的呈现
浏览器渲染差异与样式控制
不同浏览器对 fieldset 与 legend 的渲染存在轻微差异，导致同一表单在外观上略有不同。为确保一致性，推荐在外部样式表中显式设置边框、内边距和字体样式，而不是完全依赖浏览器默认。CSS 可以控制字段集的边框与 legend 的字体，但需要小心兼容性。
一个常用的做法是为 fieldset 设置统一的边框与内边距，并给 legend 设置字体样式，例如加粗或稍大字体，以提高可读性。特别是在响应式布局中，适当的缩放和换行策略能保持分组标签的清晰。
fieldset {border: 1px solid #ccc;padding: 1rem;border-radius: 6px;
}
legend {font-weight: 700;padding: 0 0.25rem;
}
5. 典型代码示例：从基础到进阶实现
基础示例
以下是最简单的字段分组示例，展示 fieldset 与 legend 的基础用法。它用于把个人信息中的姓名和邮箱等输入控件集中描述。
<form><fieldset><legend>个人信息</legend><label for="name">姓名</label><input id="name" name="name" type="text" /><label for="email">邮箱</label><input id="email" name="email" type="email" /></fieldset>
</form>
通过此结构，legend 成为分组的语义标记，帮助用户快速理解该组控件的用途。
进阶示例：嵌套分组与 aria-labelledby
在复杂表单中，可能需要嵌套分组或使用 aria-labelledby 将控件与分组标题进行明确关联。这种方式可以在自定义控件与重构布局时，保持可访问性不下降。
<form><fieldset aria-labelledby="billing-legend"><legend id="billing-legend">账单信息</legend><fieldset aria-labelledby="card-legend"><legend id="card-legend">信用卡信息</legend><label for="cc">卡号</label><input id="cc" type="text" /><label for="cvv">CVV</label><input id="cvv" type="password" /></fieldset><label for="billing-address">账单地址</label><input id="billing-address" type="text" /></fieldset>
</form>
