时间戳

首页 > 解决方案 > 使自定义复选框滑块标签元素 a11y 选项卡/键盘可访问

html - 使自定义复选框滑块标签元素 a11y 选项卡/键盘可访问

问题描述

因此，我正在尝试制作跨浏览器（IE11、Chrome、Firefox、Edge）的自定义滑块，它也可以访问，但我无法让标签元素像自然复选框一样响应空格键进行选择。当然，我可以用代码轻松地做到这一点，但很好奇我是否可能缺少一些我可以做的事情来完成同样的事情。

正如下面的例子，tabindex当然提供了视觉和标签，但我似乎无法让标签像点击label元素一样切换它。我应该走简单的路线，让一些代码处理它还是有人想教我一些东西？干杯!

// not yet, and yes I know I haven't added the aria attributes etc, it's just a quick PoC :)
main {
  display: block;
  margin: 0 auto;
  padding: 2rem;
  width: auto;
}

.slide-toggle {
  margin: 0 3rem;
  display: inline-block;
}
.slide-toggle:last-of-type {
  margin-left: 0;
}
.slide-toggle input {
  display: none;
}
.slide-toggle input:checked ~ label {
  color: #fff;
  background-color: skyblue;
}
.slide-toggle input:checked ~ label:after {
  transform: translateX(100%);
}
.slide-toggle label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: .25rem 0;
  cursor: pointer;
  user-select: none;
  border: #bbb 1px solid;
  border-radius: 3px;
}
.slide-toggle label:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  margin: .25rem;
  border: #bbb 1px solid;
  border-radius: 3px;
  background-color: #ddd;
  transition: transform 0.25s cubic-bezier(0.6, 0.82, 0, 0.76);
}
.slide-toggle label:focus {
  box-shadow: 0 0 0 8px red;
}
.slide-toggle label:hover {
  border-color: #777;
}
.slide-toggle label div {
  flex-grow: 1;
  flex-basis: 50%;
  flex-wrap: nowrap;
  text-align: center;
  min-width: 1rem;
  margin: .25rem 1rem;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>

<main>
  <h2>Please click a slide toggle for example;</h2>

  <div class="slide-toggle">
    <input id="guidLater"
           type="checkbox"/>
    <label for="guidLater" 
           tabindex="0"
           role="checkbox">
      <div>YES</div>
      <div>NO</div>
    </label>
  </div>

  No Translation Option: 
  <div class="slide-toggle">
    <input id="guidLater4"
           type="checkbox"/>
    <label for="guidLater4"
           tabindex="0"
           role="checkbox">
      <div><i class="fas fa-check" style="color:green"></i></div>
      <div><i class="fas fa-times" style="color:red;"></i></div>
    </label>
  </div>
  
</main>

标签： htmlcssaccessibility

解决方案

我认为你的意思是创造一个“开关”

你不应该display: none在实际的checkbox. 您需要在视觉上隐藏它，但仍将其保留在页面上，因为只有这样它才能捕捉到space按键。

一个简单（和建议）的方法是

.slide-toggle input {
    width: 0;
    height: 0;
}

你也不需要在标签上有role="checkbox"和。tabindex

推荐阅读