实现选中所有子表单复选框的“全选”复选框是否符合无障碍标准？

针对你提到的「为每个fieldset添加符合无障碍要求的全选按钮」需求，以下是基于WCAG规范的最佳实践方案，同时避开嵌套fieldset的坑：

核心原则 #

• 拒绝嵌套<fieldset>：嵌套结构会导致多数屏幕阅读器（如VoiceOver）无法正确读取外层<legend>，属于无障碍设计的反模式。
• 优先语义化元素：用原生<input type="checkbox">实现全选功能，而非用<div>模拟——原生控件自带键盘可访问性（Tab聚焦、Space/Enter切换），无需额外手动处理交互逻辑。
• 状态同步与ARIA增强：通过JS控制全选框的indeterminate属性实现混合状态，配合aria-checked属性让屏幕阅读器明确识别状态。

完整实现示例 #

HTML结构 #

<!-- 第一组复选框 -->
<fieldset>
  <legend>Sandwich Condiments</legend>
  <div class="select-all-wrapper">
    <input type="checkbox" id="select-all-condiments" aria-controls="cond1 cond2 cond3 cond4">
    <label for="select-all-condiments">All condiments</label>
  </div>
  <ul class="checkbox-group">
    <li>
      <input type="checkbox" id="cond1">
      <label for="cond1">Lettuce</label>
    </li>
    <li>
      <input type="checkbox" id="cond2" checked>
      <label for="cond2">Tomato</label>
    </li>
    <li>
      <input type="checkbox" id="cond3">
      <label for="cond3">Mustard</label>
    </li>
    <li>
      <input type="checkbox" id="cond4">
      <label for="cond4">Sprouts</label>
    </li>
  </ul>
</fieldset>

<!-- 第二组复选框（可复用逻辑） -->
<fieldset>
  <legend>Pizza Toppings</legend>
  <div class="select-all-wrapper">
    <input type="checkbox" id="select-all-toppings" aria-controls="top1 top2 top3">
    <label for="select-all-toppings">All toppings</label>
  </div>
  <ul class="checkbox-group">
    <li>
      <input type="checkbox" id="top1">
      <label for="top1">Pepperoni</label>
    </li>
    <li>
      <input type="checkbox" id="top2" checked>
      <label for="top2">Mushrooms</label>
    </li>
    <li>
      <input type="checkbox" id="top3">
      <label for="top3">Onions</label>
    </li>
  </ul>
</fieldset>

JavaScript逻辑 #

// 封装全选逻辑，支持复用
const initializeSelectAll = (selectAllId, checkboxIds) => {
  const selectAllCheckbox = document.getElementById(selectAllId);
  const targetCheckboxes = checkboxIds.map(id => document.getElementById(id));

  // 更新全选框的状态（选中/未选中/混合）
  const updateSelectAllState = () => {
    const checkedCount = targetCheckboxes.filter(cb => cb.checked).length;
    
    if (checkedCount === 0) {
      selectAllCheckbox.checked = false;
      selectAllCheckbox.indeterminate = false;
      selectAllCheckbox.setAttribute('aria-checked', 'false');
    } else if (checkedCount === targetCheckboxes.length) {
      selectAllCheckbox.checked = true;
      selectAllCheckbox.indeterminate = false;
      selectAllCheckbox.setAttribute('aria-checked', 'true');
    } else {
      selectAllCheckbox.indeterminate = true;
      selectAllCheckbox.setAttribute('aria-checked', 'mixed');
    }
  };

  // 全选框触发的批量选择/取消
  selectAllCheckbox.addEventListener('change', () => {
    targetCheckboxes.forEach(cb => {
      cb.checked = selectAllCheckbox.checked;
    });
  });

  // 单个复选框变化时更新全选状态
  targetCheckboxes.forEach(cb => {
    cb.addEventListener('change', updateSelectAllState);
  });

  // 初始化时设置初始状态
  updateSelectAllState();
};

// 初始化每组全选功能
initializeSelectAll('select-all-condiments', ['cond1', 'cond2', 'cond3', 'cond4']);
initializeSelectAll('select-all-toppings', ['top1', 'top2', 'top3']);

关键无障碍细节说明 #

1. aria-controls属性：明确关联全选框和组内的复选框，帮助屏幕阅读器理解控件间的从属关系。
2. 混合状态处理：通过indeterminate属性实现视觉上的混合状态，同时设置aria-checked="mixed"，确保屏幕阅读器会告知用户「部分选中」的状态。
3. 语义化分组：每个复选组用独立的<fieldset>+<legend>，屏幕阅读器会自动读取<legend>作为分组上下文，无需依赖aria-label（仅在语义化标记无法满足时才考虑使用aria-label）。
4. 键盘可访问性：原生复选框自带Tab聚焦、Space/Enter切换状态的功能，无需额外编写键盘事件逻辑，符合WCAG 2.1的键盘可访问要求。

内容的提问来源于stack exchange，提问作者Ben Hackney