ARIA roles for an accessible tab interface

WHAT THIS TESTS The question checks whether you can build the WAI-ARIA tabs pattern correctly, both the role and state wiring and the expected keyboard interaction, which together let assistive tech describe the widget and let keyboard users operate it.

A GOOD ANSWER COVERS The structure uses three roles. A container element gets role tablist. Each clickable tab gets role tab. Each content region gets role tabpanel. State and relationships: the active tab carries aria-selected true and the others aria-selected false; each tab uses aria-controls to reference the id of the panel it shows; each panel uses aria-labelledby to reference the id of its tab, giving the panel an accessible name. The tablist should have an accessible name via aria-label or aria-labelledby. Keyboard behavior is critical: a roving tabindex keeps only the selected tab focusable with Tab, and Left and Right arrows move between tabs, with Home and End jumping to first and last. Tab then moves from the tab to its panel.

COMMON WRONG ANSWERS Making every tab tabindex 0 forces users to Tab through all tabs, defeating the arrow key model. Omitting aria-selected leaves screen readers unable to announce the current tab. Forgetting aria-controls and aria-labelledby breaks the announced relationship between tab and panel. Using clicks only with no keyboard support excludes keyboard users.

LIKELY FOLLOW-UPS Should tabs activate automatically on focus or only on Enter? Automatic suits cheap panels; manual suits expensive ones. How do you handle vertical tabs with aria-orientation? How does focus move into the panel? What if a panel has no focusable content?

ONE CONCRETE EXAMPLE A settings page has Profile, Security, and Billing tabs. The tablist is labeled Settings sections. Profile is selected, so its tab has aria-selected true and aria-controls the profile panel id, and that panel has aria-labelledby the Profile tab id. Right arrow moves focus to Security; pressing Enter shows the Security panel, and a screen reader announces Security tab selected.