Creating Hidden Tabbable / 508 Compliant Switches

Question

Firstly, I know that there is a duplicate , but I tried the solution and it does not work for me.

So, I need the segmented segment control to be customizable, or at least the keyboard. Getting the tab key to highlight the button is very simple - I just add

tabindex="0"

To the element I want to be tabbable. The problem is that I can make it give a barely noticeable blue outline, I can not select the button highlighted.

The solution suggested in another question was to make my switches visible with zero opacity, but it did nothing but ruined the distance between the buttons.

The last thing I can think of is that the switches themselves switch.

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

, , , (: , , , ).

, . / , , / .

, , .

, (OP) , , , for, , .

WebAIM , tabindex = "0":

tabindex = "0" , , . , , .

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

Hide result

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>

Hide result