Create accessible checkbox group with multiple descriptions-CodePudding

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

CodePudding user response：

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>