创建具有多个描述的可访问复选框组

Question

我想像这样创建一个复选框组：

如何确保以正确的方式进行设置以使其完全可访问？

我现在有这样的东西：

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

或 jsfiddle

Answer 1

看起来已经很不错了。分组的优点是当用户进入组时，它的可访问名称只会被宣布一次。

它的描述 (aria-describedby) 不是可访问名称的一部分，因此当用户导航到第一个复选框（通过选项卡）时，屏幕阅读器不会读出它。

我的建议是按照语义正确的 <fieldset> 和 <legend>.

将它们组合在一起

或者，您可能只想将描述的 ID 添加到组的标签中：<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>

创建具有多个描述的可访问复选框组

Create accessible checkbox group with multiple descriptions

forms

accessibility