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

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 的一部分。

已接受的答案建议将 元素的 tabindex 更新为 tabindex 0、1 和 2。请不要使用更大的 tabindex 值小于 0。

spec for tabindex有两个警告:

Using a positive value for tabindex to specify the element’s position in the sequential focus navigation order interacts with the order of all focusable elements. It is error-prone, and therefore not recommended

其次，

authors should only make elements focusable if they act as interactive controls or widgets

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

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

(我在“代码片段”上调出了浏览器的代码检查器，并从 元素中删除了 tabindex 并且能够在 block 中切换并使用 space 选择它们 键。)