tabs
An anchor-link table of contents, upgraded into an accessible tabs widget.
Use the keyboard. Tab into a tablist, then move with the arrow keys (wrap-around), Home and End. The first example selects on focus (automatic activation); the second only on Enter/Space (manual). Without JavaScript every example is a plain jump-link list above stacked, fully readable sections.
Default (automatic activation)
Overview
Arrow keys move the focus and the selection — the APG-recommended default when panels can be shown instantly.
Specifications
This panel has no focusable content, so the script gave it
tabindex="0" — press Tab from the
tablist to reach it.
Reviews
Panels may contain focusable content, like this link — then the panel itself is not focusable.
Manual activation (data-tabs-manual)
Profile
Arrow keys only move the focus here; nothing switches until you press Enter or Space.
Security
Manual activation suits panels that are expensive to show or would disturb the reading flow when flipped through.
Billing
Clicking (or tapping) a tab always selects it, in both activation modes.
Vertical (data-tabs-orientation="vertical")
Deep linking (data-tabs-deeplink)
Shipping
Select a tab and watch the URL: the fragment follows via
history.replaceState — no history spam, path and
query untouched.
Returns
Reload the page (or share the URL) with
#deeplink-returns — this tab opens directly. Every
example on this page reacts to matching hashes; this one also
writes them.
Payment
Foreign hashes (skip links, other anchors) are ignored — only an exact panel id selects a tab.