Overview
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly horizontally, at the top edge. When a tabbed interface is initialized, one tab panel is always displayed.
Usage
Use when
- You want to quickly switch between sibling views underneath a larger organizing principle/context.
- You want to organize content into meaningful sections that occupy less screen space.
- Add visual consistency.
|
Don’t use when
- You need primary means of navigation.
- Grouping unrelated content.
- You want to organize content that needs to be seen by the user at the same time.
- You want to hide primary user action element.
- You want to hide critical content.
Specifications
- Tabs should always be placed on top of the content they represent.
- Tabs differ from primary forms of navigation, such as Navbars, in that they are considered to be related to each other (i.e. types of media, genres of music, etc…)
- Users shouldn’t need to simultaneously see content from multiple tabs.
- The currently selected tab should be appropriately highlighted.
- Always have one tab pre-selected.
- Tabs should be easy to scan and thus should have short, meaningful labels or icons. Avoid long text labels that don’t truncate or wrap.
- Labels should either be all text or all icons, not both intermixed.
- Avoid nesting tabs.
- Make unselected tabs visible to avoid potentially hiding features/content from the user.
- Maintain consistency by not removing tabs when their function is unavailable. Instead offer an explanation as to why a tab’s content is unavailable and present the user with an action to remedy it.
- Always arrange tabs in an order that makes sense for the user.
Behaviors
- Try to organize tabs so that the most relevant, pre-selected tab is also the leftmost tab.
- When clicked, tabs should transition between views and highlight the selected tab.
- Disabled tabs should have a reduced opacity, not have hover styles, and not be interactive.
- Tab content should not disrupt the overall page layout in ways that negatively impact user experience.
- At a smaller screen size, the tabs collapse into a dropdown.
Editorial
- Tab labels should be in all uppercase.
- Avoid tab labels that contain more than 2 words.
- Avoid truncating tab labels.
Accessibility
- The element that serves as the container for the set of tabs has role
tablist
. - Each element that serves as a tab has role
tab
and is contained within the element with roletablist
. - Each element that contains the content panel for a
tab
has roletabpanel
. - If the tab list has a visible label, the element with role
tablist
hasaria-labelledby
set to a value that refers to the labelling element. Otherwise, thetablist
element has a label provided byaria-label
. - Each element with role
tab
has the propertyaria-controls
referring to its associatedtabpanel
element. - The active
tab
element has the statearia-selected
set totrue
and all othertab
elements have it set tofalse
. - Each element with role
tabpanel
has the propertyaria-labelledby
referring to its associatedtab
element. - If a
tab
element has a pop-up menu, it has the propertyaria-haspopup
set to eithermenu
ortrue
. - If the
tablist
element is vertically oriented, it has the propertyaria-orientation
set tovertical
. The default value ofaria-orientation
for a tablist element is horizontal. - When focus moves into the tab list, focus is placed on the active tab element. When the tab list contains the focus, focus moves to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.
Was this page helpful?
Thanks for your feedback!