ARIA Tabs Example

WAI-ARIA 1.1: Tabs

Pizza Ordering Example

My Order

Crust: none selected
Vegetables: none selected
Meat: none selected
Delivery: none selected

Accessibility Features

Keyboard Support

Key Function
Up Arrow Key The previous tab is focused and put into tab-order in place of the current tab.
Down Arrow Key The next tab is focused and put into tab-order in place of the current tab.
Return Key and Space Bar Activate the selected tab

ARIA Roles, Properties and States

Role Property/State Usage
Div tabpanel

Source Code: Example