如何允许用户通过键盘切换并选择带有可见标签的不可见复选框？

Question

我正在使用“卡片”样式复选框 - 有三个不可见的复选框 ( opacity: 0) 以及相应的标签，这些标签显示为带背景的框。

单击标签时，复选框被选中，并且我将其标签更改为蓝色背景。这一切都工作正常，只是我发现当标签本身通过按空格键获得焦点时，我无法通过标签浏览并选择相应的复选框。

复选框本身可以使用空格键进行切换和选择，但当标签聚焦在...它位于标签之间时则不能。

注意：我在标签上设置了tabindex="0"，这样可以集中并突出显示它们。

有没有什么方法可以不用 JavaScript 来完成这个任务呢？我正在开发 Angular 应用程序的 UI，但我没有太多 Angular 知识。

我知道不同浏览器的选项卡和输入选择也不一致（我正在 Chrome 中解决这个问题），所以我希望也考虑到这一点。谢谢。

/* Unchecked labels are red */
label {
  display: inline-block;  
  width: 100px;
  height: 50px;
  background-color: tomato;
}

/* Invisible checkboxes */
input[type="checkbox"] {
  opacity: 0;    
}

/* If checkbox is checked, blue background */
input[type="checkbox"]:checked + label {
  background-color: blue;
}

<input type="checkbox" id="1">
<label for="1" tabindex="0"></label>

<input type="checkbox" id="2">
<label for="2" tabindex="0"></label>

<input type="checkbox" id="3">
<label for="3" tabindex="0"></label>

Answer 1

@dacre-denny 的一个非常有创意的答案，它回答了原来的问题，但是原始代码和答案代码仍然存在一些严重的可访问性问题，并且由于为accessibility这个问题指定了标签，我想对此发表评论，即使尽管它不是OP的一部分。

\n\n

接受的答案建议更新tabindex<label> 元素，使其 tabindex 为 0、1 和 2。请不要使用大于 0 的 tabindex 值。

\n\n

tabindex 的规范有两个警告：

\n\n

\n

使用 tabindex 的正值指定连续焦点导航顺序中的 element\xe2\x80\x99s 位置与所有可聚焦元素的顺序交互。很容易出错，因此不推荐

\n

\n\n

其次，

\n\n

\n

作者应该仅在元素充当交互式控件或小部件时才使其可聚焦

\n

\n\n

<label> 元素不是交互式元素，因此不应具有tabindex. 如果您希望标签具有交互性，则必须添加单击处理程序和按键处理程序，并为标签指定适当的角色，以便屏幕阅读器用户知道该元素是什么。

\n\n

tabindex我认为如果您完全从 <label> 元素中删除并让自然键盘焦点转到“隐藏”复选框，则接受的答案将正常工作。当复选框因 @dacre-denny\ 的样式而获得焦点时，红色块将显示焦点指示器，并且用户将能够使用 来space选择隐藏的复选框，并且该块将改变颜色。

\n\n

（我在“代码片段”上调出了浏览器的代码检查器，并将其tabindex从 <label> 元素中删除，并且能够通过选项卡浏览这些块并使用 键选择它们space。）

\n