使用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时会产生预期的结果：

Answer 2

您可以考虑在自定义元素上使用checkbox aria role，并使用javascript动态定义aria-checked属性

<div id="customcheckbox" tabindex="0" aria-role="checkbox"
     class="checked" aria-checke="true">This is checked</div>

... becomes ...

<div id="customcheckbox" tabindex="0" aria-role="checkbox"
     class="unchecked" aria-checke="false">This is not checked</div>