How to make Tabs and Collapse Accessible

Tabs

WAI-ARIA

• Roles: define what an element is or does.
  1. role=”tablist” for set of tabs.
  2. role=”tab” for each label/title of the tab panel.
  3. role=”tabpanel” for content which associated with a tab.
• Properties: it’s used to give them extra meaning or semantics.
  1. aria-controls: the relationship between tabs and tab panels.
  2. aria-labelledby: provides the user with a recognizable name of the tab.
  3. tabindex: set to -1 by javascript to move the focus.
• States: define the current conditions of elements.
  1. aria-selected: to notify when one or more items are selected.
  2. aria-hidden: to indicates that the element and all of its descendants are not visible or perceivable.

JAVASCRIPT

• Move the focus to the content by javascript once tab is triggered.

 

Collapse

WAI-ARIA

• Roles: define what an element is or does.
  1. role=”tablist” for set of tabs.
  2. role=”tab” for each label/title of the tab panel.
• Properties: it’s used to give them extra meaning or semantics.
  1. aria-controls: the relationship between tabs and tab panels.
  2. aria-labelledby: provides the user with a recognizable name of the tab.
  3. tabindex: set to -1 by javascript to move the focus.
• States: define the current conditions of elements.
  1. aria-expanded: to indicate the state of a collapsible element.
  2. aria-hidden: to indicates that the element and all of its descendants are not visible or perceivable.

JAVASCRIPT

• Move the focus to the content by javascript once tab is triggered.