5

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>
Volker E.
  • 5,911
  • 11
  • 47
  • 64
Karine
  • 183
  • 4
  • 14
  • Is it really a navigation **menu**? Attribute `role="menubar` should normally only go into menus like this http://oaa-accessibility.org/examplep/menubar1/ and not in navigation bars. – Volker E. Jul 17 '14 at 08:52

1 Answers1

3

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>
Volker E.
  • 5,911
  • 11
  • 47
  • 64