android – 使用TalkBack或VoiceOver时无法检查带样式的居中复选框

问题是我们“隐藏”了实际的复选框,用户看到并与样式标签交互,该标签看起来像一个复选框.

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

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

这是完整的HTML和CSS示例(另请参见@L_618_6@.)

.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只处理标签？还有其他办法解决这个问题吗？