Example Start
Happy Time Pizza On-line Ordering System
Example End
Example Description
Type: Best Practice
Simple example of a tab Panel widget.
Keyboard Support
The following keyboard shortcuts are implemented for this example (based on recommended shortcuts specified by the DHTML Style Guide Working Group.):
If focus is on a tab button:
- Left / Up Arrow: Show the previous tab
- Right / Down Arrow: Show the next tab
- Home: Show the first tab
- End: Show the last tab
If focus is on an element in a tab panel:
- Control + Up Arrow/Left Arrow: Set focus on the tab button for the currently displayed tab.
- Control + Page Up: Show the previous tab and set focus on its corresponding tab button. Shows the last tab in the panel if current tab is the first one.
- Control + Page Down: Show the next tab and set focus on its corresponding tab button. Shows the first tab in the panel if current tab is the last one.
NOTE: Google Chrome does not propagate Control+ Page Up or Control+ Page Down to the web page when multiple tabs are open. This key combination will not function correctly in that case.
Example Markup
- ARIA 1.0: [aria-controls]
- ARIA 1.0: [aria-hidden]
- ARIA 1.0: [aria-labelledby]
- ARIA 1.0: [aria-selected]
- ARIA 1.0: [role="tab"]
- ARIA 1.0: [role="tablist"]
- ARIA 1.0: [role="tabpanel"]
Browser Compatibility
- osx: Firefox 3.6 (C)
- osx: Opera 10.0 (C)
- osx: Safari 5.0 (C)
- win: Firefox 3.6 (C)
- win: Internet Explorer 8.0 (C)
- win: Opera 10.0 (C)
- win: Safari 5.0 (C)