Tab Panel Example 1

Example

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 tab in the tablist had focus last. A aria-labelledby attribute needs to be defined on every tabpanel that points to the corresponding tab for the selected state to be calculated by the browser correctly.
• Role: role="tablist"
• Role: role="tab"
• Role: role="tabpanel"
• States and properties:
  • aria-labelledby
  • aria-hidden