INTERACTIVE EXAMPLE
Responsive Tabs with Keyboard Support
Choose a tab to show its panel. Use the Left and Right Arrow keys to move between tabs, or Home and End to jump to the first or last tab. On small screens, the tab row scrolls horizontally.
Keep related information together
Tabs let people switch between related panels without leaving the page. Use them when the content belongs together and the labels clearly describe each panel.
Connect each tab to its panel
Give every tab a unique ID and an aria-controls value. The matching panel references that tab with aria-labelledby. Keep aria-selected and the roving tab stop in sync when selection changes.
Support keyboard interaction
Only the selected tab is in the normal Tab sequence. Arrow keys move and activate tabs; Home and End move to the first and last tab. Visible focus styling helps people track their position.
Adapt without hiding the controls
The tab row remains available on narrow screens and can scroll horizontally. Avoid hover-only controls, and make sure labels and panel content remain readable when text is enlarged.
Try it: select a tab, then use your keyboard to move through the tab row. This standalone example uses native buttons and does not require jQuery.