Tablist, Tab & Tabpanel

This example works well: Example at Jim Thatcher's Site adapted from an example that's commonly available

Keypoints to Consider for Tab Interfaces

Keyboard access has to be coded using JavaScript:

• Tab key brings you to the tablist (the set of little click-able boxes at the top or on the side)
• Arrow keys let you chose a tab from the tablist
• The tabpanel itself (The box that holds the info) gains focus when you are in the tablist and hit the tab key. This is accomplished by just placing tabindex=”0” on the html element that makes the tabpanel. It is important so that screen reader users can easily exit the tablist and read the tabpanel, even if the tabpanel doesn’t have a focusable element.

WAI-ARIA roles and states have to be managed:

• The list of tabs has role=”tablist” (the set of little clickable boxes at the top or the side)
• Each tab has role=”tab”, has an aria-controls attribute pointing to the associated tabpanel, and has an aria-selected attribute to indicate whether or not the tab is selected.
• Aria-selected is updated when the selection is changed
• Each tab panel (the larger box that holds the main content for the tab) has role=”tabpanel”