Using ARIA menus
Status
ARIA Menu Widget Technique
- ARIA menu widget based on example: http://oaa-accessibility.org/examplep/menubar1/
Success Criteria 2.1.1 Keyboard
Description
A menu widget usually consists of a main menu bar with pop up menus. Items in pop up menus often have sub pop up menus. Menu widgets must provide keyboard support to navigate all the menu items in the menu. Keyboard support for a menu typically include the cursor keys to navigate between the menu items and open and close popupmenus.
Example Keyboard Behavior
- Left arrow: Previous menubar item
- Right arrow: Next menubar item
- Up arrow: Open pull down menu and select first menu item
- Down arrow: Open pull down menu and select first menu item
- Enter: Open or close pull down menu. Select first menu item if opening
- Space: Open or close pull down menu. Select first menu item if opening
- Left arrow: Open previous pull down menu and select first item
- Right arrow: Open next pull menu and select first item
- Up arrow: Select previous menu item
- Down arrow: Select next menu item
- Enter: Invoke selected item and dismiss menu
- Space: Invoke selected item and dismiss menu
- Esc: Close menu and return focus to menubar
Tabindex
- For menu items to receive keyboard focus the tabindex attribute must be set of the element if it is not a form control or link element
Resources
Resources are for information purposes only, no endorsement implied.
Related Techniques
- ARIA Menu Widget Technique for Success Criteria 4.1.2 Name, Role, Value
Test Procedures
Test 1
Procedure
- Use TAB key to move focus to menu bar
- Press TAB key to move focus to first focusable item after the menu bar
Expected Results
- Menu bar receives focus and triggers an onfocus event
- Menu bar loses focus and triggers an onblur event
Test 2
With focus on a menu item in the menu bar, repeat this test for every menu item in the menu.
Procedure
- Use Up Arrow key to move focus to the previous item in the menu
- Use Down Arrow key to move focus to the next menu item in the menu
Expected Results
- Previous menu item receives focus and triggers an onfocus event and current menu item triggers an onblur event
- Next menu item receives focus and triggers an onfocus event and current menu item triggers an onblur event
Test 3
With focus on a menu item in the menu bar, repeat this test for every menu item in the menu.
Procedure
- Use the Enter key to activate the function of the menu item
- Use the Space key to activate the function of the menu item
Expected Results
- Verify the function associated with the menu item was activated
Success Criteria 4.1.2 Name, Role, Value
Description
A HTML based menu widget usually consists of a main menu bar with pull down menus. To describe the HMTL menu to assistive technology Accessible Rich Internet Application (ARIA) markup can be added to the HTML elements used to create the menu. ARIA adds attributes to the HTML elements to communicate their roles, properties and states. The following is an example of the ARIA markup that can be added to a menu.
Example Code
<ul id="mb1" class="menubar root-level" role="menubar" title="Styling Menu" aria-controls="st1">
<li id="mb1_menu1" class="menu-parent" role="menuitem" tabindex="0" aria-haspopup="true">
Font
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
<li id="sans-serif"
class="menu-item checked"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="true">Sans-serif</li>
<li id="serif"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Serif</li>
<li id="monospace"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Monospace</li>
<li id="fantasy"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Fantasy</li>
</ul>
</li>
<li id="mb1_menu2" class="menu-parent" role="menuitem" tabindex="-1" aria-haspopup="true">
Style
<ul id="styleMenu" class="menu" role="menu" aria-hidden="true">
<li id="italic"
class="menu-item"
role="menuitemcheckbox"
aria-controls="st1"
aria-checked="false"
tabindex="-1">Italics</li>
<li id="bold"
class="menu-item"
role="menuitemcheckbox"
aria-controls="st1"
aria-checked="false"
tabindex="-1">Bold</li>
<li id="underline"
class="menu-item"
role="menuitemcheckbox"
aria-controls="st1"
aria-checked="false"
tabindex="-1">Underlined</li>
</ul>
</li>
<li id="mb1_menu3" class="menu-parent" role="menuitem" tabindex="-1" aria-haspopup="true">
Justification
<ul id="justificationMenu" class="menu" role="menu" title="Justication" aria-hidden="true">
<li id="left"
class="menu-item checked"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="true">Left</li>
<li id="center"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Centered</li>
<li id="right"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Right</li>
<li id="justify"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Justify</li>
</ul>
</li>
<li id="mb1_menu4" class="menu-parent" role="menuitem" tabindex="-1" aria-haspopup="true">
Size
<ul id="sizeMenu" class="menu" role="menu" title="Size" aria-hidden="true">
<li id="larger"
class="menu-item"
role="menuitem"
aria-controls="st1"
tabindex="-1">Larger</li>
<li id="smaller"
class="menu-item"
role="menuitem"
aria-controls="st1"
tabindex="-1">Smaller</li>
<li id="fs_separator"
class="menu-item separator"
role="separator"
tabindex="-1"></li>
<li id="x-small"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">X-Small</li>
<li id="small"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Small</li>
<li id="medium"
class="menu-item checked"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="true">Medium</li>
<li id="large"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">Large</li>
<li id="x-large"
class="menu-item"
role="menuitemradio"
tabindex="-1"
aria-controls="st1"
aria-checked="false">X-Large</li>
</ul>
</li>
</ul>
Resources
Resources are for information purposes only, no endorsement implied.
- Accessible Rich Internet Applications (WAI-ARIA): 1.0 Menubar
- Accessible Rich Internet Applications (WAI-ARIA): 1.0 Menu
- Accessible Rich Internet Applications (WAI-ARIA): 1.0 Menuitem
- WAI-ARIA 1.0 Authoring Practices: Menu Widget
- Open Ajax Accessibility Menu Bar Examples
Related Techniques
- ARIA Menu Widget Technique for Success Criteria 2.1.1 Keyboard
Test Procedures
- Using an ARIA enabled screen reader (i.e. JAWS, NVDA or VoiceOver) and web browser (i.e. Internet Explorer (Windows), Firefox (Windows) or Safari (OSX) ) move keyboard focus to a menu item
- When a menu item gets focus it should announce "Menu Item" and then the label for the menu
- Moving around the menu with cursor keys should announce the "Menu Item" and label for each menu item
- If a menu item has a pop up menu the screen reader should announce "pop up"