Tabpanels with ARIA design pattern

These tabpanels are created using the <ul>, <li>, and <div> elements, with scripting to provide the expected behaviour. Additional semantic information is provided with ARIA.

Example

Blanco tequila is...

Notes

The tablist, tab, and tabpanel roles expose the <ul>, <a>, and <div> elements as a collection of tabs and corresponding tabpanels in the accessibility tree.

The presentation role prevents the <li> elements from being mapped in the accessibility tree.

The aria-selected attribute indicates which tab is currently selected.

The tabindex attribute ensures that only the currently selected tab is included in the tab order.

The hidden attribute hides all but the currently displayed tabpanel from view.

The aria-controls attribute establishes a relationship between each tab and its corresponding tabpanel.

The aria-labelledby attribute reuses the name of the tab as the accessible name of the corresponding tabpanel.

The click and keydown event listeners capture the expected mouse and keyboard events for activating the tabs.