如何让按钮内的自定义checkbox具备可访问性？

这个问题我之前也碰到过，核心原因是你的自定义复选框虽然加了role="checkbox"，但缺少ARIA规范要求的状态属性和必要的交互补充，导致屏幕阅读器无法感知它的状态变化。下面是具体的修复方案：

1. 完善HTML结构与ARIA属性 #

ARIA复选框控件必须同时具备role="checkbox"和**aria-checked属性**，后者用于明确当前选中状态（true/false/mixed）。同时我们要让图标和文本关联，确保屏幕阅读器能完整播报控件用途：

<button id="checkAll" class="btn btn-default checkAll checkAllInit" data-target="#everyCheckbox">
  <span class="icon icm icm-checkbox_select" role="checkbox" aria-checked="true" aria-labelledby="checkAllText"></span>
  <span id="checkAllText" class="text">Unmark all</span>
</button>

• aria-checked="true"：初始状态对应文本“Unmark all”（表示已全选），如果初始是未全选状态则设为false。
• aria-labelledby="checkAllText"：让图标关联旁边的文本，屏幕阅读器会自动播报文本内容+复选框状态，让用户清楚控件的作用。

2. 同步状态更新的JavaScript逻辑 #

在你的全选/取消全选逻辑中，必须同步更新两个关键内容：自定义复选框的aria-checked属性值，以及按钮文本（保证视觉和屏幕阅读器反馈一致）。示例代码片段如下：

const checkAllBtn = document.getElementById('checkAll');
const checkAllIcon = checkAllBtn.querySelector('[role="checkbox"]');
const checkAllText = checkAllBtn.querySelector('.text');
const targetCheckboxes = document.querySelectorAll(checkAllBtn.dataset.target);

checkAllBtn.addEventListener('click', function() {
  // 判断当前是否所有复选框都已选中
  const isAllChecked = Array.from(targetCheckboxes).every(cb => cb.checked);
  const newState = !isAllChecked;

  // 更新目标列表中的所有复选框状态
  targetCheckboxes.forEach(cb => cb.checked = newState);

  // 同步更新自定义复选框的ARIA状态和按钮文本
  checkAllIcon.setAttribute('aria-checked', newState.toString());
  checkAllText.textContent = newState ? 'Unmark all' : 'Mark all';
});

3. 补充键盘交互支持（可选但推荐） #

虽然按钮本身支持Enter和Space触发点击，但为了符合复选框的原生键盘交互习惯（比如用Space直接切换状态），可以添加键盘事件监听，优化体验：

checkAllBtn.addEventListener('keydown', function(e) {
  if (e.key === ' ') {
    e.preventDefault(); // 阻止按钮默认的页面滚动行为
    this.click(); // 触发已有的点击逻辑
  }
});

为什么这样有效？ #

屏幕阅读器会主动监听aria-checked属性的变化，当你通过JavaScript更新这个属性时，阅读器会自动播报新的状态（比如“已选中，Unmark all”或“未选中，Mark all”）。同时通过aria-labelledby关联文本，让控件的用途更清晰，符合可访问性规范。

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