Home >> E-accessibility >> Ui Component >> How to make Tabs and Collapse Accessible

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.