我们在复选框的顶部实现了一个切换开关。复选框用于跟踪拨动开关是打开还是关闭。一切正常,直到您打开辅助功能。当辅助功能打开且用户在切换开关上点击时,焦点将移至复选框,但不可单击。但是,如果用户单击标签,则可以单击。我需要以某种方式不要让可访问性焦点进入复选框,但仍然要在单击切换开关或标签时宣布它是否处于选中状态。
我尝试使用tabindex和z-index来使焦点不移至复选框,但是两者都没有任何区别。我尝试使用“可见性:隐藏”。它可以工作,但是如果选中此复选框,则可访问性将停止宣布。
我们的实现:
<div class="myToggleSwitch >
::before
<inputtype="checkbox" disabled="disabled">
<label>Label for the Toggle Switch
<div class="switch" >
::before
<div class="switch-control">
</div>
::after
</div>
</label>
::after
</div>
答案 0 :(得分:0)
当复选框处于焦点状态时,您可以使用CSS在开关上设置一些样式。
例如:
.myToggleSwitch input[type="checkbox"]:focus + label .switch {
// Switch styles go here.
outline: 1px solid blue;
}
用简单的英语,它会显示“查找具有焦点复选框输入的类为“ myToggleSwitch”的任何元素。然后找到带有带有“ switch”类的子元素的相邻标签,并给它一个蓝色轮廓。'
要确保该复选框在页面上不可见,您可以执行以下操作:
.myToggleSwitch input[type="checkbox"] {
position: absolute:
left: -1000%;
visibility: hidden;
}
这会隐藏它并将其放在屏幕外,这样它仍然可以聚焦,但在页面上不可见。
答案 1 :(得分:0)
您的HTML结构似乎已损坏。
输入与其标签之间没有任何关系。输入既不会嵌套在标签内,也不会使用for
属性链接两者。
示例代码中的复选框为disabled
。
在那种情况下,我假设您使用的样式实际上不取决于复选框的状态?因为单击标签不会更改示例中输入的值。