Accessible Web Components

Tab Group

tab-group

Tab groups are used to collect content into a series of tabbed views. 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.

Demonstration

Wombats

There are three living species of wombat, and several others that are now extinct.

Common wombat

Northern hairy-nosed wombat

Southern hairy-nosed wombat

Quokkas

Quokkas are a small marsupial closely related to wallabies.

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.

Accessibility

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.

Example code

           
<tab-group>
<tab-card>
<h3>Wombats</h3>
 
<p>
There are three living species of wombat, and several others
that are now extinct.
</p>
 
<h4>Common wombat</h4>
<h4>Northern hairy-nosed wombat</h4>
<h4>Southern hairy-nosed wombat</h4>
 
</tab-card>
 
<tab-card>
<h3>Quokkas</h3>
 
<p>
Quokkas are a small marsupial closely related to wallabies.
</p>
</tab-card>
 
<tab-card>
<h3>Wallabies</h3>
 
<p>
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.
</p>
 
<p>
The main groups are true wallabies, the swamp wallaby,
rock-wallabies, hare-wallabies, nail-tails, dorcopsis,
padmelons, and the quokka.
</p>
</tab-card>
</tab-group>

API

More information