Tabs

Tabs

Tabs are a common UI pattern for organizing information in conditionally displayed sections on the same page. However, their use is often a bit confused, particularly since the visual design of tabs can lead to misplaced expectations of their behavior.

Basic definition

True tabs use a set of layered sections of content, known as tab panels, and display one panel of content at a time. They are similar to an accordion, which also shows or hides information on click, but with horizontal design. Tabs are used to alternate between views within the same context or logically chunk information. For more information on tabs read the following article from the Nielsen Norman Group https://www.nngroup.com/articles/tabs-used-right/.

HTML implementation

Each semantic HTML tab should have role=tab. The tabs are nested in a list with role=tablist. When a certain list item is active, the associated section of content with role=tabpanel is displayed.

Recommendations

• Ensure your tabs are announced as such. They are not a plain list.
• Tabs can be navigated with arrow keys (left -right) (WCAG example, MDN docs)
• Tabs can be activated either manually (space or enter) or automatically (arrow keys) (W3 example)
• Using the tab key should focus content within the tab panel
• Shift+tab should return the user to the tab list
• The tabs should have separate styles for focused and selected.
• Use aria-labelled on content sections (elements with role=tabpanel)
• Use aria-selected for currently active tab (an element with role=tab)
• Use hidden attribute for tabpanel content that is not associated with active tab
• Consider using <section /> for your tab panel element.
• Consider using button elements for your role=tab element (MDN docs)
• Ensure your tabs display content already on the same page.
• Highlight the currently selected tab. Make sure that the highlighting is prominent enough so people can tell which tab is selected.
• The unselected tabs should be clearly visible and readable.
• Write short labels and do not use ALL CAPS
• Keep tabs to one row and connect them to the corresponding tab panel visually.

What to watch out for

Tab designs often prioritize the desktop interface. Make sure you think about a mobile. On mobile devices its common to stack tabs vertically Note: Some attempt to convert tabs into an accordion, given that accordions are structured, attributed, and operated completely differently to tabs, it may not be worth the complexity Where there are very many tabs or the number of tabs are an unknown quantity, an accordion at all screen widths is a safe bet. Single-column layouts are responsive regardless of content quantity.

Semantic tabs vs. tab navigation

You might not need semantic tabs. If there is a need to navigate to different pages or have separate urls associated with each tab, then the application likely requires a sub navigation styled as a tabbed interface instead. As a reminder, navigation is a list of links, nested in

. These can be styled to look like tabs. Github and Wikipedia UI is a good example of this.

Single page applications have a trickier time with horizontal navigation because the page title may not change from page to page. Using aria you can compensate by announcing the new tab state that you’re on.

Projects that use tabs

EASi - 508 request detail page

Managed Care Review - Submission dashboard page