Tabs
Back to complex components
Tabs are used to display information on different subjects within one area of a page. Interacting with a tab should show its associated content.
WHEN I click on a tab
THEN its associated content should be shown.
WHEN I use the 'Tab' key to focus on the tablist
AND I hit the left or right arrow key
THEN focus should move to the next (or previous) tab.
WHEN I use the 'Tab' key to focus on the tablist
AND I hit 'Tab' key again
THEN focus should move to the next item in the tab order (typically the tab panel), NOT the next tab.
WHEN A tabpanel is showing
THEN its associated tab should have aria-selected set to 'true', otherwise it should be 'false'
THEN its associated content should be shown.
WHEN I use the 'Tab' key to focus on the tablist
AND I hit the left or right arrow key
THEN focus should move to the next (or previous) tab.
WHEN I use the 'Tab' key to focus on the tablist
AND I hit 'Tab' key again
THEN focus should move to the next item in the tab order (typically the tab panel), NOT the next tab.
WHEN A tabpanel is showing
THEN its associated tab should have aria-selected set to 'true', otherwise it should be 'false'
More Information
The grouping of tabs should be contained within a tablist, and each tab should be should have an associated tabpanel. Aria-selected should be used on each tab to indicate which tabpanel is shown. Any tab not selected should be removed from the tab order. Aria-controls should be used on each tab to refer to its associated tabpanel, and aria-labelledby should be on each tabpanel to refer to its associated tab. The active tabpanel should be added to the tab order.