ARIA Menu Example

Notes:

• Roles used are: menubar and menuitem.
• When a menuitem has focus the sub-menu will open by pressing enter or arrow down.
• There are a lot of browser bugs with menus. What we found worked best is using the menu roles on the main menu bar, but the drop down menus are list of links.
• You can add any number of items to this menu by simply adding more ID selectors to the JQuery functions.
• Menu items use: a unique id, tabindex="0", role="menuitem", aria-expanded="false" (initial setting)aria-haspopup="true", aria-controls="submenuX" (the sub-menu's ID).
• The close button is visible on focus.

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