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

Question

我开发了一个移动网络应用程序，我正在测试它的可访问性。在 Android（启用 "Explore by Touch"）上使用 TalkBack 或在 iOS.

上使用 VoiceOver 时，我遇到了一些无法选中的复选框

问题是我们 "hide" 实际的复选框和用户看到并与外观和行为都像复选框的样式化标签交互。

这是隐藏实际复选框的 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 尝试 "click" 复选框时，单击的 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;
}

在这里找到：

由于样式化的复选框比实际的复选框大，因此实际的复选框不可见。这会在使用 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>

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

Styled centered checkbox not checkable when using TalkBack or VoiceOver

html

css

android

accessibility

ios