Accessible Form Group

Accessible form group

by Joost van der Steen

HTML

<div role="group" aria-labelledby="group_head" aria-describedby="group__description">
  <h1 id="group_head">Heading 1</h1>
  <div class="group__description">Descriptive text about this checkbox group</div>
  <ul>
    <li>
      <input type="checkbox" name="checkbox_1" id="checkbox_1" aria-describedby="description_1">
      <label for="checkbox_1">Checkbox 1</label>
      <p id="description_1">This is the descriptive text explaining the checkbox 1</p>
    </li>
        <li>
      <input type="checkbox" name="checkbox_2" id="checkbox_1" aria-describedby="description_2">
      <label for="checkbox_1">Checkbox 2</label>
      <p id="description_2">This is the descriptive text explaining the checkbox 2</p>
    </li>
        <li>
      <input type="checkbox" name="checkbox_1" id="checkbox_3" aria-describedby="description_3">
      <label for="checkbox_1">Checkbox 3</label>
      <p id="description_1">This is the descriptive text explaining the checkbox 3</p>
    </li>
  </ul>
</div>

CSS

*{
  font-family: Arial;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
li{
 margin: 1em 0; 
}
label{
  font-weight: bold;
}
p{
  font-size: 80%;
}

div[role="group"]{
  padding: 10px;
  border: 1px solid;
}