使我的隐藏单选按钮可选项卡/508 兼容

Posted 2023-03-06

【中文标题】使我的隐藏单选按钮可选项卡/508 兼容

【英文标题】：Making my hidden radio buttons tabbable/508 Compliant

【发布时间】：2016-12-21 18:28:34

【问题描述】：

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

所以，我需要一个可分页的人造分段控件，或者至少可以通过键盘选择。让 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>

【问题讨论】：

@UIDAlexD 你能指定是否需要 html 或 .NET 输入吗？将两者混为一谈可能会降低您获得好答案的机会。

@TylerH 这是一种奇怪的情况，所有元素/工具提示/css 颜色都必须来自数据库，因此是 foreach。这并不理想，但这是我必须做的。

请查看WAI-ARIA Authoring Practices 1.1。对于单选按钮，他们说Tab 进入单选按钮组，箭头键（不是Tab）用于在选项之间移动焦点。

【参考方案1】：

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

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

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

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

并且根据WebAIM on keyboard accessibility testing and tabindex，只有非链接和非表单元素需要tabindex="0"：

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

运行下面的代码 sn-p 以查看一个工作示例。 sn -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>.

【讨论】：

只需将Opacity:0; Margin-left: -7px; 添加到输入中即可使它们可选。只有最后一个冲击：没有迹象表明用键盘选择了哪个项目。我知道如何进行悬停突出显示，但是否有与此等效的键盘？

从头开始，我发现了一些可行的方法，但你的回答让我成功了 90%。真是太感谢你了。

很高兴有帮助！对于它的价值，:focus css psuedo 类应该针对具有焦点的元素（与选中或选中不同），而不管启动它的设备（鼠标单击、触摸或键盘选项卡） ，而:checked psuedo 类将针对选择的输入元素（同样，无论选择它的设备如何）。

对于未来的读者，在收音机上使用display: none; 将使其无法播放。上面的 .segmented-control input[type='radio'] 类在本示例之外也能正常工作。

【参考方案2】：

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

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

【讨论】：

这是个好主意，但它使它们无法被键盘和鼠标选择。不过，请为尝试 +1。

@UIDAlexD 我已经稍微更新了我的示例以使其更清晰。收音机可以通过键盘和鼠标进行选择。 :)