单个复选框标签关联合规问题咨询及fieldset方案可行性确认

问题根源 #

你页面里顶部的 <label class="control-label">Privacy policy</label> 是个孤立标签，没有通过for属性绑定到任何表单控件，辅助技术会将其识别为无关联的无效标签，导致依赖辅助技术的用户无法明确它对应哪个控件，这就触发了WCAG 2.1 2.4.6的合规问题。

解决方案 #

方案1：移除冗余标签（最简洁）

顶部的“Privacy policy”标签属于冗余内容——下方复选框已经有了关联的label，且内容明确说明了“同意隐私政策”的用途，直接删除这个孤立标签即可：

<div class="form-group privacy-policy">
    <span class="text-muted small required"><span aria-hidden="true">*</span>Required</span>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="1" name="privacy-policy" id="privacy-policy-10805">
        <label for="privacy-policy-10805">I agree to the <a href="/privacy-statement" target="_blank">privacy policy</a></label>
    </div>
</div>

方案2：将孤立标签改为标题（保留视觉结构）

如果视觉上必须保留“Privacy policy”的标题展示，不要用label标签，改成适配页面层级的标题标签（比如<h4>），既维持原有布局，又不会干扰辅助技术对控件标签的识别：

<div class="form-group privacy-policy">
    <h4 class="control-label">Privacy policy</h4>
    <span class="text-muted small required"><span aria-hidden="true">*</span>Required</span>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="1" name="privacy-policy" id="privacy-policy-10805">
        <label for="privacy-policy-10805">I agree to the <a href="/privacy-statement" target="_blank">privacy policy</a></label>
    </div>
</div>

方案3：使用fieldset/legend（你的修改方案，可行但语义稍冗余）

你把外层div改成<fieldset>、孤立label改成<legend>的做法是符合WCAG规范的——<legend>会作为<fieldset>内控件的组标签，辅助技术会将组标签与控件的关联标签结合读取。不过<fieldset>原本是为多个相关控件分组设计的，单个控件使用它虽然合规，但语义上略显冗余，若你的框架或布局要求必须这么用，完全可以采用：

<fieldset class="form-group privacy-policy">
    <legend class="control-label">Privacy policy</legend>
    <span class="text-muted small required"><span aria-hidden="true">*</span>Required</span>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="1" name="privacy-policy" id="privacy-policy-10805">
        <label for="privacy-policy-10805">I agree to the <a href="/privacy-statement" target="_blank">privacy policy</a></label>
    </div>
</fieldset>

推荐方案 #

优先选择方案1或方案2，既能解决合规问题，又保持语义准确、代码简洁。

内容的提问来源于stack exchange，提问作者s00pGuY