可访问切换

简介

Toggle是一个 TRUE/FALSE 开关，看起来像...开关...您可能可以在智能手机设置中找到类似的控件。

从本质上讲，由于它是一种 TRUE/FALSE 类型的控件，因此它基本上只是一种风格更为花哨的input[type="checkbox"]。

这就是为什么让它变得难以访问的原因。

通常的方式

通常，要用 HTML 和 CSS 构建这样的切换按钮，你需要在一个样式精美的label元素中嵌入一个视觉上隐藏的复选框。大多数教程都会告诉你这一点。

label元素确保整个切换是“交互式的”（即可点击）。

您不能直接用 隐藏复选框，display: none因为这会使辅助技术无法识别它。因此，这里有一个技巧，可以让它在屏幕上不可见，但仍然可以访问：

label.toggle {
    position: relative;
    ...

    [type="checkbox"] {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    ...
}

问题与解决方案

需要注意的是：我们的切换按钮（一个复选框）被包裹着，label因此（出于安全考虑👮）需要提供实际的文本描述。但我们不希望组件规定文本描述应该是什么样子……因为它可能会以多种不同的方式使用：

• 有时文本可能位于切换按钮前面，有时位于其后面，有时位于其上方，
• 有时文本可能更长且有样式，有时则不然。

因此我们不能使用label🤷‍♂️。但如果我们改用常规的div或span，切换开关就失去了“可点击性”。

因此，实际的技巧是将复选框放大到与切换包装器（div或span）一样大，然后以不同的方式隐藏它：

div.toggle {
    position: relative;
    ...

    [type="checkbox"] {
        width: 100%;
        height: 100%;
        opacity: 0.00001;
        ...
    }

    ...
}

首先，我们确保复选框占据了全部宽度和高度。然后，我们用几乎隐藏了复选框opacity: 0.00001;。

不透明度可以取值在0（完全不可见）和1（完全可见）之间。我们使用非常接近 0 的值，这样它在屏幕上基本不可见，但对辅助技术可见。

好了，各位。下面是完整的演示 :)

^ 尝试删除不透明度属性以查看实际的复选框位置。

几点说明：

• 实际上，只要你用 JS 代码，任何元素都可以创建切换按钮。但我想避免这样做。
• 请记住，所有表单元素都应该放在 内部label，但在组件的世界里，我们并不希望这样一个底层组件决定其周围的一切应该是什么样子。组件应该是独立的，并且不会影响其周围环境（至少这是我的理念）。