A label should only contain text, do not put interactive elements such as links and buttons inside, since:
- It is more complicated to activate the form control associated with
<label>. - Screen readers will have problems announcing the content of
<label>(they only read the part that does not contain text).
DON'T
<label for="tac"> <input type="checkbox" id="tac" name="tac" /> I agree with the <a href="terms-and-conditions.html">Terms and Conditions</a> </label> The best option is to take the interactive element out of <label> and relate it to the form control using the aria-describedby attribute.
DO
<label for="tac"> <input type="checkbox" id="tac" name="tac" aria-describedby="tac-desc" /> I agree with the Terms and Conditions </label> <p id="tac-desc"> Please read <a href="terms-and-conditions.html">our Terms and Conditions</a> </p> Also, do not use headings within a label as many assistive technologies have trouble advertising them and are the most frequent navigation resource for their users.
DON'T
<label for="your-name"> <h3>Your name</h3> <input id="your-name" name="your-name" type="text" /> </label> If the label text needs visual adjustments to make it look like a heading, they have to be done using CSS.
DO
<label for="your-name" class="large-label"> Your name <input id="your-name" name="your-name" type="text" /> </label> 
Top comments (0)