Tabs are a component that subdivides page content into panes, which are displayed individually based upon which tab is active. They typically span the entire container width, and the active tab is clearly indicated.
Tabs are only used when there are two or more in the set.
When filtering the content of a tab, the filter controls should appear at the top of the active tab panel, beneath the row of tab links.
Only images and text may be displayed within a tab link.
Tab links should use meaningful text that clearly communicates what's within the corresponding tab panel.
Words within a tab link may hyphenate.
If there's insufficient space to display all of the text in a tab link, then truncate using ellipses "...". As always, mouse hover (or hold-press on touchscreen) should reveal the full text within a tooltip.
When the tab links exceed the available container width, they are clipped at the right fold.
Overflow controls (left/right arrows) are shown when the tab links are clipped. These function like the controls for filmstrip carousel.
On smaller breakpoints, tab links become a vertical option list.
Select one of the options in the vertical list to open an off-canvas modal that contains the tab content.
Selecting a tab (other than the active default) should modify the page URL so that users can easily share or return to the context.
Tab links become right-aligned, and their order is reversed, for languages that read right-to-left.
When focus moves into a tab list, place focus on the active tab.
When the tab list already has focus, Tab key moves focus to the next element outside the tablist, which is either the first focusable element inside the tab panel or the tab panel itself.
When the tab list already has focus, Left Arrow moves focus to the previous tab. If focus is on the first tab, move focus to the last tab.
When the tab list already has focus, Right Arrow moves focus to the next tab. If focus is on the last tab element, move focus to the first tab.
Home key moves focus to the first tab.
End key moves focus to the last tab.
Tabs are automatically activated, and their corresponding panel is displayed, when they receive focus.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
To be determined.
The tablist role is used as a container for the set of tabs.
If the tab list has a visible label, the element with role tablist has aria-labelledby set to a value that refers to the labeling element. Otherwise, the tablist element has a label provided by aria-label.
To be keyboard accessible, authors should manage focus of descendants for all instances of this role.
Elements with the role tablist have an implicit aria-orientation value of horizontal.
If the tablist element is vertically oriented, it has the property aria-orientation set to vertical.
Authors must ensure elements with role tab are contained in or owned by an element with the role tablist.
The currently active tab role defines which tabpanel is in focus. Authors should ensure that a selected tab has its aria-selected attribute set to true, that inactive tab elements have their aria-selected attribute set to false.
Each element with role tab has the property aria-controls referring to its associated tabpanel element.
A tabpanel role contains the content associated with a tab.
Authors should hide unselected tabpanel elements from the user until the user selects the tab associated with that tabpanel.
Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.