如何使用 wai-aria 标签使相关复选框可访问？

Answer 1

唯一可以改变的是

aria-labelledby

aria-labelledby

 字段中的 

input

 标签应引用 

id

 的 

label

，而不是 

id

 字段本身的 

input

。另外，除非您引用它，否则您不需要段落标签 

id<p>

。

使用字段集和图例元素对相关复选框进行分组真是太好了。这是增强表单语义结构和提高可访问性的好方法。

示例：

<fieldset> 
  <legend id="language-label">What languages do you know?</legend>
  <p>You can select one or more.</p>
  <div class="form-check">
    <input name="language" class="form-check-input" type="checkbox" value="python" id="language-checkbox-1" aria-labelledby="language-label language-label-1" aria-describedby="language-description">
    <label class="form-check-label" id="language-label-1" for="language-checkbox-1">
      Python
    </label>
  </div>
  <div class="form-check">
    <input name="language" class="form-check-input" type="checkbox" value="javascript" id="language-checkbox-2" aria-labelledby="language-label language-label-2" aria-describedby="language-description">
    <label class="form-check-label" id="language-label-2" for="language-checkbox-2">
      JavaScript
    </label>
  </div>
  <div class="form-check">
    <input name="language" class="form-check-input" type="checkbox" value="c++" id="language-checkbox-3" aria-labelledby="language-label language-label-3" aria-describedby="language-description">
    <label class="form-check-label" id="language-label-3" for="language-checkbox-3">
      C++
    </label>
  </div>
</fieldset>