html - 如何不让辅助功能专注于复选框

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

隐藏它并将其放置在屏幕外，以便它仍然可以聚焦但在页面上不可见。