WAI-ARIA - selected/current menuitem/page, how to set the correct state in a menubar?

Question

I'm doing some code clean up / validation in a web site, and have run into an issue. The site have a main menu (menubar) where the current page should be indicated.

The menu structure as is:

<nav role="navigation">
    <ul role="menubar">
        <li role="menuitem" aria-selected="true">
            <a href="currentpage">Current page</a>
        </li>
        <li role="menuitem">
            <a href="anotherpage">Another page</a>
        </li>
    </ul>
</nav>

According to the WAI-ARIA spec, the state aria-selected is not allowed on the role menuitem: http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected. Neither can I find any state for menuitem that seem to mark the menuitem as selected: http://www.w3.org/TR/wai-aria/roles#menuitem.

What would be the correct implementation of a selected menuitem/page in a menubar?

Update:

I found one answer suggesting to leave the anchor out on the current page in the menu, but not sure if that will give me what I want.

<li role="menuitem">Current page</li>

Answer 1

As laid out very nicely in the blog entry The Accessible Current Page Link Conundrum there seems to be an upcoming solution by introducing the attribute aria-current="true".

For now, you stay with

• your finding of either leaving the anchor out on the current page menu item
   

• or include an aria-described attribute, which is specified to attach descriptive information to one or more elements by referencing an ID. Example:

  <nav role="navigation">
      <ul>
          <li><a href="/" aria-describedby="a11y-desc-current">Home</a></li>
          <li><a href="/about/">About</a></li>
          <li><a href="/contact/">Contact</a></li>
      </ul>
      <span id="a11y-desc-current">current page</span>
  </nav>