Tabs

Tabs are a navigational element which shows and hides content which, while similar, is disparate enough to warrant showing singularly.

Tabs are used to show similar content within the same view. The focused tab is done by setting [data-selected=*] to "true" class.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="s-tabs" role="tablist" aria-orientation="horizontal">
    <button class="s-tabs--item" id="user-profile" role="tab" aria-selected="true" aria-controls="user-profile"></button>
    <button class="s-tabs--item" id="user-activity" role="tab" aria-selected="false" aria-controls="user-activity"></button>
    <button class="s-tabs--item" id="user-devstory" role="tab" aria-selected="false" aria-controls="user-devstory"></button>
    <button class="s-tabs--item" id="user-mod" role="tab" aria-selected="false" aria-controls="user-mod"></button>
    <button class="s-tabs--item" id="user-settings" role="tab" aria-selected="false" aria-controls="user-settings"></button>
</div>
<div class="d-block js-tabpanel" role="tabpanel" aria-hidden="false" aria-labelledby="user-profile"></div>
<div class="d-none js-tabpanel" role="tabpanel" aria-hidden="true" aria-labelledby="user-activity"></div>
<div class="d-none js-tabpanel" role="tabpanel" aria-hidden="true" aria-labelledby="user-devstory"></div>
<div class="d-none js-tabpanel" role="tabpanel" aria-hidden="true" aria-labelledby="user-mod"></div>
<div class="d-none js-tabpanel" role="tabpanel" aria-hidden="true" aria-labelledby="user-settings"></div>
Profile content area
Item Applied to Description
aria-controls="[id]" tab Identifies the tabpanel the tab controls. (Source)
aria-hidden="[state]" tabpanel Indicates to screen readers if a tabpanel should be visible. (Source)
aria-labelledby="[id]" tabpanel Indicates which tab controls the tabpanel. (Source)
aria-orientation="[dir]" tabgroup Indicates if the tabgroup is oriented horizontally or vertically. (Source)
aria-selected="[state]" tab Identifies if the tab is currently selected within the tabgroup. Only one tab can be set to true at a time. (Source)
role="tab" tabgroup To help with screen readers, applied to each tab item. (Source)
role="tablist" tabgroup To help with screen readers, declare the wrapping tab container for the tabs. (Source)
role="tabpanel" tabpanel To help with screen readers, applied to each tab content panel. (Source)

Best Practices

Tabs should:

  • Only one tab should be selected at a time.
  • Tabs are not to be used for primary navigation.
  • Users should not have to move between tabs in order to complete a task.
  • Tabs group similar information.

Content Guidelines

Tabs should:

  • Tab labels should be short, distinct, and scannable. Ideally they are a word or two.
  • Tab label naming should be consistent within a group. For example, if most labels within a verb, then all should start with a verb. If most labels describe a status, all labels should describe a status. If it is difficult to do so, reconsider if you are grouping similar content.