A11y tips: don't use links, buttons or headings inside labels

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>