创建自定义键盘可访问复选框

2025-06-07

创建自定义键盘可访问复选框

我见过很多设计师设计出这些华丽的复选框样式，但当你看到它们实现后，你甚至无法用键盘选中它。假设我们设计师的样式指南里有这种情况。

复选框设计为选中时为青色，选中时为黑色复选标记

我以前见过这种实现，看起来很漂亮。然而，当我按下tab按键时，它却直接跳过了。如果这个字段是必填项，那你就是在坑你的一大堆用户。他们用::before或::after伪元素来制作一个漂亮的复选框，然后用:checked伪类来决定复选框本身的样式。这看起来很酷，但问题是他们用在了display: none复选框输入框本身上。这样做会使得复选框本身对浏览器不可见，对于那些依赖键盘浏览网站的人来说，这简直是无解。

键盘的 Gif 尝试访问自定义复选标记但跳到链接。

起点

让我们一步一步地讲解一下这个过程。我的初始代码如下：

<fieldset>
  <legend>Accessible Checkboxes</legend>

  <input type="checkbox" name="Checkbox" id="check_1">
  <label for="check_1">Checkbox</label>

  <input type="checkbox" name="CSS Only" id="css_only">
  <label for="css_only">CSS Only</label>

  <input type="checkbox" name="" id="disabled_sample" disabled>
  <label for="disabled_sample">A disabled checkbox</label>

  <input type="checkbox" name="Fourth Option" id="fourth_check">
  <label for="fourth_check">Fourth Option</label>
</fieldset>
Enter fullscreen mode Exit fullscreen mode

没有设计的基本复选框。

我会从一个简单的复选框列表开始。这是我目前的 CSS：

input[type="checkbox"] {
  position: absolute;
}

input[type="checkbox"] + label {
    display: block;
    position: relative;
    padding: 0 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

在标签上创建伪元素

我要做的第一件事是确保创建一个可以代替复选框的伪元素。为此，我将在元素::before上创建一个伪元素<label>。现在它看起来像这样：

input[type="checkbox"] + label::before {
  content: '';
  position: relative;
  display: inline-block;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  background: white;
}
Enter fullscreen mode Exit fullscreen mode

具有白色框和普通框的复选框。

我特意把原来的未设置样式的复选框保留在那里。这样做的原因是，这样可以更容易地判断复选框何时获得焦点、被选中等等。这有助于我推迟到最后一刻才隐藏复选框。

选中时在伪元素上添加样式

截至目前，当我们尝试勾选复选框时，除了正常行为外，它不会执行任何其他操作。我们需要做的是使用伪类添加一些 CSS 魔法:checked。如下所示：

input[type="checkbox"]:checked + label::before {
  background: #5ac5c9;
}
Enter fullscreen mode Exit fullscreen mode

复选框包含一个白色方框和一个普通方框。其中一个方框处于选中状态，其旁边的方框则为青绿色。

添加您的自定义复选标记

如果您想在::before元素内容中添加一个 Unicode 复选标记，完全可以做到。不过，我想稍微花点心思。现在，我们要确保自定义元素内部有一个垂直的复选标记。我通过添加一个::after伪元素来实现这一点。我们在这里做的是创建一个带有两个边框的直角，然后旋转它。

input[type="checkbox"]:checked + label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 27px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  height: 6px;
  width: 13px;
  transform: rotate(-45deg);
}
Enter fullscreen mode Exit fullscreen mode

青色复选框，旁边有一个普通的选中复选框。

额外的挑战，不是勾选，而是画一个“X”。

为伪元素添加焦点样式

太好了！我们现在可以出发了吗？嗯，还没到。

我们仍然需要确保伪元素“获得焦点”。我们现在要做的是在复选框获得焦点时复制焦点样式。我们不想这样做的原因display: none是，移除显示会完全阻止复选框获得焦点。我希望有一些具体的焦点样式，因为它们在不同浏览器中可能有所不同。下面是我最终的做法，因为我想复制 Chrome 的默认焦点样式，但要在所有浏览器中都复制。虽然不一样，但很接近！

input[type="checkbox"]:focus + label::before {
  outline: #5d9dd5 solid 1px;
  box-shadow: 0 0px 8px #5e9ed6;
}
Enter fullscreen mode Exit fullscreen mode

带框的项目周围有一个蓝色项目，表示键盘已聚焦于它。

现在我们可以隐藏原来的复选框了！看看在我们解决这个问题的时候，保留它有多有用？

input[type="checkbox"] {
  position: absolute;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
Enter fullscreen mode Exit fullscreen mode

（以上代码是常见的视觉隐藏css）

键盘聚焦自定义复选框并选中的 Gif

为禁用的复选框添加一些样式

最后一件事，我们应该让禁用复选框的样式有所不同。以下是我做的：

input[type="checkbox"]:disabled + label {
  color: #575757;
}

input[type="checkbox"]:disabled + label::before {
  background: #ddd;
}
Enter fullscreen mode Exit fullscreen mode

带有深灰色框的禁用复选框。

就是这样！同样的原则也可以应用到单选按钮上。欢迎在Twitter上或在下方评论区留言，分享你的想法！

免责声明：我差点没发这篇文章。昨晚刷推特的时候，我看到了一篇几乎和这篇文章一样的帖子。我问了推特圈的人是否应该发，结果绝大多数人都说“好！”。另一篇我还没看，只是粗略地看了一眼，主要是因为不想影响我的写作。不过，我想给你提供一个链接，方便你阅读：如何制作可自定义访问的复选框和单选按钮。

文章来源：https://dev.to/lkopacz/create-custom-keyboard-accessible-checkboxes-2036
Devto 翻译
PREV
JavaScript 和可访问性：手风琴
NEXT
无障碍标签简介