Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Minimum ARIA accessible menu.
<div role="navigation">
<ul role="menubar" aria-label="Menu Bar">
<li role="presentation" tabindex="0">
<a href="item-1.html" role="menuitem" id="nav-item-1" aria-haspopup="true">Item 1</a>
<ul role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="nav-item-1">
<li role="presentation"><a href="item-1-1.html" role="menuitem">Item 1.1</a></li>
<li role="presentation"><a href="item-1-2.html" role="menuitem">Item 1.2</a></li>
<li role="presentation"><a href="item-1-3.html" role="menuitem">Item 1.3</a></li>
</ul>
</li>
<li role="presentation"><a href="item-2.html" role="menuitem">Item 2</a></li>
<li role="presentation">
<a href="item-3.html" role="menuitem" id="nav-item-3" aria-haspopup="true">Item 3</a>
<ul role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="nav-item-1">
<li role="presentation"><a href="item-3-1.html" role="menuitem">Item 3.1</a></li>
<li role="presentation"><a href="item-3-2.html" role="menuitem">Item 3.2</a></li>
<li role="presentation">
<a href="item-3-3.html" role="menuitem" id="nav-item-3-3" aria-haspopup="true">Item 3.3</a>
<ul role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="nav-item-3-3">
<li role="presentation"><a href="item-3-3-1.html" role="menuitem">Item 3.3.1</a></li>
<li role="presentation"><a href="item-3-3-2.html" role="menuitem">Item 3.3.2</a></li>
<li role="presentation"><a href="item-3-3-3.html" role="menuitem">Item 3.3.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
@GaryJones

This comment has been minimized.

Copy link
Owner Author

@GaryJones GaryJones commented Sep 9, 2012

Outermost div has a landmark role of navigation.

  • Outermost ul has a role of menubar, an requires an aria-label.
  • Submenu ul elements have a role of menu and an aria-labelledby referencing the preceeding sibling anchor ID.
  • All list item elements have a presentation role only.
  • All anchor elements have a role of menuitem.
  • Anchors which lead to a submenu, have a true aria-haspopup.
  • JavaScript should update aria-expanded / aria-hidden state attributes as required.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.