Today I learned: How to "include" a link inside a form input label
Posted on
Anti-Pattern
You may be familiar with this: A checkbox associated with a label that contains a link to a Terms and Conditions page. It is usually mapped as demonstrated in below code snippet.
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions">
I agree to the <a href="terms-and-conditions.html" target="_blank">Terms and Conditions</a>
</label>
I would flag this practice as an Anti-Pattern, as it is too often used, but
endangers the accessibility of your form.
Indeed as the Mozilla Developer Network (MDN) mentions, it "makes it difficult
for people to activate the form input associated with the label".
Basically, if the users click on the link part of the label, and this is likely to happen as it is a common practice for checkboxes and radio buttons to click the label to select the option; they will get to the target of that link but not activate the form input. This can be, for some, a deceptive experience.
The rule also applies, to not only anchors (commonly called links), but for any
other interactive elements such as button elements.
Solution
The solution consists in taking the anchor out of the label as demonstrated in the below code snippet.
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions">
I agree to the Terms and Conditions
</label>
<p>
<a href="terms-and-conditions.html" target="_blank">Read our Terms and Conditions</a>
</p>