自定义Checkbox组件键盘可访问性问题：无法Tab聚焦并触发切换

问题根源 #

给<label>添加tabindex="1"属于冗余操作——原生<input type="checkbox">本身就是支持Tab聚焦、回车/空格切换的可交互元素，额外给label加tabindex会干扰原生焦点逻辑，导致焦点无法正常触发。同时原代码将焦点样式绑定在label上，而实际可聚焦的input被隐藏后，焦点状态无法正确映射到视觉元素。

修复步骤 #

1. 移除label的tabindex：让原生input接管焦点逻辑，符合无障碍设计规范。
2. 调整焦点样式绑定：将焦点轮廓绑定到input的:focus-visible状态，通过CSS兄弟选择器让视觉元素显示焦点反馈。
3. 确保input可交互性：保留input的全屏覆盖设置，让它不可见但仍能接收键盘和鼠标事件。

修改后的完整代码 #

HTML #

<div class="instruction">Click here and then tab into toggle</div>

<label class="toggle">
  <input class="toggle-input" type="checkbox" />
  <div class="toggle-bg"></div>
  <div class="toggle-switch"></div>  
</label>

CSS #

.instruction {
  font-size:20px;
  font-weight:bold;
  font-family:sans-serif;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 100px;
  margin: 100px 0 0;
  padding: 4px;
  border-radius: 40px;
}

/* input获得焦点时，给背景元素添加焦点轮廓 */
.toggle-input:focus-visible ~ .toggle-bg {
  outline: red dotted 2px!important;
  outline-offset: 2px;
}

.toggle:before,
.toggle:after {
  content: "";
  display: table;
}

.toggle:after {
  clear: both;
}

.toggle-bg {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100%;
  height: 100%;
  background-color: #C0E6F6;
  border-radius: 40px;
  border: 4px solid #81C0D5;
  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid red; /* 调试用，上线可移除 */
  border-radius: 40px;
  z-index: 2;
  opacity: 0;
  pointer-events: auto; /* 确保input能接收事件 */
}

.toggle-switch {
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 50px;
  background-color: #F5EB42;
  border: 4px solid #E4C74D;
  border-radius: 50%;
  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-input:checked ~ .toggle-switch {
  margin-left: 0;
  border-color: #DEE1C5;
  background-color: #FFFDF2;
}

.toggle-input:checked ~ .toggle-bg {
  background-color: #484848;
  border-color: #202020;
}

.toggle-input:checked ~ .toggle-switch .toggle-switch-figure {
  margin-left: 40px;
  opacity: 0;
  transform: scale(0.1);
}

.toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt {
  transform: scale(1);
}

JS #

const toggle = document.querySelector('.toggle-input');

toggle.addEventListener('change', function() {
  console.log(toggle.checked);
});

效果说明 #

• 可通过Tab键聚焦到切换组件，焦点轮廓会显示在背景元素上
• 聚焦后按回车键或空格键即可切换开关状态
• 符合WCAG无障碍规范，屏幕阅读器能正确识别这是checkbox控件

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