Use page links for distinct destinations. Use tabs for related panels within one context; needing a shareable URL does not by itself rule tabs out.
Problem
I need to divide content into sections.
Use tabs when
- Tabs switch between tightly related views of the same object.
- People usually need one view at a time, rather than comparing sections side by side.
Avoid tabs when
- Sequential steps in a process; tabs imply users can move freely.
- Hiding essential instructions or validation errors in an inactive panel.
Example
Website redesign · A project for a clearer, faster website.
Today · Project created. Yesterday · Research completed.
Visibility: private. These are illustrative settings.
Implementation
- Keep labels short and clear. Prefer visible sections when users must read or compare all the content.
- Follow the APG tabs pattern: label the tablist, connect each tab and panel with aria-controls and aria-labelledby, expose aria-selected, and hide inactive panels.
- Keep one tab in the Tab sequence. Use Left/Right arrows within horizontal tabs; Tab leaves the tablist. Make the panel focusable when its first meaningful content is not focusable.
- Activate on arrow-key focus only when panels appear without noticeable delay. Otherwise use manual activation with Enter or Space. Home and End support is optional.
- Use ordinary links for page navigation and aria-current="page" for the current page link. Tab-like styling does not justify tab roles.
Tradeoffs
Tabs save visible space but hide content and add keyboard behavior to implement. Page links provide familiar navigation. Tabs can also support deep links and Back/Forward history, but that behavior must be implemented deliberately.
Verification
Can users identify the active tab, move through tabs with the keyboard, reach the panel, and restore the intended view from a shared URL or browser history when supported?