Split the keyboard using a group of radio buttons

Question

It seems to be simple, but for me it is a little for me. Given the following (valid xhtml transient) code:

<form action="weird.html">

           <label for="test1">T1</label>
           <input type="radio" id="test1" name="test" value="1" />

           <label for="test2">T2</label>
           <input type="radio" id="test2" name="test" value="2" />

           <label for="test3">T3</label>
           <input type="radio" id="test3" name="test" value="3" />

           <label for="test4">T4</label>
           <input type="radio" id="test4" name="test" value="4" />

           <label for="test5">T5</label>
           <input type="radio" id="test5" name="test" value="5" />

        </form>

Why can't I switch between the switches? This problem seems to be due to the fact that they all have the same name attribute, but for me it seems pretty contradictory as far as accessibility is available. Why does the focus state only apply to one? Is it because a group is considered as one element? Are access keys the only solution other than Javascript?

Answer 1

, , , . .

Answer 2

, , , TABINDEX, .

<input type="radio" id="test5" name="test" value="5" tabindex="5" />

, .

Answer 3

, - , . ; 10 , , 10 , .

If they are not in the same group, you can switch between them. In the example below, T5 will get a separate tab focus for the rest:

<form action="weird.html">

       <label for="test1">T1</label>
       <input type="radio" id="test1" name="test" value="1" />

       <label for="test2">T2</label>
       <input type="radio" id="test2" name="test" value="2" />

       <label for="test3">T3</label>
       <input type="radio" id="test3" name="test" value="3" />

       <label for="test4">T4</label>
       <input type="radio" id="test4" name="test" value="4" />

       <label for="test5">T5</label>
       <input type="radio" id="test5" name="test2" value="5" />

    </form>