Tabs

When to use this component 

• Tabs can be a helpful way of letting users quickly switch between related information if: 

  • Your content can be usefully separated into clearly labelled sections 

  • The first section is more relevant than the others for most users 

  • Users will not need to view all the sections at once 

• Tabs can work well for users who use a service or application regularly as their need to perform tasks quickly may be greater than their need for simplicity of first-time use 

When not to use this component 

• Do not use tabs to navigate to different areas 

• Do not use tabs when content must be presented in sequential order - Use a wizard instead  

• Do not use tabs when content needs to be compared, which would lead to repeated switching between tabs - Use a pattern that allows all content to be presented at once instead 

• Do not use tabs when content presentation includes only two tabs – Use headings instead 

Best practices 

Do 

• Tab labels should usually be 1–2 words 

• Short labels are more scannable; if you need longer labels, it is a sign that the choices are too complicated for a tab control. 

• Ensure each tab is clearly differentiated from the other tabs 

• Logically chunk the content behind the tabs so users can easily predict what they will find when they select a given tab 

• Highlight the currently selected tab 

• The first tab should be the most commonly needed section - Arrange the other tabs in the order that makes most sense for your users 

• Make the default active tab first on page load 

• Include a heading at the beginning of each tab that duplicates the information in the tab label 

Don’t 

• Use multiple rows of tabs 

• Disable tabs - If there is no content for a tab, either remove the tab or, if that would be confusing for your users, explain why there is no content when the tab is selected 

• Place the row of tabs on the sides or on the bottom of the panel, as users will often overlook them 

Tips 

• Card sorting is a good option for determining how to group information across tabs - If you do not find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content 

• Test your content without tabs first. Consider if it is better to: 

  • Simplify and reduce the amount of content 

  • Split the content across multiple pages 

  • Keep the content on a single page, separated by headings 

  • Use a table of contents to let users navigate quickly to specific sections of content 

Accessibility

The WCAG criteria outlined in this section were chosen because they represent some of the most common failures when designing and implementing these components. For a comprehensive list, please see Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org).    

3.2.4 Consistent Identification 

The intent of this success criterion is to ensure consistent identification of functional components that appear repeatedly within a set of web pages. If identical functions have different labels on different web pages, the site will be considerably more difficult to use. It may also be confusing and increase the cognitive load for people with cognitive limitations. Therefore, consistent labeling will help. 

When repeating the tabbed interface across a set of related pages, always ensure the tab headers are presented consistently. 

Understanding Success Criterion 3.2.4: Consistent Identification | WAI | W3C 

2.1.1 Keyboard 

The objective of this technique is to provide keyboard operation for all the functionality of the page. When all functionality of content can be operated through a keyboard or keyboard interface, it can be operated by those with no vision as well as by those who must use alternate keyboards or input devices that act as keyboard emulators like speech input software or on-screen keyboards. 

This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation. 

For tabs, ensure that all functionality, including navigating between tabs, can be performed using only the keyboard. 

Understanding Success Criterion 2.1.1: Keyboard | WAI | W3C 

Key Component Features 

Blazor TabStrip Demos - Overview | Telerik UI for Blazor 

TabStrip 

The Blazor TabStrip component is designed with different configuration parameters, such as Title, Visible and Disabled. There is also a TabPosition attribute. We suggest using the Top position for the Telerik TabStrip, as placing the row of tabs on the sides or on the bottom of the panel will often cause users to overlook them. 

Blazor Panel Bar Demos - Templates | Telerik UI for Blazor 

Open

Figure 1 - Telerik TabStrip component

Examples 

Open

Figure 2 – Telerik TabStrip component 

Responsive design

In order to be inclusive to all users, we need to consider how our applications behave on smaller viewports. (For more information on viewports, see The viewport is the window to your site – Digital.gov.) While designing and building using responsive design principles will allow you to create an optimized layout for users accessing your application on smaller viewports, this is not the only benefit. This will also ensure you are supporting users with low vision who need to enlarge text by using the browser’s zoom function. 

On smaller viewports, when tabs no longer fit within the screen width, content within tabs should be removed and presented as regular text content on the page. Don’t allow tabs to scroll vertically or span multiple rows, as this can become challenging for users to navigate efficiently.

It's important to remember that tabs should not be used as a means of fitting more content on a single page. Instead, consider whether the tabbed content might be better organized on separate pages or combined into a single, longer page for improved user experience and clarity.

Resources 

Government of Canada resources 

Tabbed interface design pattern - Canada.ca 

External resources 

Tabs – GOV.UK Design System (design-system.service.gov.uk) 

Tabs, Used Right (nngroup.com)