Tabs
An underline indicator on the selected tab. aequitas.js adds click and arrow-key switching.
Examples
Tabs
Everything at a glance.
Recent changes, newest first.
Preferences for this project.
Anatomy
.tabs[role=tablist] | The row, with a hairline below. The underline slides to the selected tab where anchor positioning is supported. |
> [role=tab] | Direct children, usually <button>s, each with aria-selected and aria-controls. |
[role=tabpanel] | One per tab, anywhere on the page, with the id the tab points at. Inactive panels carry hidden. |
API
| Attribute | Values | Description |
|---|---|---|
role | tablist | Required on .tabs: aequitas.js enhances every [role=tablist]. |
aria-selected | truefalse | On a tab: true draws the underline and full text colour. |
aria-controls | <id> | On a tab: the panel aequitas.js shows when the tab is selected. |
hidden | boolean | On a panel: hides it. aequitas.js toggles it. |
Behaviour
Clicking a tab, or moving with the arrow keys, sets aria-selected on it and false on the rest, makes it the only tab with tabindex=0, and toggles hidden on each tab's aria-controls panel. Without it the tabs render, but switching panels is up to you.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- Name the tablist with
aria-labeloraria-labelledby, point each panel back at its tab witharia-labelledby, and give a panel without focusable contenttabindex="0"so the keyboard can reach it. - aequitas.js sets a roving
tabindexas soon as it enhances the list, so Tab lands on the selected tab and the arrows move between tabs. - In right-to-left pages the arrows follow the reading direction: ← moves to the next tab.
| Key | Effect |
|---|---|
| ← / → | Moves to and selects the previous or next tab, wrapping at the ends. |
| Home / End | Moves to and selects the first or last tab. |