如何不让可访问性集中在复选框上

Question

我们在复选框的顶部实现了一个切换开关。 复选框用于跟踪切换开关是打开还是关闭。 一切正常，直到您打开辅助功能。 当打开辅助功能并且用户点击切换开关时，焦点将转到复选框，但它不可点击。 但是，如果用户点击标签，则可以点击。 我需要以某种方式不让可访问性焦点出现在复选框中，但仍然会在点击切换开关或标签时宣布它是否已选中或未选中。

我已经尝试使用tabindex和z-index来不让焦点进入复选框，但两者都没有任何区别。 我尝试使用visibility：hidden。 它可以工作，但是如果选中复选框，则可访问性会停止通知。

我们的实施：

<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>

Answer 1

当关注复选框时，您可以使用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;
}

隐藏它并将其定位在屏幕外，这样它仍然可以聚焦但在页面上看不到。

Answer 2

您的HTML结构似乎已损坏。

输入和它的标签之间没有关系。 输入不是嵌套在标签内，也不是使用for属性来链接它们。

在示例代码中disabled该复选框。

在那种情况下，我假设您使用了一些实际上不依赖于复选框状态的样式？ 因为单击标签不会更改示例中输入的值。