Krafters UI 1.4.7

Tabs pattern

"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."

Source: ARIA Design Patterns

  • It is recommended that tabs activate automatically when they receive focus.
  • When the Tab List is focussed, the Tab key should move focus to the Tab Panel.
  • When the Tab List is focussed, the key moves focus to the next tab.
  • When the Tab List is focussed, the key moves focus to the previous tab.
  • Each element that serves as a tab has role="tab".
  • The element that serves as the container for the set of tabs has role="tablist".
  • The tablist element has a label, either visible, or for screen readers.
  • The elements that contains the content for a tab have role="tabpanel".
  • The active tab element has aria-selected set to true and all other tab elements to false.
  • Each tab has an aria-controls attribute referring to its associated tabpanel element.
  • Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.