Create accessible checkbox group with multiple descriptions

Question

I want to create an checkbox group like so:

How do I make sure this is set up in the right way for it to be fully accessible?

I have something like this at the moment:

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

Or on jsfiddle

Answer 1

That already looks pretty good. Grouping has the advantage that it’s accessible name only gets announced once when the user enters the group.

It’s description (aria-describedby) is not part of the accessible name, so it won’t get announced by screen readers when the user navigates to the first checkbox (by means of tab).

If the group’s description is an indication important to the user’s choice, it shouldn’t be an optionally read description, but in the name. My suggestion would then be to group both texts together in a semantically correct <fieldset> and <legend>.

This will no longer respect the users verbosity setting and simply always announce that indication once the group is entered.

Alternatively, you might want to add the description’s ID to the group’s Labels: <div role="group" aria-labelledby="group_head group__description">.

<fieldset>
<legend>
  <h1>Heading 1</h1>
  <p>Descriptive text about this checkbox group</p>
</legend>
<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_2" aria-describedby="description_2">
      <label for="checkbox_2">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_3">Checkbox 3</label>
      <p id="description_1">This is the descriptive text explaining the checkbox 3</p>
  </li>
</ul>
</fieldset>