Printer-friendly page
Screen-friendly pageRadio Example 1
Uses CSS to display radios.
Example
- Example using in-line ARIA markup | HTML source with in-line ARIA
- Example using ARIA markup from CLASS attribute information | HTML source of ARIA markup from CLASS attribute
Lunch Options
- Thai
- Subway
- Jimmy Johns
- Radio Maria
- Rainbow Gardens
Drink Options
- Water
- Tea
- Coffee
- Cola
- Ginger Ale
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"- States and properties:
aria-checkedaria-labelledby
Compatible Browsers
HTML Version
- Internet Explorer 6.0+
- Mozilla Firefox 1.5+
xhtml Version
- Mozilla Firefox 1.5+