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

概述我开发了一个移动网络应用程序,我正在测试它的可访问性.我在 Android上使用TalkBack(启用了“触摸浏览”)或iOS上的VoiceOver时遇到了一些无法检查的复选框. 问题是我们“隐藏”了实际的复选框,用户看到并与样式标签交互,该标签看起来像一个复选框. 这是隐藏实际复选框的CSS的一部分： .input-tick { position: absolute; left: 我开发了一个移动网络应用程序,我正在测试它的可访问性.我在 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 >  <input type="checkBox"  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只处理标签？还有其他办法解决这个问题吗？

解决方法 我想我可能已经找到了解决这个问题的方法.在查看了其他方法来设置样式化复选框之后,我发现很多人建议使用display：none或visibility：hIDden,但听起来这样会删除复选框的某些功能(能够使用tab来聚焦它们,使用spacebar来切换) .

但还有另一种隐藏复选框的方法.而不是这个：

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

我们做得到：

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

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

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

总结

以上是内存溢出为你收集整理的android – 使用TalkBack或VoiceOver时无法检查带样式的居中复选框全部内容，希望文章能够帮你解决android – 使用TalkBack或VoiceOver时无法检查带样式的居中复选框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。