My colleague Anda and I just had a good conversation about tabs, and specifically the company’s tabs component. I’ve mentioned before that our tabs are unconventional and potentially confusing, and Anda was interested to hear more.
Conventional tabbed interfaces
Here are some great examples of tabs components.
It’s a device intended to improve content density. A same-page experience. Activating a tab reveals its corresponding tab panel. The whole thing is ideally progressively-enhanced, starting as a basic Table of Contents. There’s quite a lot of advanced semantics, state and interactivity under the hood.
But in our Design System at work, ours are currently just the “tabs” with no tab panels, and each “tab” generally points to different pages rather than somewhere on the same page – i.e. it’s a navigation menu made to look like a tabbed interface.
I’m not happy with this from an affordance point of view. Naming and presenting something as one thing but then having it function differently leads to usability problems and communication breakdowns.
Confused language causes problems
One real-life problem with our tabs is that they have been engineered as if they are conventional tabs, however since the actual use case is often navigation the semantics are inappropriate.
We currently give each “tab” the ARIA
tab role, defined as follows:
tabrole indicates an interactive element inside a
tablistthat, when activated, displays its associated
But our tabs have no corresponding
A stop-gap solution
If content for one or more
tabpanel is provided, apply the complicated ARIA attributes for proper tabs. If not, don’t. This means we allow component consumers to either create i) a real tabbed interface, or ii) “a nav menu that looks like tabs” (but without any inappropriate ARIA attributes). I don’t agree with the latter as a design approach, but that’s a conversation for another day!
Tabs in the future
Some clever people involved with Open UI are using web components to explore how a useful
tabs element could work if it were an HTML element. Check out the Tabvengers’ spicy-sections component. Again, this is based on the conventional expectation of tabs as a same-page experience for arranging content, rather than as a navigation menu. And I think it’d make sense to stay on the same path as the rest of the web.