Tabs Component

When designing tabs, you should use it to alternate between views within the same context, not to navigate to different areas. This is the single most important point, because staying in place while alternating views is the reason we have tabs in the first place. (Nielsen Norman Group (opens in a new tab))

If people do need to compare the info behind different tabs, then having to switch back and forth puts an added burden on their short-term memory, increases cognitive load and interaction cost, and lowers usability compared to a design that puts everything on one big page. (Nielsen Norman Group (opens in a new tab))

Make sure that the highlighting is prominent enough so people can tell which tab is selected. (Nielsen Norman Group (opens in a new tab))

The unselected tabs remind the user of the additional options. If the non-highlighted tabs are faded too much into the background, there's a risk that users will never click them and never discover the many hidden features. (Nielsen Norman Group (opens in a new tab))

Multiple rows create jumping UI elements, which destroy spatial memory and thus make it impossible for users to remember which tabs they've already visited. Also, multiple rows are a sure symptom of excessive complexity: If you need more tabs than will fit in a single row, you must simplify your design. (Nielsen Norman Group (opens in a new tab))

Users usually more easily focus on the top, so do not place the row of tabs on the sides or the bottom, where users often overlook them. (Nielsen Norman Group (opens in a new tab))

Arrange the labels horizontally bordering one another so as to reduce the amount of space the user must traverse when skipping from tab to tab, and to ensure there is enough room to fit all of the necessary information onto each tab. The usual convention for navigation tabs is to make sure the tab bar spans the top width of the screen, as this helps establish the first level in the visual framework – with the navigation tabs serving as the top tier and providing the broadest channels to explore. (Interaction Design Foundation (opens in a new tab))

While an aria-label is not explicitly required for a tab list, Tabs should be labeled using a aria-label in the absence of an ancestor landmark. This will prevent screen readers from announcing non-focused tabs, allowing for a more focused experience. (React Spectrum (opens in a new tab))

The key to making tabs accessible is to toggle CSS display properties and some ARIA states on user click or focus events (e.g. toggle aria-selected, tabindex, and display:none/block; and/or aria-hidden='true/false'). (Carnegiemuseums (opens in a new tab))

Some accessibility labels require more descriptive text, particularly when the visible UI is ambiguous or not visible. For example, an icon button visually represents a “video camera,” requires additional information in its accessibility label to clarify the icon’s intent. (Material Design 3 (opens in a new tab))