Create accessible checkbox group with multiple descriptions

user_5107874 0
Viewed 179

I want to create an checkbox group like so: enter image description here

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

accessibility forms
1 Answers

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

My suggestion would be to group them both together in a semantically correct <fieldset> and <legend>.

Alternatively, you might simply 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>

user_6080420
Related