Tabs
Overview
Tabs are used on many websites when there are several different aspects of information to display. Having a tab setup allows for easier and faster navigation by users and does not tie up the webpage in contrast to having the data for the different aspects listed on page one after the other.
Be aware of how many tabs you have and the ability of the tab to fit on smaller screens. For responsiveness, tabs may be switched to [accordions] on smaller screen sizes. Alternatively, [accordions] may be a more useful approach if there are too many tabs or the tab labels are long. A maximum of 30 characters in length, including spaces if there are two tab choices; a maximum of 25 characters if there are three tabs and so on.
Contents
Design
This example is from the Data section of SAMHSA.
Functionality
On default,
- The first tab is selected. In this state the tab is not clickable and appears visibly as disabled. The tabs’ content is exposed.
- The other tabs are clickable and appear visibly as clickable.
OnClick / OnTab of a tab, that tab becomes the selected tab, it is not longer clickable and appears visibly as disabled. The tabs’ content is exposed.
Accessibility
Focus Expectations
- Tabs should activate automatically when receiving focus as long as associated tab panels are rendered quickly.
- Tabs should have visible
:focusstate. - Tabs should have visible
aria-selected="true"state
Labelling Expectations
- The element that wraps tabs has role tablist.
- Each tab has role tab and is contained within the element with role
tablist. - Each tab content panel has role tabpanel.
- Each
tabhas the property aria-controls referring to itstabpanel. - The active
tabhas aria-selected set totrueand all othertabelements have it set tofalse. - Each
tabpanelhas the property aria-labelledby referring to its associatedtab.
Keyboard Expectations
- Space or Enter = Activate Tab
- ← → = Cycles tab focus
- ↑ ↓ = Cycles tab focus (vertical tabs)
- Home = Focus first tab
- End = Focus last tab
Code
HTML
SCSS