Question

因此，我正在尝试使跨浏览器（IE11，Chrome，Firefox，Edge）的自定义滑块也可以a11y进行访问，并且在使label元素响应空格键进行选择时遇到了麻烦一个自然的复选框。我当然可以用代码轻松地做到这一点，但很好奇是否只有我可以做的事情才能完成同一件事的html / css。

如下面的示例所示，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>

Answer 1

在没有太多细节的情况下，我只是从纯解决方案的角度对此进行攻击，并提供一些见解。

对于HTML5元素，其想法是默认情况下会为其分配功能。例如，一个复选框继承了该复选框应具有的行为，因为它是默认元素。如果可以使用本机元素，那么您也不应该将元素重新用于其他用途，因为这违反了ARIA的前两个规则。

如果您可以将本机HTML元素[HTML51]或属性与您已经内置的语义和行为一起使用，而不是重新使用元素并添加ARIA角色，状态或属性以使其可访问，那么请执行这样。

和

除非确实需要，否则请勿更改本机语义。

Range（一个滑块）和Checkbox的输入类型具有两组截然不同的键盘行为，因此，对此功能无法正常使用，我并不感到惊讶。

Answer 2

我认为您要创建的是一个“开关”

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

一种简单（建议）的方法是

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

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

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

2 个答案: