使我隐藏的单选按钮 tabbable/508 兼容

Question

首先，I know there is a duplicate，但我已经尝试了解决方案，但它对我不起作用。

因此，我需要一个可制表的人造分段控件，或者至少 select 可使用键盘。让 Tab 键突出显示按钮很容易 - 我只需添加

tabindex="0"

我想成为可制表的元素。问题是，虽然我可以让它给出几乎难以察觉的蓝色轮廓，但我不能 select 突出显示的按钮。

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

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

display:none

明确地说，select用鼠标操作没问题——键盘控制不起作用。 那么，有什么想法吗？

页面代码，以备不时之需

<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

您可以使用标签来包裹输入，隐藏输入。

<style type="text/css">
    input[type="radio"] { opacity: 0; position: absolute; }
    input:checked + .sc-tooltip { background: red; color: white; }
    input:focus + .sc-tooltip { box-shadow: 0 0 3px 1px blue; }
</style>

<p class="segmented-control">
    <fieldset>
        <input type="text">
    </fieldset>

    <fieldset>
        <label>
            <input class="sc-label" type="radio" name="radio" id="radio1" checked>
            <span class="sc-tooltip">Tabbable</span>
        </label>

        <label>
            <input class="sc-label" type="radio" name="radio" id="radio2">
            <span class="sc-tooltip">Tabbable</span>
        </label>

        <label>
            <input class="sc-label" type="radio" name="radio" id="radio3">
            <span class="sc-tooltip">Tabbable</span>
        </label>
    </fieldset>

    <fieldset>
        <input type="text">
    </fieldset>
</p>

Answer 2

如果我理解您要完成的任务，您可以设置输入标签的样式以反映视觉上隐藏的单选输入的状态（例如：未聚焦且未选中、聚焦但未选中、聚焦并选中).

当您第一次进入单选控件时，第一个选项将获得焦点但不会被选中。然后，您可以通过按空格键 check/select 第一个选项，也可以使用箭头键 check/select 相邻选项。

在单选控件中按 Tab 键会将您带到页面上的下一个可标记元素，而不是单选控件中的下一个选项。

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

并且根据 WebAIM on keyboard accessibility testing and tabindex，只有非 link 和非表单元素需要 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.

运行下面的代码片段可以查看工作示例。片段

文本将提供更多参考。

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

Making my hidden radio buttons tabbable/508 Compliant

html

css

asp.net

accessibility

razor