Tabs

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.

— Tabs Pattern, WAI ARIA Authoring Practices Guide (APG)

§ Notes

Missing.css uses <div role=tablist>, <button role=tab>, and <div role=tabpanel> for tabs. To get the actual behavior of an accessible tabset, you can use Missing.js § Tabs.

• Don't forget to set an accessible label for the tablist.
• You must establish the relationship between <button role=tab> and <div role=tabpanel> elements by including aria-controls attributes on each <button role=tab>. The JavaScript behavior will set the reverse aria-labelledby attributes (generating unique ids if necessary).
• You must set the initial state with <button role=tab aria-selected=true> and <div role=tabpanel hidden>).

Keyboard Interaction

• Tab : Tab in and out of the tablist, remembering previous focus.
• Shift Tab : Tab in and out of the tablist, remembering previous focus.
• Left Arrow : Move focus to the previous tab.
• Right Arrow : Move focus to the next tab.
• Home : Move focus to the first tab.
• End : Move focus to the last tab.

§ Example