One of my sites has had an accessibility audit by a third party and they raised the following issue:
WCAG 2.1 - 2.4.6 (Headings and Labels): The use of labels for inputs is important so that assistive technology can reliably convey the use and meaning of content on the page. Users that rely on this tech will struggle to understand the use of a form if there is no label. The check box on the "Contact Us" page has a label but it is not correctly associated to the form control using the for attribute.
Below is the HTML for the control:
<div class="form-group privacy-policy">
<label class="control-label">Privacy policy</label>
<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>
They highlighted the label "Privacy policy" as the issue.
How would I go about solving this?
I was thinking using fieldset and legend tags would fix this but is it correct in this instance as it's only a singular control rather than grouping a bunch of them together.
<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>
The auditors are wrong, assuming the sample code you posted is the code they reviewed.
The check box on the "Contact Us" page has a label but it is not correctly associated to the form control using the for attribute.
<input type="checkbox" value="1" id="privacy-policy-10805">
<label for="privacy-policy-10805">I agree to the <a href="/privacy-statement">privacy policy</a></label>
The checkbox absolutely has a label. You have an ID on the checkbox and that ID is referenced in the for attribute of the <label>.
However, there's also an "orphan" label that is being used as sort of a heading before the checkbox.
<label>Privacy policy</label>
That <label> is not associated with any other object so using a <label> doesn't buy you anything. It could easily be an <h2> (or some appropriate heading level). Using a <fieldset>/<legend> would be perfectly valid. There's nothing in the HTML spec that says a fieldset can't label one form element.
Also note that your auditors used the wrong checkpoint. WCAG 2.4.6 Headings and Labels says that if headings or labels are used, then they must be descriptive.
Headings and labels describe topic or purpose.
WCAG 2.4.6 does not say that you must have a heading or label.
WCAG 3.3.2 Labels or Instructions is the guideline that says you should have labels when user input is required.
Labels or instructions are provided when content requires user input.
I'd be a little leery of other results from that audit if they already have two errors in this one report.