使用 TalkBack 或 VoiceOver 时，样式居中复选框不可选中

Question

我开发了一个移动网络应用程序，并正在测试它的可访问性。我在 Android 上使用 TalkBack（启用“触摸浏览”）或 iOS 上的 VoiceOver 时遇到了一些无法选中的复选框。

问题是我们“隐藏”了实际的复选框，用户看到了一个外观和行为都像复选框的样式标签并与之交互。

这是隐藏实际复选框的 CSS 的一部分：

.input-tick {
    position: absolute;
    left: -999em;

这是完整的 HTML 和 CSS 示例（另请参阅JSFiddle。）

.input-tick {
    position: absolute;
    left: -999em;

.input-tick {
  position: absolute;
  left: -999em;
}
.input-tick[disabled] + label {
  cursor: not-allowed;
  opacity: 0.5;
}
.input-tick[type="checkbox"]:checked + label::after {
  border: 3px solid;
  border-right: none;
  border-top: none;
  content: "";
  height: 10px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 14px;
  transform: rotate(-55deg);
}
.input-tick[type="radio"] + label::before {
  border-radius: 100%;
}
.input-tick + label {
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 0;
  position: relative;
}
.input-tick + label::before {
  border: 2px solid #000;
  content: "";
  display: inline-block;
  height: 22px;
  margin-right: 0.5em;
  vertical-align: -6px;
  width: 22px;
}
.input-tick + label:not(.checkbox):not(.block-label) {
  display: inline-block;
}
.center {
  text-align: center;
}

TalkBack 和 VoiceOver 尝试勾勒出隐藏复选框和标签的轮廓：

当 VoiceOver 和 TalkBack 尝试“单击”复选框时，单击的 x 和 y 坐标位于尝试勾勒出复选框和标签轮廓的框的中间。此单击位于复选框标签之外，因此不会选中该复选框。

有没有办法让 VoiceOver 和 TalkBack 只处理标签？还有其他方法可以解决这个问题吗？

Answer 1

我想我可能已经找到了解决这个问题的方法。在查看了其他制作样式化复选框的方法之后，我发现许多人建议使用display: none或visibility: hidden，但听起来这会删除复选框的某些功能（能够通过 Tab 键将其聚焦并通过空格键进行切换）。

但还有另一种方法可以隐藏该复选框。而不是这个：

.input-tick {
    position: absolute;
    left: -999em;
}

我们做得到：

.input-tick {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

在这里找到：https ://stackoverflow.com/a/32876109/3014407

由于样式化的复选框比实际的复选框大，因此实际的复选框不可见。当使用 TalkBack 或 VoiceOver 时，这会产生预期的结果：