如何让隐藏复选框配合可见标签支持Tab键聚焦

架构老林

2026-7-15

解决胶囊式复选组键盘导航问题

核心问题

你用常规方式（如display: none）隐藏复选框时，浏览器会将其从焦点导航序列中排除，这才是Tab键无法选中的根本原因，和ARIA属性无关。

具体修复步骤

替换复选框隐藏方式
不要用display: none或visibility: hidden，改用视觉隐藏但保留焦点能力的样式。用Tailwind可直接用内置的sr-only类，或者自定义样式：

<input 
  type="checkbox" 
  id="check-{{ item.value }}" 
  v-model="modelValue" 
  :value="item.value"
  class="sr-only"
>

自定义样式示例：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

该样式让复选框视觉上完全隐藏，但仍保留焦点与交互能力。

确保标签与复选框正确关联
标签的for属性必须和复选框的id严格对应，保证点击标签能切换复选框状态，同时屏幕阅读器可正确读取内容：

<label 
  for="check-{{ item.value }}"
  class="px-4 py-2 rounded-full cursor-pointer"
  :class="modelValue.includes(item.value) ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'"
>
  {{ item.label }}
</label>

增强键盘交互体验（可选）
给标签添加键盘事件，让视觉上的胶囊按钮也能响应空格/回车操作，同时设置tabindex="0"让标签可被Tab聚焦：

<label 
  ...
  tabindex="0"
  @keydown.enter="toggleValue(item.value)"
  @keydown.space="toggleValue(item.value)"
>
  {{ item.label }}
</label>

组件内实现切换逻辑：

methods: {
  toggleValue(value) {
    const index = this.modelValue.indexOf(value);
    index > -1 ? this.modelValue.splice(index, 1) : this.modelValue.push(value);
  }
}