Radio Example 2

Uses inline images to display radios.

Example

Keyboard Shortcuts

• Tab: Move focus between radio button groups
  • If no radio button has been checked, TAB moves focus to the first radio button in the group, but does not check the radio button
  • If no radio button has been checked, SHIFT+TAB moves focus to the last radio button in the group, but does not check the radio button
  • if a radio button is checked, TAB and SHIFT+TAB move focus to the radio button that is checked
• Up Arrow: Move focus to the radio button before the current radio button with focus, if the first radio button has focus, focus is moved to the last radio button. The radio button is checked.
• Down Arrow: Move focus to the radio button after the current radio button with focus, if the last radio button has focus, focus is moved to the first radio button. The radio button is checked.
• Space Bar: Checks the radio button that currently has focus

ARIA Roles and Properties used

• role="radiogroup"
• role="radio"
• role="presentation"
• States and properties:
  • aria-checked
  • aria-labelledby

Compatible Browsers

• Mozilla Firefox 1.5+