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
Examples
Note: The following example is a visual illustration of how this component could be used in a MAACE application. Live examples of the Telerik UI component implemented in MAACE applications will be added when available.
Resources
Government of Canada resources
Tabbed interface design pattern - Canada.ca