Example Start

Happy Time Pizza On-line Ordering System

How get the text "crust"

Select Crust

Select Vegetables

Select Carnivore Options

Select Delivery Method

Test and information

  • test
  • and more

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

Browser Compatibility