Сделать пользовательский флажок ползунком Элемент метки a11y вкладка / клавиатура

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

Я думаю, что вы хотите создать "переключатель"

Вы не должны иметь display: none на фактическом checkbox.Вам нужно визуально скрыть это, но все равно держать его на странице, потому что только тогда он будет ловить нажатие клавиши пробел .

Простой (и рекомендуемый) способ сделать это -

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

также вам не нужно иметь role="checkbox" и tabindex на этикетке.

Answer 2

Не вдаваясь в подробности, так как их много, я просто расскажу об этом с точки зрения чистого решения и немного расскажу.

С элементами HTML5 идея заключается в том, что им назначены функции по умолчанию.Например, флажок наследует поведение, которое должно иметь флажок, потому что это элемент по умолчанию.Вам также не следует повторно назначать элементы для других целей, если они доступны, поскольку это нарушает первые два правила ARIA.

Если вы можете использовать собственный элемент HTML [HTML51] или атрибутс семантикой и поведением, которые вам требуются, уже встроенными, вместо повторного выбора элемента и добавления роли, состояния или свойства ARIA, чтобы сделать его доступным, затем сделайте это.

И

Не меняйте собственную семантику, если только вам это не нужно.

Типы ввода Range (ползунок) и Checkbox имеют два совершенно разных набора поведения клавиатуры, поэтому яне удивлен, что это не работает правильно.