通过为元素添加 tabindex="0" 属性，可使其成为可聚焦（focusable）且可通过 Tab 键导航的元素，适用于 <label> 等默认不可聚焦的语义化标签，同时需确保其具备明确的交互行为（如触发点击事件）。
通过为元素添加 `tabindex="0"` 属性，可使其成为可聚焦（focusable）且可通过 tab 键导航的元素，适用于 `
在 Web 可访问性（a11y）实践中，仅靠鼠标点击是不够的——键盘用户（包括视障人士、动力障碍用户或偏好键盘操作的开发者）依赖 Tab 键顺序遍历页面中的可聚焦元素。默认情况下，只有原生可交互元素（如 <button>、<input>、<a href>）才具有天然的 tabbability；而 <label>、<div>、<span> 等元素虽语义清晰或视觉可用，却无法被 Tab 键选中。
解决方法很简单：为该元素显式添加 tabindex="0" 属性：
<label for="test" tabindex="0">click me</label>
tabindex="0" 表示该元素将按 DOM 顺序插入浏览器默认的 Tab 流中，不改变原有焦点顺序，也不脱离语义结构。此时配合你已定义的 CSS 样式：
*:focus {
background-color: pink;
outline: 1px dotted red !important;
}当用户按 Tab 键聚焦到该 <label> 时，即可看到粉色背景与红色虚线轮廓，实现视觉反馈。
立即学习“前端免费学习笔记（深入）”；
⚠️ 重要注意事项：
-
必须绑定交互逻辑：键盘用户习惯在聚焦后按 Enter 或 Space 触发操作。因此，若 <label> 未包裹表单控件（如本例中 for="test" 已关联隐藏复选框），建议补充 JavaScript 以确保空格键也能触发切换：
document.querySelector('label[for="test"]').addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); document.getElementById('test').click(); } }); - 避免滥用 tabindex 大于 0 的值（如 tabindex="1"）：这会强制打乱自然 Tab 顺序，损害可访问性，应严格避免。
- 优先使用语义化替代方案：如果目标是“可点击+可聚焦”，更推荐直接使用 <button type="button"> 并通过 CSS 重置样式，因其原生支持键盘交互（Enter/Space）、无障碍角色（role="button"）及焦点管理。
✅ 总结：tabindex="0" 是让非交互元素获得键盘可访问性的标准、轻量且合规的手段，但必须同步提供等效的键盘操作支持，才能真正满足 WCAG 2.1 中「键盘可操作」（Success Criterion 2.1.1）的要求。
