使隱藏的單選按鈕成爲可選/ 508標準

Question

首先，I know there is a duplicate，但我試過解決方案，它不適用於我。

所以，我需要一個人造分段的控件是tabbable，或至少鍵盤可選。獲取Tab鍵以突出顯示按鈕很容易 - 我只是添加

tabindex="0" 

到我想成爲tabbable的元素。問題是，雖然我可以讓它幾乎看不到藍色輪廓，但我無法選擇突出顯示的按鈕。

中的其他問題提出的解決方案是讓我的單選按鈕爲零的不透明度可見，但未能做任何事情，但毀了按鍵間距。

我能想到的最後一個相關的是單選按鈕本身設置爲。

display:none 

只是要absoluetly清楚，用鼠標選擇這個工作正常 - 鍵盤控制不起作用。 那麼，有什麼想法？

頁面代碼，以防萬一你需要它

<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

如果我知道你要完成，你會樣式輸入的標籤，以反映在視覺上隱藏的無線輸入的狀態（比如什麼：不集中，不檢查，專注但未檢查，專注和檢查）。

當您第一次進入無線電控制時，第一個選項將被選中但未被選中。然後，您可以通過按空格鍵檢查/選擇第一個選項，或者使用箭頭鍵檢查/選擇相鄰的選項。

無線電控制中的按下標籤會將您帶到頁面上的下一個標籤頁元素，而不是無線電控制中的下一個選項。

此外，在您的上面的代碼（OP）中，您的無線電輸入元素缺少名稱屬性，這意味着您的for循環產生的每個無線電輸入都被視爲單獨控件，而不是一個控件的多個選項。

而且根據WebAIM on keyboard accessibility testing and tabindex，只有非鏈路和非表格元素需要的tabindex =「0」：

的tabindex =「0」允許除了鏈接和形式的元件的元件以接收鍵盤焦點。它不會更改Tab鍵順序，但會將元素放置在邏輯導航流中，就好像它是頁面上的鏈接一樣。

運行下面的代碼片段來查看工作示例。文本片段將提供更多參考。

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

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