Accessible Web Components

Tab Group


Tab groups are used to collect content into a series of tabbed views, which are organised using tab-card. Tabs are generated from the highest level headings found within the tab-group. Activating a tab will show the content associated to that tab.

Work in progress

I'm currently working on the design of the documentation and how to include demonstrations and code examples for the components.


Under construction

Example usage

There are three living species of wombat, and several others
that are now extinct.
<li>Common wombat</li>
<li>Northern hairy-nosed wombat</li>
<li>Southern hairy-nosed wombat</li>
Quokkas are a small marsupial closely related to wallabies.
Wallaby is sometimes used as a generic name for marsupials
that are a bit smaller than kangaroos and a bit bigger
than rats, so there are a lot of different species of wallaby.
The main groups are true wallabies, the swamp wallaby,
rock-wallabies, hare-wallabies, nail-tails, dorcopsis,
padmelons, and the quokka.


Keyboard navigation is available. The element is focusable with tab.

When focused

Screen readers

Screen reader users will be informed that they have focused a page tab.

When activating a tab, the user will be informed that they have selected that tab.

More information