Multiple Headers and ARIA Roles

Question

I have an HTML Structure which really has 2 headers: At the tippity top of the page it has some navigation items and buttons, below that is another section which holds the logo and what I would call the main navigation.

Both are sectioned off in wrappers because of full width CSS3 gradients so my structure looks something like this:

<div id="topWrap">
    <div id="topNavWrap">
        <nav id="utilityLinks"> 
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Page</a></li>
                <li><a href="#">Page</a></li>
                <li><a href="#">Page</a></li>
                <li><a href="#">Page</a></li>
            </ul>
        </nav>
        <div id="quickLinks">
            <ul>
                <li><a href="#">Login</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

<div id="headerWrap">
    <div id="header">
        <div id="logo"><a href="#"><img src="logo.png" /></a></div>
        <nav id="mainNav">
            <ul>
                <li><a href="#">Main Service Page</a></li>
                <li><a href="#">Main Service Page</a></li>
                <li><a href="#">Main Service Page</a></li>
                <li><a href="#">Main Service Page</a></li>
                <li><a href="#">Main Service Page</a></li>
            </ul>
        </nav>
    </div>
</div>

My question is:

1. In this situation is it acceptable to wrap both of these nav elements in a header element, do I just wrap my main nav and logo in a header element, or do I wrap both in one big header element?

2. When using Aria, should I use role="main" on my main navigation or my main header element?

Answer 1

If they are using nav elements you shouldn't simply wrap them in headers. Although you can use multiple header elements in a page, they should represent the top of a 'section', a content area.

A more suitable HTML setup would be:

<header id="topWrap" role="banner">
  <div id="topNavWrap">
      <nav id="utilityLinks" role="navigation" aria-describedby="utilityLinksH2"> 
          <h2 class="at" id="utilityLinksH2">Site menu</h2>
          <ul>
              <li><a href="#">Home</a></li>
              ...
          </ul>
      </nav>
      <div id="quickLinks">
          <ul>
              <li><a href="#">Login</a></li>
              ...
          </ul>
      </div>
  </div>

  <div id="headerWrap">
    <div id="header">
      <div id="logo"><a href="#"><img src="logo.png" /></a></div>
      <nav id="mainNav" aria-describedby="mainNavH2">
         <h2 class="at" id="mainNavH2">Service menu</h2>
         <ul>
              <li><a href="#">Main Service Page</a></li>
              ...
         </ul>
      </nav>
    </div>
  </div>
</header>

Notable points are:

• wrapping the whole lot in a header, with a role of banner. which should only be used once on a page to denote site furniture at the top of the page. (When used from the body the header applies to the, see the last example in the HTML5 spec.)
• Labelling each nav with a hidden sub-heading (use .at to move it offscreen), with aria-describedby.

Main should wrap the main content of the page (that is unique to the page), generally starting just above a H1. There should be only one.

Answer 2

Yes, it makes sense to use header for both of these.

As header has no influence on the document outline, it’s up to you use one or several header elements; it doesn’t affect the meaning. If there is no reason not to use one element (i.e., there is no content inbetween that should not be part of header), go with one element.

The ARIA role main is for the main content of a page. Navigation is typically not the main content, unless it’s the only content and purpose of a page. However, in that case you wouldn’t use the header element, as its job is to "exclude" content that is not considered to be part of the main content.