使我隐藏的单选按钮可以/ 508符合

Question

首先,我知道有一个重复,但我已经尝试了解决方案,它对我不起作用.

因此,我需要一个虚拟分段控件才能使用,或者至少可以选择键盘.获取Tab键以突出显示按钮很简单 - 我只需添加

tabindex="0"

对于我想成为可能的元素.问题是,虽然我可以让它给出几乎不可察觉的蓝色轮廓,但我无法选择突出显示的按钮.

在另一个问题中提出的解决方案是使我的单选按钮可见,不透明度为零,但是除了破坏按钮间距之外没有做任何事情.

我能想到的最后一个相关是单选按钮本身被设置为.

display:none

只是要绝对清楚,用鼠标选择它可以正常工作 - 键盘控制不起作用. 那么,有什么想法吗？

页面代码,以防您需要它

<p class="segmented-control">
    @foreach (var ruby in RubricData)
    {
        <input type="radio" id="@ruby.Id" ng-model="rubricStandardId" value="@ruby.Id"/>
        <label for="@ruby.Id" class="sc-label" style="background-color:@ruby.RubricHexColor;" tabindex="0">@ruby.RubricSymbol
        <span class="sc-tooltip">@ruby.RubricStandard</span></label>

    }
</p>

Answer 1

如果我理解您要完成的任务,您可以设置输入标签的样式以反映视觉上隐藏的无线电输入的状态(例如:未聚焦且未检查,聚焦但未检查,聚焦和检查).

当您第一次进入无线电控制时,第一个选项将被聚焦但未被选中.然后,您可以通过按空格键来选中/选择第一个选项,也可以使用箭头键选中/选择相邻选项.

从无线电控件中按下选项卡将转到页面上的下一个tabbable元素,而不是无线电控件中的下一个选项.

此外,在上面的代码(OP)中,您的无线电输入元素缺少名称属性,这意味着您的for循环生成的每个无线电输入都被视为单独的控件,而不是一个控件的多个选项.

根据WebAIM的键盘可访问性测试和tabindex,只有非链接和非表单元素需要tabindex ="0":

tabindex ="0"允许除链接和表单元素之外的元素接收键盘焦点.它不会更改Tab键顺序,但会将元素放在逻辑导航流中,就好像它是页面上的链接一样.

运行下面的代码段以查看工作示例.代码段<p>文本将提供更多参考.

.segmented-control {
  border: 0;
}
.segmented-control label{
    background: #f00;
    border:1px solid #000;
    padding:10px 20px;
    margin:5px 0;
    max-width:200px;
    clear:both;
    display: inline-block;
    cursor:pointer;
    color: #fff;
}

.segmented-control label[for="0"] {
  background: #ccc;
}

.segmented-control label[for="1"] {
  background: #ce0002;
}

.segmented-control label[for="2"] {
  background: #ff690b;
}

.segmented-control label[for="3"] {
  background: #ffb605;
}

.segmented-control label[for="4"] {
  background: #6ea458;
}

.segmented-control label[for="5"] {
  background: #3a7428;
}

.segmented-control input[type='radio']{
    margin-left: -2rem;
    opacity: 0;
    position: absolute;
}

.segmented-control input[type='radio']:checked + label{
    outline: 3px solid blue;
}

.segmented-control input[type='radio']:focus:not(:checked) + label{
    outline: 3px solid green;
}

<p>Select this text then tab into the form radio control.</p>
<p>Tabbing into the fieldset will bring focus to the first option (but it will not select / check it).</p>
<p>Once the radio control has focus, you can hit spacebar to select that first option, and/or use up/down or right/left arrow to select (check) other options.</p>
<p><span style="color:green;">Green</span> outline = focused but not checked.  <span style="color:blue;">Blue</span> outline = focused + checked.</p>
<p>Once your option is selected, press tab to move focus to the next focusable element, which is the link in the paragraph below the fieldset.</p>
  
<fieldset class="segmented-control">
  <input name="radio1" id="0" class="sc-label" type="radio" value=>
  <label for="0">
    <span class="sc-tooltip">-</span>
  </label>
  
  <input name="radio1" id="1" class="sc-label" type="radio">
  <label for="1">
    <span class="sc-tooltip">1</span>
  </label>

  <input name="radio1" id="2"class="sc-label" type="radio">
  <label for="2">
    <span class="sc-tooltip">2</span>
  </label>
  
  <input name="radio1" id="3"class="sc-label" type="radio">
  <label for="3">
    <span class="sc-tooltip">3</span>
  </label>
  
  <input name="radio1" id="4"class="sc-label" type="radio">
  <label for="4">
    <span class="sc-tooltip">4</span>
  </label>
  
  <input name="radio1" id="5"class="sc-label" type="radio">
  <label for="5">
    <span class="sc-tooltip">5</span>
  </label>
</fieldset> 

<p>A paragraph with a <a href="#">tabbable link</a>.