Automatic or manual tab activation
Tabs can be built to be activated automatically or manually. There are a couple subtle differences between each type:
- “Automatic” tabs become activated immediately upon focus via a mouse click or the arrow keys.
- “Manual” tabs can receive focus via the arrow keys, but require the user to press either
Enter
orSpace
, or click them with their mouse to activate them.
You can find additional guidance as well as examples of automatic and manually activated tab groups on the WAI-ARIA Authoring Practices Guide Tabs Pattern page.
Code examples
- More details and working examples
- You can also use radio buttons as controls. This will be easier to understand for screenreader users (as is done with this website’s tabs).
- Note: an
aria-selected
state is explicity required as some screenreaders will assume the tab is selected unless delaredfalse
.
Use semantic HTML where possible
<div class="tabs">
<div role="tablist">
<button role="tab"
aria-selected="true"
aria-controls="alpha-tab"
id="alpha">
Alpha
</button>
<button role="tab"
aria-selected="false"
aria-controls="bravo-tab"
id="bravo"
tabindex="-1">
Bravo
</button>
<button role="tab"
aria-selected="false"
aria-controls="charlie-tab"
id="charlie"
tabindex="-1">
Charlie
</button>
</div>
<div role="tabpanel"
id="alpha-tab"
aria-labelledby="alpha"
tabindex="0">
<p>Alpha is the first letter of the NATO alphabet</p>
</div>
<div role="tabpanel"
id="bravo-tab"
aria-labelledby="bravo"
tabindex="0">
<p>Bravo is the second letter of the NATO alphabet</p>
</div>
<div role="tabpanel"
id="charlie-tab"
aria-labelledby="charlie"
tabindex="0">
<p>Charlie is the best letter of the NATO alphabet</p>
</div>
</div>