11

A quick question re: HTML5 nav, specifically that of sub navigation (from a semantic point of view).

I have <nav> in the header for the main menu. Down the left of a standard page I have second level nav and down the right third level nav (no, I didn’t design the site). Is there anything I can do HTML5/ARIA wise to differentiate between the 3 menus? Or are they all simple <nav> blocks?

I dont even think I need <aside> in either left or right column as there isnt any additional info apart from these actual menus.

Any thoughts/advice would be much appreciated.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Adi
  • 4,034
  • 13
  • 56
  • 78

2 Answers2

9

This may be an old question, but there is a better answer now:

You can label each navigation section implicitly using headings, and explicitly use WAI-ARIA attributes:

<nav role="navigation" aria-labelledby="firstLabel">
  <h2 span id="firstLabel" class="hidden">Main menu</h2>
  <ul/>
</nav>
...
<nav role="navigation" aria-labelledby="secondLabel">
  <h2 span id="secondLabel" class="hidden">Local pages</h2>
  <ul/>
</nav>

For user-agents like screenreaders, they can report that as "Local pages, navigation" (although they vary in how it's reported).

Read more on a W3C wiki page on using labelledby.

AlastairC
  • 3,277
  • 21
  • 15
3

I would differentiate between the navigation sections by giving them semantically relevant ids and by placing them in order of importance in the HTML code, along the following lines:

<body>
  <nav id="main-navigation">
    <!-- The main menu goes here -->
  </nav>
  <nav id="sub-navigation">
    <!-- The left hand menu goes here -->
  </nav>
  <nav id="leaf-navigation">
    <!-- The right hand third level menu goes here -->
  </nav>

  <section id="content">
    <!-- Actual page content -->
  </section>
</body>

Other than that, I see no real need for further differentiation between the sections. The above approach is easy to understand, should be reasonably easy to style and is semantically clear, which is certainly good enough for me.

Pär Wieslander
  • 28,374
  • 7
  • 55
  • 54
  • 4
    The [**W3 HTML5 spec**](http://www.w3.org/wiki/HTML/Elements/nav) clarifies: `"The nav element is appropriate only for sections that consist of major navigation blocks."` It goes on to say, that for a group of links in a footer a nav element is overkill. **It looks to me like sub-navigation is totally up for debate.** I'm in a similar situation as @Adi, the question asker: I can't decide if my DHTML content-tabs should be within a – ChaseMoskal Sep 06 '13 at 00:45
  • For a `nav` element, adding an `aria-label` containing the word 'navigation' is redundant as the `nav` element will be announced as 'navigation', so the suggestion would be to presume that the label will be followed by a comma and the word 'navigation', so 'main', 'sub' etc. would be sufficient. – Dave Everitt Feb 07 '21 at 16:09