可通过键盘导航的纯文本 HTML 单选按钮？答案

【问题标题】：Text-only HTML radio buttons that are keyboard-navigable?可通过键盘导航的纯文本 HTML 单选按钮？
【发布时间】：2018-02-21 20:46:05
【问题描述】：

此线程 (Text only radio buttons) 提供了一种方法来制作仅显示文本的单选按钮，并由一个边框包围，当按钮被选中时，该边框会改变颜色。

问题是键盘导航在此设置中不起作用。这并不奇怪。它隐藏了单选按钮并仅显示标签。

有没有办法让纯文本单选按钮与键盘导航一起使用？

谢谢。

【问题讨论】：

标签： html css radio-button accessibility

【解决方案1】：

我能想到的没有 Javascript 的唯一解决方案是在不使用 display: none 的情况下使按钮不可见，因为它不会呈现按钮，因此您无法导航它。

这可以通过opacity 完成。这将使它不可见，但它仍会原地不动。为了不干扰其他元素，可以设置为position: absolute。所有的麻烦都过去了。

见：

label {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: solid 2px red;
}

input[type="radio"] {
 opacity: 0;
 position: absolute;
}

input[type="radio"]:checked + label {
  border: solid 2px green;
}

<input type="radio" id="test" name="jeff">
<label for="test">Pizza</label>
<input type="radio" id="test2" name="jeff">
<label for="test2">Steak</label>

CBroe 提到的一个附加功能是使用.visuallyhidden 类，而不仅仅是使用不透明度。兼容性可能会更好。

input[type="radio"] {
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0;
}

【讨论】：

不透明度是一种方式，另一种方式是来自visuallyhidden 的css-tricks.com/places-its-tempting-to-use-display-none-but-dont 类
您可能希望通过input[type="radio"]:focus + label 扩展最后一条规则的选择器 - 然后在单选按钮之间进行左/右箭头导航以切换哪个是选中的也可以。或者更确切地说，添加一个具有不同样式的新规则，以便用户可以区分选中状态和焦点状态。
我尝试使用top: -999999px 添加到答案中，但是当我更改单选按钮时，这使得页面一直向上。视觉隐藏的类可能会更好。我会更新答案。

【解决方案2】：

以下 W3C 页面描述了一种使用 ARIA 制作自定义无线电元素的方法：

ARIA radiogroup and radio Example

您不应该对原生单选元素使用任何 CSS 技巧，因为这可能会导致意外行为。例如，使用屏幕阅读器聚焦原生 radio 元素可能不会总是在标签周围显示焦点指示符（轮廓），而是在复选框周围显示，如果该复选框已隐藏，这对于视力低下的人来说是个问题。

【讨论】：