These tabpanels are created using the
<div> elements, with scripting to provide the expected behaviour. Additional semantic information is provided with ARIA.
tabpanel roles expose the
<div> elements as a collection of tabs and corresponding tabpanels in the accessibility tree.
presentation role prevents the
<li> elements from being mapped in the accessibility tree.
aria-selected attribute indicates which tab is currently selected.
tabindex attribute ensures that only the currently selected tab is included in the tab order.
hidden attribute hides all but the currently displayed tabpanel from view.
aria-controls attribute establishes a relationship between each tab and its corresponding tabpanel.
aria-labelledby attribute reuses the name of the tab as the accessible name of the corresponding tabpanel.
keydown event listeners capture the expected mouse and keyboard events for activating the tabs.