YUI Library Examples: Menu Family: Implementing ARIA Roles and States with Menu

Using ARIA roles and states in the Menu Control

Begin by defining an array of MenuItem configuration properties that describe each item in the MenuBar.

/*
	 Define an array of object literals, each containing 
	 the data necessary to create the items for a MenuBar.
*/

var aItemData = [

{ text: "File", submenu: {  id: "filemenu", itemdata: [

{ text: "New File", helptext: "Ctrl + N" },
			"New Folder",
			{ text: "Open", helptext: "Ctrl + O" },
			{ text: "Open With...", submenu: { id: "applications", itemdata: [
					"Application 1", 
					"Application 2", 
					"Application 3", 
					"Application 4"
				] } 
			},
			{ text: "Print", helptext: "Ctrl + P" }

] }
	
	},
	
	{ text: "Edit", submenu: { id: "editmenu", itemdata: [

[ 
				{ text: "Undo", helptext: "Ctrl + Z" },
				{ text: "Redo", helptext: "Ctrl + Y" }
			],
			
			[
				{ text: "Cut", helptext: "Ctrl + X" },
				{ text: "Copy", helptext: "Ctrl + C" },
				{ text: "Paste", helptext: "Ctrl + V" },
				{ text: "Delete", helptext: "Del" }
			],
			
			[ { text: "Select All", helptext: "Ctrl + A" } ],

[
				{ text: "Find", helptext: "Ctrl + F" },
				{ text: "Find Again", helptext: "Ctrl + G" }
			]
	
		] }

}

];

Next, use the onDOMReady method of the YUI Event Utility to instantiate the MenuBar as soon as the page's DOM is available for scripting.

Lastly, apply the WAI-ARIA Roles and States to a Menu widget via a "render" event listener. Waiting for a Menu's "render" event to fire ensures that all of its DOM elements have been appended to the document and are available to be scripted. Roles and states are added to a Menu's DOM elements via the DOM setAttribute method.

/*
	Add the WAI-ARIA Roles and States to the MenuBar's DOM elements once it 
	is rendered.
*/

oMenuBar.subscribe("render", function () {

/*
		 Apply the "role" attribute of "menu" or "menubar" depending on the type of 
		 the Menu control being rendered.
	*/

this.element.setAttribute("role", 
					(this instanceof YAHOO.widget.MenuBar ? "menubar" : "menu"));

/*
		 Apply the appropriate "role" and "aria-[state]" attributes to the label of
		 each MenuItem instance.
	*/

var aMenuItems = this.getItems(),
		i = aMenuItems.length - 1,
		oMenuItem,
		oMenuItemLabel;

do {

oMenuItem = aMenuItems[i];

/*
			Retrieve a reference to the anchor element that serves as the label for 
			each MenuItem.
		*/

oMenuItemLabel = oMenuItem.element.firstChild;

// Set the "role" attribute of the label to "menuitem"

oMenuItemLabel.setAttribute("role", "menuitem");

// Remove the label from the browser's default tab order

oMenuItemLabel.setAttribute("tabindex", -1);

/*
			Optional: JAWS announces the value of each anchor element's "href"
			attribute when it recieves focus.  If the MenuItem instance's "url" 
			attribute is set to the default, remove the attribute so that JAWS 
			does announce its value.
		*/

if (oMenuItem.cfg.getProperty("url") == "#") {

oMenuItemLabel.removeAttribute("href");
		
		}

/*
			If the MenuItem has a submenu, set the "aria-haspopup" attribute to 
			true so that the screen reader can announce 
		*/

if (oMenuItem.cfg.getProperty("submenu")) {
		
			oMenuItemLabel.setAttribute("aria-haspopup", true);
		
		}

}
	while (i--);

/*
		 Set the "tabindex" of the first MenuItem's label to 0 so the user can 
		 easily tab into and out of the control.
	*/

if (this.getRoot() == this) {
	
		this.getItem(0).element.firstChild.setAttribute("tabindex", 0);
	
	}

});

/*
	 Since this MenuBar instance is built completely from 
	 script, call the "render" method passing in a node 
	 reference for the DOM element that its should be 
	 appended to.
*/

oMenuBar.render(document.body);

Once the WAI-ARIA Roles and States are applied, there are a few tweaks that can be made to the Menu's DOM elements to further improve the user experience. For Menu, the label of each MenuItem instance is represented in HTML as an anchor element (i.e. <a class="yuimenuitemlabel">), and in IE and Firefox, anchor elements are automatically part of the tab order. Having MenuItem labels in the tab order by default is important when JavaScript is disabled to ensure that the user can navigate a Menu via the keyboard with the tab key.

Since the Menu code provides its own, desktop-like keyboard functionality when JavaScript is enabled, having every MenuItem label in the browser's default tab order can be a nuisance to users of screen readers. When navigating the document with the tab key, users of screen readers have to tab through every single MenuItem label in a Menu, regardless of whether or not they want to use the Menu Control. This problem can be solved by setting the "tabindex" attribute of every MenuItem label but the first to a value of -1. Setting an element's "tabindex" attribute to a value of -1 removes it from the browser's default tab order, while maintaining its focusability via JavaScript. Since the YUI Menu keyboard functionality is activated when any MenuItem label has focus, with just one MenuItem label in the browser's default tab order the Menu's keyboard functionality will be preserved, while at the same time giving the user the ability to quickly tab into and out of the control.

YUI Library Examples: Menu Family: Implementing ARIA Roles and States with Menu

Using ARIA roles and states in the Menu Control

Menu Family Examples:

More Menu Family Resources: