使隐藏的单选按钮符合Tabbable / 508标准 [英] Making my hidden radio buttons tabbable/508 Compliant

问题描述

首先，

另一个问题中提出的解决方案是使我的单选按钮的可见性为零，但是除了破坏之外什么也没做按钮间距。

我最后想到的是单选按钮本身设置为。

  display：none 
  

绝对要清楚，用鼠标选择此项效果很好-键盘控件不起作用。
那么，有什么想法吗？

页面代码

 < p class = segmented-control> 
 @foreach（RubricData中的var ruby​​）
 {
<输入类型= 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> 
  

解决方案

如果我了解您要完成的工作，您可以设置输入标签的样式，以反映视觉上隐藏的无线电输入的状态（例如：未聚焦且未选中，聚焦但未选中，聚焦并选中）。

当您第一个选项卡进入无线电控件时，第一个选项将被聚焦但未被选中。然后，您可以通过按空格键检查/选择第一个选项，也可以使用箭头键检查/选择一个相邻的选项。

从无线电控件中按选项卡会将您带到页面上的下一个可标签元素，而不是无线电控件中的下一个选项。

此外，在（OP）以上的代码中，您的单选输入元素缺少name属性，这意味着for循环生成的每个单选输入均被视为单独的控件，而不是多个选项

并根据 WebAIM上的键盘可访问性测试和tabindex ，只有非链接和非表单元素需要tabindex = 0：

tabindex = 0 允许链接和表单元素以外的元素获得键盘焦点。它不会更改制表符的顺序，而是将元素放置在逻辑导航流中，就像它是页面上的链接一样。

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

  .segmented-control {border：0 ;}。segmented-control label {背景：＃f00;边框：1px实线＃000； padding：10px 20px;边距：5px 0; max-width：200px;清除显示：inline-block; cursor：pointer;颜色：#fff;}。分段控制标签[for = 0] {背景：#ccc;}。分段控制标签[for = 1] {背景：＃ce0002;}。分段控制标签[ for = 2] {背景：＃ff690b;}。segmented-control标签[for = 3] {背景：＃ffb605;}。segmented-control label [for = 4] {背景：＃6ea458; } .segmented-control label [for = 5] {背景：＃3a7428;}。segmented-control input [type ='radio'] {边距左：-2rem;不透明度：0；位置：绝对；}。分段控制输入[type ='radio']：选中+标签{轮廓：3像素纯蓝色；}。分段控制输入[type ='radio']：focus：not（：checked）+标签{轮廓：3像素绿色；}  

 < p> < / p>< p>点按该字段集将使焦点集中在第一个选项上（但不会选择/检查它）。 p>一旦无线电控件具有焦点，您就可以点击空格键以选择该第一个选项，和/或使用向上/向下或向右/向左箭头来选择（检查）其他选项。< p>< p>< p> span style = color：green;> Green< / span>轮廓=重点但未选中。 < span style = color：blue;>蓝色< / span> < / p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>< p>一旦选择了选项，请按Tab键将焦点移至下一个可聚焦元素，该元素是字段集下方段落中的链接。 < fieldset class = segmented-control> <输入名称= radio1 id = 0 class = sc-label type = radio value => < label for = 0> < span class = sc-tooltip>-< / span> < / label> <输入名称= radio1 id = 1 class = sc-label type = radio> < label for = 1> < span class = sc-tooltip> 1< / span> < / label> <输入名称= radio1 id = 2 class = sc-label type = radio> < label for = 2> < span class = sc-tooltip> 2< / span> < / label> <输入名称= radio1 id = 3 class = sc-label type = radio> < label for = 3> < span class = sc-tooltip> 3< / span> < / label> <输入名称= radio1 id = 4 class = sc-label type = radio> < label for = 4> < span class = sc-tooltip> 4< / span> < / label> <输入名称= radio1 id = 5 class = sc-label type = radio> < label for = 5> < span class = sc-tooltip> 5< / span> < / label>< / fieldset> < p>带有< a href =＃&tabbable链接< / a>的段落。 

First off, I know there is a duplicate, but I have tried the solution and it does not work for me.

So, I need a faux-segmented control to be tabbable, or at least keyboard selectable. Getting the tab key to highlight the button is easy - I just add

tabindex="0"

To the element I want to be tabbable. Problem is, while I can get it to give the barely perceptible blue outline, I cannot select the button that's highlighted.

The solution proposed in the other question was to make my radio buttons visible with an opacity of zero, but that failed to do anything but ruin the buttons spacing.

The last pertinent I can think of is that the radio buttons themselves are set to.

display:none

Just to be absoluetly clear, selecting this with the mouse works fine - keyboard controls do not work. So, any ideas?

Page code, just in case you need it

<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>

解决方案

If I understand what you're trying to accomplish, you would style the input's label to reflect the state of the visually hidden radio input (such as: not focused and not checked, focused but not checked, focused and checked).

When you first tab into the radio control, the first option will be focused but not selected. You can then either check/select the first option by pressing spacebar or you can check/select an adjacent option using the arrow keys.

Pressing tab from within the radio control will bring you to the next tabbable element on the page, not the next option in the radio control.

Also, in your code above (OP), your radio input elements are missing a name attribute which means that each of your radio inputs that your for loop produces are treated as individual controls as opposed to multiple options for one control.

And according to WebAIM on keyboard accessibility testing and tabindex, only non-link and non-form elements need tabindex="0":

tabindex="0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.

Run the code snippet below to see a working example. The snippet <p> text will provide some more reference.

.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>.

这篇关于使隐藏的单选按钮符合Tabbable / 508标准的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！