bauerhorst

UX UI Designer & Director

Use tabs to organize and navigate among sets of content on the page.

They should appear above their corresponding content.
Name the tab labels contextually to allow the user to easily discern what content appears beneath it. Tabs group content together, so use descriptive labels that describe the tab content.
Choose from Bound and Unbound Tabs based on your business or visual hierarchy needs.
Bound Tabs and Unbound Tabs can be used based on your products need.
Use tabs conservatively on the page. If tabs don’t fit horizontally on the desktop view, left and right arrows appear to make navigation to hidden tabs possible. This might not be the best user experience, so use this extended functionality with discretion.
On smaller screens the left and right navigation arrows will display.
On mobile the tabs can turn into an Expand/Collapse Menu or a Dropdown Menu if there are too many tabs to fit on the mobile screen.
On mobile devices Bound Tabs (only) need a 16px padding on the left and right.
Tabs should be placed horizontally in a single row. If vertical tabs are needed for your project, please reach out to the DLS team.

Keyboard

Tabbing onto the tabs focuses the tab group, which operates as a single control.
Pressing the left and right arrow keys moves focus to the next or previous tab.
Moving to the next or previous tab updates the related tab content.
Pressing tab moves onto the next focusable element, leaving the tab group.

Screenreader

On focus of the tab group, the screen reader reads the currently selected tab title and number of tabs.
Pressing left and right arrow keys announces the previous and next title and number of tabs.