نمط علامات التبويب: tablist وtab وtabpanel

A tab set shows one panel at a time and lets users switch between them. To assistive tech it must look like one widget, not loose links.

The pattern relies on three ARIA roles: a tablist that holds the tabs, each tab, and the panel each tab reveals. Get all three right.

Wrap your row of tabs in an element with role="tablist". This tells screen readers the children inside are a related set of tabs.

Build each tab from a real button with role="tab". A button is focusable and clickable for free, so you avoid extra wiring.

The content each tab shows gets role="tabpanel". This marks it as the region controlled by the currently selected tab.

Set aria-selected="true" on the active tab and false on the rest. Screen readers announce which tab is currently chosen.

Point each tab at its panel with aria-controls, set to the panel id. Users learn which region the tab opens.

Give the panel an aria-labelledby that points back to its tab. Now the panel borrows the tab text as its accessible name.

Only one panel should show at a time. Add the hidden attribute to the panels whose tab is not selected so they leave the page.

A tablist deserves an aria-label describing its purpose, like Account settings. Users hear what the whole set of tabs is for.

Put together, a screen reader announces something like Profile, tab, selected, 1 of 3. That orientation is exactly what makes tabs usable.

You are wiring up the container that holds your row of tabs. Which role belongs on it?

You learned the tablist, tab, tabpanel trio. Mark the selected tab, link each tab to its panel, and hide the inactive ones.