Tab Panel Example 1
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
Happy Time Pizza On-line Ordering System
- Crust
- Veges
- Carnivore
- Delivery
Keyboard Shortcuts
- Left: Show previous tab when focus is on tab buttons
- Right: Show next tab tab wehn focus is on tab buttons
- Home: Show first tab when focus is on tab buttons
- End: Show last tab tab wehn focus is on tab buttons
- Control + PgUp and Control + Shift + Tab: Show next tab and restore focus to last control with focus or first control in tab if no previous focus
- Control + PgDn and Control + Tab: Show next tab and restore focus to last control with focus or first control in tab if no previous focus
NOTE: Internet Explorer does not propagate Control+Tab or Control+Shift+Tab to the web page when there are Internet Explorer Tabs open.
ARIA Roles and Properties
- NOTE: The selected tab panel is maintained by the browser and communicated to assistive technology through accessibility APIs. The browser communicates this information based on which
tabin thetablisthad focus last. Aaria-labelledbyattribute needs to be defined on everytabpanelthat points to the correspondingtabfor the selected state to be calculated by the browser correctly. - Role:
role="tablist" - Role:
role="tab" - Role:
role="tabpanel" - States and properties:
aria-labelledbyaria-hidden
