Avoid tab groups
Tab groups are a sub-par solution used in a couple of scenarios:
- A page has become bloated with content and the designer seeks to condense even more information into a tighter space.
- It’s also possible a product owner still believes it’s the year 1999 and people don’t know how to scroll.
Either way, it’s about trying to cram low quality content into a page until it becomes a high quality experience, which is not a good plan.
Why tab groups are problematic
- Many people who use a screenreader don’t know how to operate a tab group with the arrow keys and can miss parts of the content
- It requires the screenreader user to repeatedly parse the content to consume it
- It hides content from the user by default and not everyone will notice or know how it works
- Interaction rates will be exceedingly low for anything but the first tab panel (like a carousel, which is also a bad idea)
- If users need to compare information across tabs, they cannot
What to do instead
Rather than cramming more content into the page, consider other designs such as:
- Breaking the page into more concise sections with tight copywriting
- Putting content inside expander/accordions
- Using separate pages
Wait, then why are you using tabs on this site?
- See above: The page has become bloated with content and the designer seeks to condense even more information into a tighter space
- In this case, the content across tab panels restructures identical information, so there’s no need to see all variations of content
- The tabs are coded as radio buttons so people using both keyboard or screen readers can quickly understand and operate them
Annotations for tabs
- There are a too many components to practically annotate
- Instead, determine if it’s an automatic or manual tab activation and review working examples with your engineers
Annotations for iOS or Android tabs
- iOS uses Segmented control
- Android uses a Segmented button
Automatic or manual tab activation
Tabs can be built to be activated automatically or manually. There are differences in keyboard actions between each type:
- “Automatic” tabs become activated immediately with the arrow keys
- “Manual” tabs can receive focus via the arrow keys, but require pressing enter or spacebar