Question

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

我尝试使用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>

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。

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

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

2 个答案: