Question

Is there a way of indicating (for accessibility purposes) which nav menu on a page is the primary navigation?

<nav role="navigation" id="primaryNavMenu">
    <ul> ... </ul>
</nav>

<nav role="navigation" id="secondaryNavMenu">
    <ul> ... </ul>
</nav>

It would be good to be able to do something like:

<nav role="navigation primary" id="primaryNavMenu">
    <ul> ... </ul>
</nav>

But I can't see any such provision in the ARIA documentation.

Was it helpful?

Solution

Technically, no. There is only the regular role="navigation". However, the HTML5 spec used to say of the nav element:

only sections that consist of primary navigation blocks are appropriate for the nav element.

It now says:

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

Reference

As such, the nav element is only really for things like primary navigation (navigating between pages on your site), and secondary navigation (navigating between sections on the current page). Therefore, if you need something to identify the primary navigation as you have too many nav elements, there is a chance you are using it incorrectly.

Of course, the spec isn’t 100% conclusive on what should and should not be a nav element. I’d suggest looking at each of your navs and considering if it is needed or not.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top