如何使元素具备可聚焦性，支持通过TAB键进行导航？

默认情况下，像<label>这类元素虽然能点击，但不属于原生可聚焦元素，没法通过TAB键导航到它，自然也没法用键盘触发对应的交互。要解决这个问题，可以用以下方法：

核心方案：使用tabindex属性 #

• 给目标元素添加tabindex="0"，这样元素会被纳入正常的TAB导航顺序，和输入框、按钮这类原生可聚焦元素的导航逻辑一致。
• 如果只需要元素能通过JS编程方式聚焦（比如element.focus()），但不需要出现在TAB序列里，就用tabindex="-1"。

结合键盘事件优化体验 #

为了符合无障碍操作规范，当元素获得焦点后，建议监听Enter或Space键的按下事件，模拟点击行为——这是用户通过键盘操作交互元素的习惯方式。

修改后的完整示例 #

CSS（保持原样式不变）

*:focus
{
  background-color: pink;
  outline: 1px dotted red !important;
}

#test:checked ~ * label[for="test"]
{
  color: green;
}

HTML（添加tabindex）

<div>
  <input id="test" type="checkbox" style="display:none">
  <div class="container">
    <input>
    <label for="test" tabindex="0">click me</label>
    <input>
  </div>
</div>

JS（处理键盘触发）

const targetLabel = document.querySelector('label[for="test"]');
targetLabel.addEventListener('keydown', (e) => {
  // 监听Enter或空格键
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    // 触发对应checkbox的点击事件
    document.getElementById('test').click();
  }
});

注意事项 #

不要设置tabindex为大于0的值，这会打乱页面默认的TAB导航顺序，严重影响用户的操作体验，尤其是依赖键盘导航的用户。

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