Tablist

A tablist is a user interface component composed of a set of labeled tabs that allow users to switch between different content panels within the same view. Each tab acts as a control; selecting a tab reveals the associated panel and hides the others. Tablists are common in web applications, desktop software, and browser interfaces, where they help organize related content in a compact space.

In web accessibility, the WAI-ARIA Tab Design Pattern specifies roles and properties to convey structure to assistive technologies: the container has role="tablist", each tab has role="tab", and each panel has role="tabpanel". The relationship is reinforced with aria-controls on tabs to point to their panel, and aria-labelledby on panels to point back to their tab. The active tab gets aria-selected="true" and focus, while others have aria-selected="false".

Interaction and behavior: The active tab determines which panel is visible. Users typically switch tabs with keyboard navigation: Left and Right arrows move focus among tabs; Home and End jump to the first and last tabs. Activating a tab (via Enter/Space or direct focus on a button) shows its panel and updates focus to the tab. The implementation should ensure only one panel is visible at a time and that focus remains predictable after changes.

Variants and considerations: Tablists can be horizontal or vertical, and may be built with button elements or accessible components provided by UI frameworks. Styling should clearly indicate the active tab and the relationship to its panel. For dynamic content, update ARIA attributes synchronously to maintain accessibility, and manage focus when panels are added or removed.