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

5
votes

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>
1
accessibilitywai-aria
Is it really a navigation menu? Attribute role="menubar should normally only go into menus like this oaa-accessibility.org/examplep/menubar1 and not in navigation bars. – Volker E.

1 Answers

3
votes

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>