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 the top edge. ~ Source
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="first-tab-panel" id="first-tab">Active tab</button>
<button role="tab" aria-selected="false" aria-controls="second-tab-panel" id="second-tab" tabindex="-1">Another tab</button>
</div>
<div role="tabpanel" id="first-tab-panel" aria-labelledby="first-tab">
<p><a href="#">Some link inside the tab panel.</a> Some more text inside the tab panel.</p>
</div>
<div role="tabpanel" id="second-tab-panel" aria-labelledby="second-tab" hidden>
<p>This tab panel is not active and therefore invisible.</p>
</div>
- Use
tablist
for the container that contains the tabs. - Use
tab
for the tab itself. - Use
tabpanel
for the tab panel, i.e. the content belonging to a tab.
- Set
aria-controls
on a tab to the ID of the panel that it belongs to. - Set
aria-labelledby
on an tab panel to the ID of the tab that belongs to it. - Set
aria-orientation
on an tablist-element tovertical
for vertical tabs (horizontal is the default
).
Key | Function |
---|---|
tab | Moves focus to first focusable element inside the active tab panel or the next one after the tabs if no focusable element inside the active tab panel. |
right | Opens the next tab if focus is on any tab. |
left | Opens previous tab if focus is on any tab. |
- Pressing tab while focus is on any tab will focus the first focusable element inside the active tab panel. If no focusable element is present in the active tab panel, the tabs component is left and the next focusable element receives focus.