Skip to content

Instantly share code, notes, and snippets.

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>
<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>
Copy link

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