Example Navigation

Example 3: Labeling radio buttons using encapsulation

Best Practice Rating: Poor

Encapsulation is compatible with assistive technologies and is defined in HTML specifications.
label element content increases the active area for changing the selection
What makes this a poor practice is the inconsistency with the labeling requirements of other form controls which need to use the label by reference technique.

Example Start

Select pizza crust

Deep dish
Thick
Hand thrown
Thin

Example End

HTML Source Code

<div class="label">Select pizza crust</div>
<ul class="radio">
  <li><label><input type="radio" name="crust" value="deep"/>Deep dish</label></li>
  <li><label><input type="radio" name="crust" value="thick"/>Thick</label></li>
  <li><label><input type="radio" name="crust" value="hand"/>Hand thrown</label></li>
  <li><label><input type="radio" name="crust" value="thin"/>Thin</label></li>
</ul>

CSS Source Code