Universal / LIVE LAB
Back to SnippetsKeyboard-accessible tabs with roving focus
A dependency-free tabs pattern with complete ARIA relationships, roving tabindex, keyboard navigation, and responsive overflow.
HTMLCSSJavaScript
Receipt: one tab stop, four navigation keys, zero hidden focus traps.
What this is
Arrow keys, Home, End, click, and one selected panel.
Use tabs when several closely related views share the same context and visitors should switch without leaving the page.
This follows the expected single-tab-stop keyboard model instead of turning every tab into a separate stop.
Use it
- Keep a one-to-one ID relationship between every tab and panel.
- Test click, Left/Right, Home/End, zoom, narrow overflow, and focus visibility.
Make it yours
- Add or remove tab/panel pairs while keeping every aria-controls and aria-labelledby ID unique.
- Choose automatic activation, as shown, or require Enter/Space for expensive panels.
Reuse contract
Supported environments
- Current Chrome, Edge, Firefox, and Safari
- No framework required
Security notes
- Tab labels and panel content must be rendered as text or sanitized if they originate outside your codebase.
- Do not use hidden panels as an authorization boundary; their content still belongs to the page.
Loading the isolated live lab…