android - 使用 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[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;
}

<div class="center">
  <input type="checkbox" class="input-tick" id="agree-to-terms" name="agree-to-terms">
  <label for="agree-to-terms">
    I agree
  </label>
</div>

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 时产生预期的结果: