Keyboard Focus Breaking with Radio Button Group

Question

It seems simple, but this has been a bit of a headscratcher for me. Given the following (valid xhtml transitional) 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 is it that I can't tab between radio buttons? This issue seems to be because they all have the same name attribute, but that seems rather counter-intuitive to me as far as accesbility goes. Why does the focus state only get applied to one? Is this because the group is treated as a single element? Are access keys the only non-Javascript solution here?

Answer 1

You actually use the arrow keys to move within the radio buttons because as you said, they are treated as a single element. This is normal behavior.

Answer 2

As James and Tatu said that is normal, I don't know if you have used "TABINDEX", it might work.

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

But as they are treated as single element it might not work.

Answer 3

Yes, each radio button group is treated as one form element - if you want to skip between the group elements then use the arrow keys. It does make sense; if you're tabbing through a long form with a group of 10 radio buttons halfway down, you'd get annoyed if you had to tab through all 10 radio options before moving to the next form item.

If they're not in the same group, then you can tab between them. In the example below, T5 will gain separate tab focus to 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>