input[type=checkbox] - Labeling using label element encapsulating input[type=checkbox]

Description

  • 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 toppings

Example End

Roles

  • checkbox
  • log
  • option
  • timer

Properties

  • aria-activedescendant
  • aria-atomic
  • aria-live
  • aria-relevant
  • aria-selected

HTML Source Code


<div class="label">Select pizza toppings</div>
<ul class="checkbox">
  <li><label><input type="checkbox"  value="pepperoni"/>Pepperoni</label></li>
  <li><label><input type="checkbox" value="sausage" />Sausage</label></li>
  <li><label><input type="checkbox" value="mushrooms"/>Mushrooms</label></li>
  <li><label><input type="checkbox" value="onions"/>Onions</label></li>
  <li><label><input type="checkbox" value="gpeppers"/>Green Peppers</label></li>
  <li><label><input type="checkbox" value="xcheese"/>Extra Cheese</label></li>
</ul>

CSS Source Code


  <style type="text/css">
div.label {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  font-size: 100%;
  font-weight: bold;
}

ul.checkbox   {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  list-style: none;
}

ul.checkbox li input {
  margin-right: .25em;
}
  </style>