Can you tab through all radio buttons?

Question

I have a list of radio buttons. when I tab through them, seems like only the first radio button or the one that is selected will get focused, the rest of the radio buttons will get skipped. checkbox didnt have this problem.

http://jsfiddle.net/2Bd32/

I have a hard time to explain to my QA this is not a bug. can someone please explain to me why this happens.

Soccer: <input type="checkbox" name="sports" value="soccer"  tabindex="1" /><br />
Football: <input type="checkbox" name="sports" value="football"  tabindex="2" /><br /> 

<input type="radio" name="num" value="3" tabindex="3">3<br>
<input type="radio" name="num" value="4" tabindex="4">4<br>
<input type="radio" name="num" value="5" tabindex="5">5<br>
<input type="radio" name="num" value="6" tabindex="6">6<br>
<input type="radio" name="num" value="7" tabindex="7">7<br>

Baseball: <input type="checkbox" name="sports" value="baseball"  tabindex="8"  /><br /> 
Basketball: <input type="checkbox" name="sports" value="basketball"  tabindex="9"  />

Stichometry

Seems like your browser to me. What browser are you using? Have you tried it in other browsers? – Titillate

tried firefox, ie9 and chrome – Stichometry

Keep in mind that 'fixing' default behavior leads more than often to notorious bugs....if you are paid by the hour, go for it, if you are in a fixed time/budget project be wise.... – Tabular

For me, having (separate) name attributes on the radio btns was the solution. – Revoice

Answer 1

You can cite the W3C as your source, here and here.

Essentially a radio button is a group that functions as a single element since it retains only a single value. Tabbing to a radio group will bring you to the first item and then using the arrow keys you navigate within the group.

• Focus can move to a radio group via:
  • The Tab key
  • An Access Key or mnemonic targeting the label
  • Activation of the label (through Assistive Technology mechanism)
• The Tab key moves focus between radio button groups and other widgets.
• When focus is on the group and when no radio button is selected:
  • Tab key press moves focus to the first radio button in the group, but does not select the radio button.
  • Shift+Tab key press moves focus to the last radio button in the group, but does not select the radio button.
• When focus moves to the group in which a radio button is selected, pressing Tab and Shift+Tab keys move focus to the radio button that is checked.
• Up Arrow and Down Arrow keys move focus and selection.
  • Up Arrow key press moves focus and selection forward through the radio buttons in the group. If the first radio button has focus, then focus and selection move to the last radio button in the group.
  • Down Arrow key press moves focus and selection backward through the radio buttons in the group. If the last radio button has focus, then focus and selection move to the first radio button in the group. * Space Bar key press checks the radio button that currently has focus.
• When re-entering the group, focus returns to the point of previous focus (the item with selection set).
• Pressing the Tab key exits the group and moves focus to the next form control.
• Pressing the Shift+Tab keys exits the group and moves focus to the previous form control.

Ptolemaic

I've written a jQuery plugin and an Angular Directive that should make any set of radio buttons individually focusable via TAB. Might be useful to someone. :) – Schutt

is it possible to outline the radio group when no radio from the group is selected yet? – Whimper

Answer 2

Radio buttons with one name is like single control (like input or select), you can change it value with arrow keys, tab key moves focus to another control.

Fidgety

Answer 3

Not sure if this is still an issue for anyone but I found a solution. As stated above, this is not a bug, this is default behavior. We just need to think of how we interact with a website differently. When you tab into a radio group of objects, you need to then use the arrow keys to navigate within that set of inputs and then tab or shift+tab to get out of that set of inputs.

https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-1/radio-1.html

Gigot

Answer 4

If you are using angularjs, you can control radio button directly with ng-model by using same ng-model and removing name.

<input type="radio" value="0" ng-model="status">
<input type="radio" value="1" ng-model="status">

Now one more advantage beside tab press is that you can first focus through the radio button without actually selecting it. You can then select by pressing space.

Kurd

Answer 5

I could not find answers anywhere, just parts of the solution or puzzle, so I decided to figure it out and prove it can be done. When you run the snippet below, do not select a radio button but rather click near to them, then hit the tab key, and you will see it selects the first one. Then it will select second and third etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="buttonArea" style="width:100%;height:100%;">
        <label>Audi E-Tron</label><input type='radio' id='car1' name='car' value='Audi E-Tron'>
        <label>Bolt EV</label><input type='radio' id='car2' name='car' value='Bolt EV'>
        <label>Leaf EV</label><input type='radio' id='car3' name='car' value='Leaf EV'>
        <label>Tesla Model 3</label><input type='radio' id='car4' name='car' value='Tesla Model 3'>
    </div>
</body>
</html>

<script>
$(document).keydown(function(event) {

var car1 = document.getElementById("car1");
var car2 = document.getElementById("car2");
var car3 = document.getElementById("car3");
var car4 = document.getElementById("car4");

// 9 represents the tab keycode of the document keydown event. 

event.preventDefault(); // this prevents the tab from doing its default action.

    if(event.keyCode == 9 && car1.checked == false && car2.checked == false && car3.checked == false && car4.checked == false) {         
        car1.checked = true; // This checks the radio option.
    }
    else if (event.keyCode == 9 && car1.checked == true) { 
        car2.checked = true;
    }
    else if (event.keyCode == 9 && car2.checked == true) { 
        car3.checked = true;
    }
    else if (event.keyCode == 9 && car3.checked == true) { 
        car4.checked = true;
    }
    else if (event.keyCode == 9 && car4.checked == true) { 
        car1.checked = true;
    }

    car1.blur();    car2.blur();    car3.blur();    car4.blur();
})
</script>

Howzell

Hey bud, so your answer pertains to the question, but I would refrain from asking people to give feedback to your answer. Remember the forum is used for us to provide answers to developers questions. (codereview.stackexchange.com <-- check that out.) – Pluvious

No worries bud, everyone starts somewhere, you're on the right track. :) – Pluvious