Keyboard Focus Breaking with Radio Button Group

accessibility, forms, html, xhtml

Solution

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.

Problem

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?

Original source