Tabs
Tabs allow users to explore multiple views of a related data set.
Default Example
When to Use
- Use tabs to organize content or data sets that do not need to be viewed in a single display.
When Not to Use
- Do not use tabs when content or data appearing in separate tabs may need to be compared.
- Do not use tabs when content or data is better viewed in a single display.
Examples
- Default Example (shown above)
- Icon Example
- Double Line Example
Usage
- Tabs appear horizontally. They are never stacked and do not wrap to a second line.
- Tabs have a minimum and maximum width. Labels truncate when necessary.
- Labels are left aligned.
- Display contextual icons to the left of the label. The right side of a tab is reserved for closing and dragging mechanisms.
- While there is not a specific limit to the number of tabs that can occur in a given set, try to group tabbed content into a reasonable number of tabs to make it easy for users to find content and navigate between options.
- On Desktop, tabular navigation (left/right scrolling) occurs on the right side of the tab menu and any “adding tab” mechanism occurs on the right.
- On Mobile, there is no navigation. The entire tabular set is horizontally scrollable.
Examples
Default with Icon
Default Double Line
Developer Notes
Markup structure
A tabbed content container is created by adding a class of spark-tabs
to an element. Inside of this element are two main wrapping elements: spark-tabs__nav
and spark-tabs__panels
.
The spark-tabs__nav
navigation element contains the elements that are used to navigate the tabbed content. There are a number of elements within this container and their roles are defined below:
- The
spark-tabs__scroll
wrapper element is the first element inside the navigation container and it is used to allow the horizontal scrolling of the tab buttons in cases where long tab names or limited available screen do not allow for the full display of individual tab labels. - The
spark-tabs__list
element is a list of the available tabs, and each individual list item has a class ofspark-tabs__tab
. Within each list item is an anchor tag,<a>
, which contains the labels of each tab and is the interactive control that triggers tab switching. The current tab is highlighted visually by theactive
class that is found on thespark-tabs__tab
list item. There should only be one active tab at a time. By default, the first tab in the list and its associated panel are the active items. If you’d like a specific panel to be active, theactive
class should be manually set to its controlling link’s list item. - The
spark-tabs__btns
wrapper element is also placed within the navigation element and it contains buttons used to navigate left and right through the tab list in the event scrolling is required to view the available tabs.
The panels element, spark-tabs__panels
, contains a list of tab panels that correspond to tabs defined in the tab list above. By default, clicking on an element in the tab list with the role="tab"
attribute will open an item with a corresponding index in the tab panels with the role="tabpanel"
attribute. More details about these ARIA roles can be found in the Accessibility tab.
Configurable settings
The following options may be passed when using new Spark.Tabs(el, {});
:
For all available methods and full API, refer to the component code on Bitbucket.
Default Single Line
Default with Icon
Default Double Line
Accessibility Notes
Because tabs are not native HTML elements, it is important to use appropriate markup to ensure that the tabs are accessible to screen-readers and other assistive devices. This is generally accomplished by using ARIA attributes for semantic enhancements. Javascript is then used to dynamically manage various attributes that are used to inform assistive devices of the current state of the tabs. The ARIA roles and attributes required to make the tabs component fully accessible are described below.
Tab navigation controls
The spark-tabs__nav
navigation element requires a role of menubar
, which is typically used to denote menus that are visible and presented horizontally.
The spark-tabs__list
element contains the actual list of tabs used for navigation and requires a role of tablist
to indicate to screen-readers and assistive devices that its child elements are selectable tabs. The spark-tabs__tab
list items have a role of presentation
as they do not have any functional or interactive importance but are semantically required to build a valid HTML list. This is explained further below.
As mentioned in the Developer Notes, the current tab will have an active
class applied to the list item, and there can only be one active tab at a time. If you intend to have a specific tab other than the first as the visible tab on page load, you will need to set the active
class on that tab’s list item.
Within each spark-tabs__tab
list item is an anchor tag, <a>
, that contains the label of the tab. This element has an href
attribute defined to make the element keyboard accessible. If an href
is not provided, make sure a tabindex="0"
is provided as a fallback to make sure it is keyboard-focusable. A role of tab
is then set to to this element to indicate that it is the mechanism for selecting tab content. The reason this element has role="tab"
instead of its parent <li>
is that the tab needs to be focusable directly, whereas the <li>
element is not a focusable element. The aria-controls
attribute is provided to indicate which tab panel the specific anchor controls. The value of this attribute is the id
of the associated tab panel.
If a specific tab is currently being displayed, an aria-selected
attribute is required to identify it as the currently selected tab. This is associated with the active
class discussed previously and they should be used in conjunction. If manually setting the initial current tab, both the active
class and aria-selected
attribute should be set. When a user interacts with the tabs, the aforementioned class and ARIA attribute will be dynamically managed by Javascript to remove the values from a tab if that tab is no longer the current tab and added to the current tab.
Included in the Tabs component are navigational aids that allow users to scroll the Tab list to the left or right in situations where all Tabs cannot fit in the viewport. These controls are housed in a spark-tabs__btns
container and consist of two Icon Buttons. Because there is no text provided within these buttons, they require aria-label
attributes to indicate their purpose to screen-readers and assistive devices.
Tab content panels
The spark-tabs__panel
containers hold the tab contents and should be uniquely identified with an id
attribute. The value of this id
is then used as the value of the aria-controls
attribute for the tab that controls the specific tab panel. A role of tabpanel
identifies the container as an individual tab panel to screen-readers and assistive devices. If a tab is initially hidden, an aria-hidden
attribute should be provided and set to true
, otherwise it should be set to false
if you intend for this tab to be the initial visible tab. Javascript will be used to manage the aria-hidden
state when a user interacts with different tabs, but this attribute and value should always be initially set to the desired value.