如何使我的修改后的单选按钮可通过Tab键访问？

Question

我使用了一些CSS来制作适用于移动端的“单选”按钮，通过隐藏 input 并改用 label 元素。以下是代码，但为方便起见，我还在jsFiddle上创建了一个示例。

我的问题是，在使用键盘导航表单时会出现重大可用性问题：字段不再可用。我尝试将 tabindex 属性添加到隐藏的 input、label 和 div 中。前两个根本不起作用，将 tabindex 添加到 div 可行（div 被突出显示），但我无法与表单元素交互（例如，使用箭头键）。

只使用 CSS/HTML 是否可以解决这个问题？我宁愿不要回退到 JavaScript，但如果没有其他方法，我想我必须这样做。

<input type='text'>
<div class='radio-select'>
  <input checked="checked" id="no" name="yes_no" value="False" type="radio">
  <label for="no">
    No
  </label>
  <input id="yes" name="yes_no" value="True" type="radio">
  <label for="yes" >
    Yes
  </label>
</div>
<input type='text'>
<style>
.radio-select label{
    background: #f00;
    border:1px solid #ddd;
    border-radius:10px;
    padding:10px;
    margin:5px 0;
    max-width:200px;
    clear:both;
    display: block;
    cursor:pointer;
}
.radio-select input[type='radio']{
    display: none;
}
.radio-select input[type='radio']:checked + label{
    background:#0f0 !important;
}
.radio-select input[type='radio']:checked + label:before{
    content:"✔";
}
</style>

- fredley

Answer 1

如果你通过将的不透明度设置为0来隐藏它们，它们仍然可以通过tab键访问：

.radio-select input[type='radio']{
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute
}

jsfiddle

- W.D.

---

这会让它们聚焦，但并不会实际选择它们。我可以添加一些 JavaScript 来完成选择，但这并不是最理想的方法。 - fredley

你不应该将单选按钮的显示设置为none，而应该将它们的透明度设置为0，这样它们就不可见，但仍可以通过键盘进行选取。 - W.D.

@TomMedley，我已经更新了代码。现在你可以使用箭头键在标签标记之间切换。 - W.D.

在我的页面上（最简：只有一些在<label>中没有任何元素的tabindex="0"属性和没有CSS/样式的<input type="radio" />），我发现无法使用Tab键聚焦到单选框输入。您确定这行得通吗？ - Dai