Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you tab through all radio buttons?

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"  /> 
like image 292
qinking126 Avatar asked Jan 14 '13 16:01

qinking126


People also ask

Can you tab through radio buttons?

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.

Can multiple radio buttons be checked?

Only one radio button in the group can be selected. If the radio button is selected, its checked property is true .

How do I add Tabindex to radio button?

The tabindex attribute must be placed by default on the container of each radio button, and its value set dynamically according to the state of the radio buttons: If no button is selected: tabindex="0" on the first and last radio button of the group and tabindex="-1" on the other radio buttons.

Should radio buttons be preselected?

Give people control and align with their expectations (Good): It is better to have a selected radio button by default, given that people cannot deselect and set the button back to its original state once one has been selected. A default selection sets the correct user expectation.


2 Answers

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.
like image 51
j08691 Avatar answered Oct 05 '22 18:10

j08691


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.

like image 31
antejan Avatar answered Oct 05 '22 17:10

antejan