Tabs demo (keyboard + ARIA)
Tabs are a common UI pattern — and a common accessibility failure when built as click-only elements. This micro-demo compares a broken “tabs” row (BEFORE) with a real tablist that supports keyboard navigation and communicates relationships (AFTER).
AFTER mode
Keyboard: Tab to reach the tabs · ←/→ to move · Home/End · Enter/Space (manual mode)
BEFORE: click-only “tabs” (divs)
These look like tabs, but they’re just <div> elements with click handlers. They don’t expose tab semantics, and keyboard support is missing.
Overview
Settings
History
Overview
This panel updates on click, but the UI isn’t a real tablist.
What’s broken:
- No
role="tablist"/role="tab"/role="tabpanel"semantics. - No relationship attributes (
aria-controls,aria-labelledby). - No arrow-key navigation between tabs.
- All “tabs” are focusable (wastes Tab stops), and focus styling is weak.
AFTER: real tablist (keyboard + ARIA)
Activation: Automatic (arrow keys also select)
Overview
Arrow keys move focus across the tabs. In automatic mode, moving focus also changes the selected tab.
Settings
In manual mode, arrows only move focus. Press Enter or Space to activate the focused tab.
History
Only the active panel is shown. Inactive panels are hidden with hidden.
Selected tab: Overview (automatic activation)