如何不让可访问性专注于复选框答案

【问题标题】：How to not let accessibility focus on checkbox如何不让可访问性专注于复选框
【发布时间】：2019-04-15 10:02:05
【问题描述】：

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

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

【问题讨论】：

标签： html css accessibility

【解决方案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;
}

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

【讨论】：

【解决方案2】：

您的 HTML 结构似乎损坏了。

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

复选框在您的示例代码中为 disabled。

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

【讨论】：