Tabs

Diagram of the different cuts of a pig
Component Name

Tabs

Keyboard Expectations
  • Space or Enter = Activate Tab
  • ←→ = Cycles tab focus
  • ↑↓ = Cycles tab focus (vertical tabs)
  • Home = Focus first tab
  • End = Focus last tab
Focus Expectations
  • Tabs should activate automatically when receiving focus as long as associated tab panels are rendered quickly.
  • Tabs should have visible :focus state.
  • Tabs should have visible aria-selected="true" state
Labelling Expectations
  • The element that wraps tabs has role tablist.
  • Each tab has role tab and is contained within the element with role tablist.
  • Each tab content panel has role tabpanel.
  • Each tab has the property aria-controls referring to its tabpanel.
  • The active tab has aria-selected set to true and all other tab elements have it set to false.
  • Each tabpanel has the property aria-labelledby referring to its associated tab.