HTMHell supports Black Lives Matter. ✊🏾 Code is always political.

#13 link or label

submitted on by Odepax

Bad code Bad code

<input type="checkbox" id="accept" required>
<label for="accept">
  <a href="/legal"> I accept the confidentiality policy and data… </a>
</label>

Issues and how to fix them Issues and how to fix them

  1. It’s bad practice to nest elements with activation behavior (e.g. click).
  2. Users don’t expect a new page to open when they click a label.
  3. The ability to click a label provides usability and accessibility benefits (larger hit area).
  4. Place links outside the label element.

Good code Good code

<input type="checkbox" id="accept" required>
<label for="accept"> I accept the confidentiality policy and data… </label>
(read <a href="/legal">Terms and conditions</a>)

Resources Resources