WebAIM - Web Accessibility In Mind

E-mail List Archives

Proper assignment of ARIA Roles for a menu

for

From: Ryan E. Benson
Date: Aug 31, 2012 1:49PM

Hi all,
I am working with somebody who wants to use some ARIA, but they are
implementing it incorrectly from what I can tell. Should it look like:
<div id=”nav” role=”navigation”>
<ul role=”menubar”>
<li role=”menuitem”>{name}</li>
<li role=”menuitem” aria-haspopup=”true” aria-labelledby=”menu1Title”>
<span id=”menu1Title”>Menu</span>
<ul role=”menu”>
<li role=”menuitem”><a>link</a></li>
<li role=”menuitem”><a>link</a></li>
<li role=”menuitem”><a>link</a></li>
</ul>
</li>
</ul>
</div>

They have role=”navigation” on the unordered list where I have the
menubar role – then each list item with a link has a role of button.


TIA
--
Ryan E. Benson