Developing Accessible Web Applications Menu Bar Sample
Demo
Features Summary
- The HTML ul list element is ideal for expressing a group of hierarchically-related items.
- Semantic HTML:
- li element provides the grouping mechanism
- li element represents each node in the group.
- Actionable text is a link element
- WAI-ARIA:
- menubar role
- menu role
- menuitem role
- aria-label attribute
- aria-hidden state
- Other:
- Arrow key navigation
- Large hit targets
Usage
The MenuBar allows navigation of the main horizontal menu, interchangeably with either the Tab and Shift+Tab keys or the Left Arrow and Right Arrow keys. Vertical submenus are opened and closed with the Enter key. When a submenu is open, the Up Arrow and Down Arrow keys are used to navigate between submenu items.
Submenu items are selected with either the Enter key or the Spacebar, and after an item has been selected, a message appears below the menus indicating which item was chosen, and the submenu closes.
All items can be navigated and selected with the mouse.
Sample Code
HTML
The HTML for the menu bar is similar to that of the tool bar, with the addition of the submenu represented as a nested list under the second list item.
The WAI-ARIA role on the top-level ul element is "menubar", on the next level popup submenu ul elements roles are "menu", and on the last child ul elements that contain individual menu items, roles are "menuitem". The aria-label property is set on the top level ul element to "Navigation Bar", giving it a friendly identifier for assistive technology devices, and the aria-hidden state is set on the "menu" role elements that are submenu containers.
The a anchor links are used to provide backward compatibility with browsers that don't understand ARIA, and because it is simpler to manage focus with the browser's built-in management capability and quicker than writing script to manage focus, for browsers with ARIA capabilities.
<ul class="menubar" role="menubar" aria-label="Navigation Bar" onkeydown="OnMenubarKeydown(event);" onclick="OnMenubarClick(event);">
<li class="first"><a role="menuitem" href="File.htm">File</a>
<ul role="menu" aria-hidden="true" onkeydown="OnMenuKeydown(event);" onclick="OnMenuClick(event);">
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Open.htm">Open</a></li>
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Save.htm">Save</a></li>
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Print.htm">Print</a></li>
</ul>
</li>
<li><a role="menuitem" href="View.htm">View</a>
<ul role="menu" aria-hidden="true" onkeydown="OnMenuKeydown(event);" onclick="OnMenuClick(event);">
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Toolbar.htm">Toolbar</a></li>
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Reset.htm">Reset</a></li>
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Settings.htm">Settings</a></li>
</ul>
</li>
<li><a role="menuitem" href="Settings.htm">Settings</a>
<ul role="menu" aria-hidden="true" onkeydown="OnMenuKeydown(event);" onclick="OnMenuClick(event);">
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Account.htm">Account</a></li>
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Permissions.htm">Permissions</a></li>
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Settings.htm">Settings</a></li>
</ul>
</li>
</ul>
Script
The ToggleMenu() function is used to open and close submenus. After harmonizing the Mozilla and Internet Explorer keypress events (HarmonizeEvent(evt)), the child list element is located, its display is toggled between "block" and "none", and the aria-hidden state is set to either "true" or "false". If displayed, the submenu is positioned using a helper function.
function ToggleMenu(evt)
{
HarmonizeEvent(evt);
evt.preventDefault();
var src = evt.target;
var menu = src.parentNode.getElementsByTagName("UL")[0];
var menus = src.parentNode.parentNode.getElementsByTagName("UL");
for (var i=0; i<menus.length; i++)
{
if (menu != menus[i])
{
menus[i].style.display = "none";
}
}
if (menu)
{
if ("block" == menu.style.display)
{
HideMenu(menu);
}
else
{
ShowMenu(menu,src);
}
}
}
CSS
The CSS for the menu bar is similar to the toolbar. Additional CSS for the submenus sets positions to "absolute", floats to "none", and initial displays to "none".
/* menubar and menus */
ul.menubar, ul.menubar ul { margin:0; padding:0; list-style-type:none; }
ul.menubar li { float:left; border:1px solid; border-left:none;
background-color:menu; color:menutext;}
ul.menubar li.first { border-left:1px solid; }
ul.menubar li a { color:black; text-decoration:none; width:100%; height:100%;
padding:0.2em 2em 0.2em 0.5em; width:8em; display:block; }
ul.menubar a:hover { text-decoration:underline; }
ul.menubar a:focus { color:highlighttext; background-color:highlight; }
/* menu specific */
ul.menubar ul { position:absolute; display:none; border:1px solid; }
ul.menubar ul li { float:none; border:none; }
ul.menubar ul li a { width:10em; }
© 2011 Microsoft Corporation. All rights reserved. Terms of use.