ARIA Menu Example

Notes:

• Roles used are: menubar, menu and menuitem
• Aria-labelledby labels the sub menus
• When a menuitem has focus the sub menu will open by pressing enter or arrow down

For more best practice patterns see ARIA authoring practices.

Step by Step: How we made the Menu (tutorial)

In the discussion on ARIA, we discussed 5 steps with ARIA. They are:

1. Alert users to what each elements is: Their role (such as menu, submenu).
2. Alert users to their properties and important relationships (aria controls, aria-haspopup and labels).
3. Alert users to what each element is doing: The state (such as aria-hidden, aria-expanded).
4. Alert users to changes in their state.
5. Make sure widgets are keyboard accessible and focus works predictably. Events can be triggered though the keyboard, and it should be intuitive to the user. All controls should receive focus via tabbing though the keyboard.

Author: Lisa Seeman