Enabled.in

Digital Accessibility Services

Accessible Tab Panel

Example

Other title

here the content of 2nd tab

Aria

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
tablist div Indicates that the element serves as a container for a set of tabs.
aria-label=Entertainment div Provides a label that describes the purpose of the set of tabs.
tab button
  • Indicates the element serves as a tab control.
  • When focused, is automatically activated, causing its associated tabpanel to be displayed.
  • Provides a title for its associated tabpanel.
aria-selected=true button
  • Indicates the tab control is activated and its associated panel is displayed.
  • Set when a tab receives focus.
aria-selected=false button
  • Indicates the tab control is not active and its associated panel is NOT displayed.
  • Set for all tab elements in the tab set except the focused tab.
tabindex=-1 button
  • Removes the element from the page Tab sequence.
  • Set when a tab is not selected so that only the selected tab is in the page Tab sequence.
  • Since an HTML button element is used for the tab, it is not necessary to set tabindex=0 on the selected (active) tab element.
  • This approach to managing focus is described in the section on roving tabindex.
aria-controls=IDREF button Refers to the tabpanel element associated with the tab.
tabpanel div
  • Indicates the element serves as a container for tab panel content.
  • Is hidden unless its associated tab control is activated.
aria-labelledby=IDREF div
  • Refers to the tab element that controls the panel.
  • Provides an accessible name for the tab panel.
tabindex=0 div
  • Puts the tabpanel in the page Tab sequence.
  • Facilitates movement to panel content for assistive technology users.
  • Especially helpful if there are panels that do not contain a focusable element.

Keyboard Shortcuts

If you focus on the tabs “buttons”:

  • use Up/Left to see previous tab,
  • use Down/Right to see next tab
  • use Home to see first tab (wherever you are in tab buttons)
  • use End to see last tab (wherever you are in tab buttons)

If you focus on a tab content:

  • use Ctrl Up/Left to set focus on the tab button for the currently displayed tab
  • use Ctrl PageUp to set focus on the previous tab button for the currently displayed tab
  • use Ctrl PageDown to set focus on the next tab button for the currently displayed tab

Warning: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know).