Tabs can make a page look beautifully organized. They can also put important information into several small rooms and forget to label the doors.
The difference is whether the content belongs in separate panels and whether visitors can predict what each panel contains.
If you’re considering tabs for a custom website, start with the reading task. Somebody comparing product details may need a different arrangement from somebody checking one specific piece of information. A shorter-looking page is not automatically an easier page.
Choose what deserves to be hidden
Use a fictional product page with Overview, Specifications and Delivery panels. Those labels give useful clues, but we still need to ask what the visitor must see together.
Progressive disclosure, described in Jakob Nielsen’s work, defers secondary detail until requested.2 It works best when people can find that detail and the initial view still supports the main task.
Keep essential context in the open
If a delivery restriction would make the product unsuitable, hiding it in a secondary panel can cause unnecessary effort. The visitor may need that fact before comparing specifications.
Likewise, tabs are less helpful when the task involves constantly comparing material across panels. A straightforward page section or another layout may reduce the back-and-forth.
I’d sketch the same content without tabs first. If the grouping still makes sense and the interaction solves a real problem, it has a stronger case.
The page shouldn’t need to hide half the explanation simply because the design would prefer a shorter screenshot.
Planning a new site? See how we approach custom website creation.
Make each label a credible promise
Overview and Specifications can work when they describe distinct content. Details, More Details and Other are a less encouraging trio.
Use labels that help someone decide before they act. Keep them short enough to scan without sacrificing meaning.
The active state also needs to be clear. A selected tab shows which panel is displayed; keyboard focus shows where the next action will land. They may coincide, but the design should handle both.
A visitor shouldn’t have to remember which subtly different shade of gray represents the tab that is currently listening.
Implement the interaction the control promises
A tab interface has expected semantics and keyboard behavior. The W3C Authoring Practices Guide describes relationships among the tab list, tabs and panels, along with keyboard navigation.3
That is different from styling ordinary links to look tab-shaped. Choose the correct pattern for the actual behavior.
In a typical horizontal tabs widget, arrow keys move among tabs while Tab moves through the broader page sequence. Automatic activation also deserves care if displaying a panel would introduce noticeable delay.
The implementation needs an accessible name, clear selected state and correctly associated content. Adding a role label without the matching behavior is rather like installing a steering wheel on a cupboard. It suggests an experience we aren’t really providing.
Related read: Your menu labels should sound like the pages people are looking for.
Try the same task on a phone
A horizontal row that fits on desktop can become crowded or partly hidden on a smaller screen. Check whether people can discover all the choices.
Don’t assume a hidden final tab is obvious because the development team knows it exists. Consider whether another presentation or ordinary sections would suit the narrow layout better.
A focused review might ask:
- Can someone predict where the required information belongs?
- Can they identify the selected panel and move through the controls by keyboard?
- Does important content remain discoverable on a narrow screen?
- Can they compare the information the task requires without repeated switching?
An accordion can be appropriate where expanding sections fits the task, but it has its own behavior and accessibility responsibilities. It isn’t a free mobile transformation that automatically fixes unclear grouping.
NN/g’s updated tabs guidance in August 2024 offers useful context for that decision. The best choice still comes from trying the content with the people who need it.
Test the labels and the journey before polishing the transitions. An elegant animation is enjoyable once everyone knows where they’re going.
I’d keep tabs when they make related groups easier to navigate. If they’re mainly making the page look tidy by hiding awkward amounts of content, let’s try a clearer layout.
The doors can look lovely. People should still know which one contains the thing they came for.