2

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.

4
  • What would you expect accessibility tools to do with the primary vs secondary information?
    – Alohci
    May 28, 2013 at 16:28
  • I guess you could thow in <nav ... aria-label="Main menu"> Or use aria-describedby
    – Ryan B
    May 28, 2013 at 19:10
  • @Alohci I guess it would be useful to know which of the numerous navs is the primary one rather than having to move through each <nav> to see which one contains all the links. The situation I'm trying to cover is that the first <nav> that would be encountered by an accessibility tool / crawler is the secondary one. It contains only a subset of links on the site. Whereas the primary <nav> located further down in the page contains all links.
    – Prembo
    May 29, 2013 at 16:39
  • 1
    There is a method, answered here: stackoverflow.com/questions/6061867/html5-sub-nav-semantics/…
    – AlastairC
    Sep 6, 2013 at 10:14

1 Answer 1

7

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.

3
  • That's very interesting. The site that I'm having this dilemma in has a secondary menu at top of page/document containing general links such as About Us, Contact Us, Secure Login, etc. Whereas in desktop mode (the site is responsive), the primary <nav> has the major products / services links visible (in mobile mode all links become visible in this <nav> and the other nav menus are hidden). I think
    – Prembo
    May 30, 2013 at 3:23
  • ... that not using the a <nav> for what I'm termed the 'secondary menu' should achieve the accessibility goal. Thanks for the W3 link - it explains the intention of the <nav> element clearly.
    – Prembo
    May 30, 2013 at 3:31
  • +1 - I totally agree with the last sentence. The spec never gives indication about implementation, which is left to us to be inferred and eventually best practices will set a "de facto" standard
    – Luca
    Jun 3, 2013 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.