Question

我正在尝试在电子商务网站的付款页面上创建可访问的信用卡选择。这是我的标记：

＆＃13;

.cc__card {
  display: inline-block;
  margin-right: 0.3em;
  position: relative;
}

.cc__card>input:focus+label {
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
}

.cc__card>input {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 0;
  z-index: -1;
}

.cc__icon {
  height: 35px;
  width: 54px;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid transparent;
  border-radius: 0.2em;
  cursor: pointer;
  transition: all 100ms ease-in;
}

.cc__icon.not-selected {
  opacity: 0.45;
}

.cc__icon.selected {
  border: 1px solid #000;
}

.cc__icon--visa {
  background-image: url("../images/cc-icon-visa.png");
}

.cc__icon--mastercard {
  background-image: url("../images/cc-icon-mastercard.png");
}

.cc__icon--amex {
  background-image: url("../images/cc-icon-amex.png");
}

.cc__icon--discover {
  background-image: url("../images/cc-icon-discover.png");
}

.cc__icon--other {
  background-image: url("../images/cc-icon-other.png");
}

＆＃13;

<label for="cardType">Select your Card Type</label>

<div class="cc__card">
  <input id="cc-icon-other" type="radio" name="credit-card" value="other" tabindex="1" />
  <label class="cc__icon cc__icon--other" for="cc-icon-other">
    <span class="sr-only">Other</span>
  </label>
</div>

<div class="cc__card">
  <input id="cc-icon-visa" type="radio" name="credit-card" value="visa" />
  <label class="cc__icon cc__icon--visa" for="cc-icon-visa">
    <span class="sr-only">Visa</span>
  </label>
</div>

<div class="cc__card">
  <input id="cc-icon-master-card" type="radio" name="credit-card" value="mastercard" />
  <label class="cc__icon cc__icon--mastercard" for="cc-icon-master-card">
    <span class="sr-only">MasterCard</span>
  </label>
</div>

<div class="cc__card">
  <input id="cc-icon-discover" type="radio" name="credit-card" value="discover" />
  <label class="cc__icon cc__icon--discover" for="cc-icon-discover">
    <span class="sr-only">Discover</span>
  </label>
</div>

<div class="cc__card">
  <input id="cc-icon-american-express" type="radio" name="credit-card" value="amex" />
  <label class="cc__icon cc__icon--amex" for="cc-icon-american-express">
    <span class="sr-only">American Express</span>
  </label>
</div>

＆＃13;

但是当我进入收音机组时，最后一个单选按钮被聚焦而不是第一个，如下图所示：

当用户选中收音机组时，我需要关注第一个单选按钮。在Chrome和FF的最新版本中，焦点移动到最后一个单选按钮（美国运通），但在IE 11中它移动到第二个单选按钮（Visa）。

这里使用的唯一JS是一个onchange事件处理程序，它只读取所选单选按钮的id属性。

有人可以提供任何建议吗？

Answer 1

基本上，单选按钮是一个充当单个元素的组，因为它只保留一个值。通过标签指向收音机组，您将转到第一个项目，然后使用您在组内导航的箭头键。

焦点可以通过以下方式转移到广播组：


Tab键

定位标签的访问键或助记符

激活标签（通过辅助技术机制）




Tab键可在单选按钮组和其他小部件之间移动焦点。


当焦点在群组上且没有选择单选按钮时：

按Tab键将焦点移动到组中的第一个单选按钮，但不选择单选按钮。

Shift + Tab键按下可将焦点移至组中的最后一个单选按钮，但不会选择单选按钮。



当焦点移动到选择了单选按钮的组时，按Tab键和Shift + Tab键将焦点移动到单选按钮，即   检查。

向上箭头和向下箭头键可移动焦点和选择。

向上箭头键按下可通过组中的单选按钮向前移动焦点和选择。如果第一个单选按钮有   焦点，然后焦点和选择移动到最后一个单选按钮   群组。

向下箭头键按下可通过组中的单选按钮向后移动焦点和选择。如果最后一个单选按钮有焦点，   然后焦点和选择移动到组中的第一个单选按钮。

空格键按键检查当前具有焦点的单选按钮。



重新进入组时，焦点将返回到上一个焦点（带有选择集的项目）。

按Tab键退出组并将焦点移至下一个表单控件。

按Shift + Tab键退出组并将焦点移至上一个表单控件。

还有一个jQuery插件。

标签到一个广播组会将其焦点移到最后一个单选按钮而不是第一个

1 个答案: