当复选框使用视觉隐藏（visually-hidden）技术且父元素可聚焦时，空格键默认触发浏览器滚动行为；需在键盘事件中精准拦截空格键并阻止默认动作，同时确保焦点管理与语义结构符合无障碍标准。
当复选框使用视觉隐藏（visually-hidden）技术且父元素可聚焦时，空格键默认触发浏览器滚动行为；需在键盘事件中精准拦截空格键并阻止默认动作，同时确保焦点管理与语义结构符合无障碍标准。
在 Web 开发中，为提升可访问性（a11y），我们常将 设为视觉隐藏（如通过 .visually-hidden 类），再通过包裹它的
✅ 正确做法：精准拦截空格键 + 显式触发复选框切换
仅监听 e.key === ' ' 并调用 e.preventDefault() 往往无效，原因包括：
- 浏览器对 key 值的标准化支持存在兼容性差异（尤其旧版 Safari/IE）；
- 事件可能在非目标元素上触发（如 document 级监听时，e.target 可能不是可交互容器）；
- 缺少对复选框状态的实际更新逻辑。
推荐方案如下：
1. 在可聚焦容器上监听 keydown，并精确判断空格键
document.querySelectorAll('.filter-item').forEach(item => {
item.addEventListener('keydown', function (e) {
// 使用 e.code（推荐）或 e.keyCode（兼容旧浏览器）双重校验
if (e.code === 'Space' || e.keyCode === 32) {
e.preventDefault(); // 阻止默认滚动行为
// 找到内部的 checkbox 并切换其 checked 状态
const checkbox = this.querySelector('.filter-item__checkbox');
if (checkbox && checkbox.type === 'checkbox') {
checkbox.checked = !checkbox.checked;
// 可选：派发 input/change 事件，确保 JS 框架（如 React/Vue）能响应
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}
}
});
});2. 确保语义结构与焦点流合理
- ✅
- 是合法的可聚焦容器，但必须配合 role="checkbox" 和 aria-checked 提升可访问性：
<li class="filter-item" tabindex="0" role="checkbox" aria-checked="false" data-filter-item="" aria-labelledby="label-blouse"> <label id="label-blouse" class="filter-item__content" for="filter--filter.p.product_type--Blouse--top-bar"> <!-- ... --> <input type="checkbox" id="filter--filter.p.product_type--Blouse--top-bar" class="filter-item__checkbox visually-hidden" ...> <!-- ... --> </label> </li> - ✅ 同步更新 aria-checked 属性（在 JS 中）：
checkbox.addEventListener('change', () => { item.setAttribute('aria-checked', checkbox.checked); });
⚠️ 注意事项
- 不要全局监听 document 的 keydown 并无差别 preventDefault()，这会破坏其他组件（如
- 避免仅依赖 e.key === ' '：Safari 在某些输入法下可能返回 ' '（空格字符），也可能返回 ' '（不可见字符）或 undefined；e.code === 'Space' 更可靠；
- 视觉隐藏类（.visually-hidden）本身不影响键盘行为，但需确保隐藏方式不干扰焦点传递（当前 CSS 安全）；
- 若使用框架（React/Vue），优先通过受控组件管理状态，而非直接操作 checked 属性。
通过以上实现，空格键将稳定触发复选框切换，同时保持页面滚动、表单提交等默认行为不受影响，真正兼顾功能、可用性与无障碍合规性。
