Re: Proper use of <header> and <nav> elements

Hi Mike,

I’m a little confused about whether you mean the HTML5 elements, and/or the aria landmarks? They form a venn diagram of overlapping usage! For example, the HTML5 <header> can be a root element with a role of banner, but it can also be used within a div/section to mark the header area of that section, which would include the heading(s).

For the top level landmarks, my understanding is that the key heuristics are:

  *   Contain all content.
  *   Aim for 3-6 landmarks appearing in AT so it is useful for navigation, but isn’t too busy.
  *   Separate what is repeated across pages, and what is unique to this page.

Assuming you mean the overall page layout, the header (and footer/contentinfo) should contain things that are repeated across pages, but the <main> should be content unique to the page.

If the nav is repeated across pages, then include it in the banner/header. If it is local navigation or within-page navigation, then do not include within the banner/header.

So a cut-down example might be:
<header role=“banner”>
logo, search,
<nav role=“navigation” aria-label=“Main menu”></nav>
</header>
<main>
<h1>
Content etc.
</main>
<nav role=“navigation” aria-label=“Section menu”></nav>
<footer role=“contentinfo”>
copyright, links etc.

Your example would be re-formed as:

<header role=“banner>
  <img src="images/company logo.gif" width="129" height="66" alt="Company Logo"/>
  <p>HTML5 and ARIA in Action</p>
<nav aria-label="Main navigation">
  <ul>
    <li><a href="Screen_Reader_Demo_D.html">Home</a></li>
    <li><a href="Examples.html" >Examples</a>
      <ul>
        <li><a href="A11ble_Form.html">Accessible Form</a></li>
        <li><a href="A11ble_Calendar.html">Accessible Calendar</a></li>
        <li><a href="A11ble_Dialog.html">Accessible Dialog</a></li>
        <li><a href="A11ble_Graph.html">Accessible Graph</a></li>
      </ul>
    </li>
    <li><a href="">Techniques</a></li>
  </ul>
</nav>
</header>
<nav aria-label="You are here"> Home Page
</nav>
<main>
   <h1>Screen Reader Demonstration</h1>


The homepage might be an odd case, as the <h1> could be considered for the site, but on most pages it would be the first content heading on the page.

Breadcrumbs are a difficult case though, they could be considered unique to the page or different per page, as they are a bit of both! What do other people do for breadcrumbs?

-Alastair

PS. I created this little cheatsheet of the structural elements most useful for accessibility a while ago (might need updating):
http://design4access.nomensa.com/structural-elements.html




From: Mike Elledge <melledge@yahoo.com<mailto:melledge@yahoo.com>>
Reply-To: Mike Elledge <melledge@yahoo.com<mailto:melledge@yahoo.com>>
Date: Tuesday, 19 April 2016 at 20:38
To: WCAG WG <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>
Subject: Proper use of <header> and <nav> elements
Resent-From: <w3c-wai-gl@w3.org<mailto:w3c-wai-gl@w3.org>>
Resent-Date: Tuesday, 19 April 2016 at 20:41

Hi Everyone--

I find <header>, <nav> and <menu> to be confusing.

It seems to me that <header> should encompass things like a page logo and, if present, heading(s) at the top of the page. Top-level navigation, on the other hand, should be identified by the <nav> element, and be separate. I have seen, however, top-level navigation included in the <header> tag, which seems incorrect.

I've also seen breadcrumbs identified by the <nav> element; however, if breadcrumbs are present, it seems like they and top-level navigation should be further differentiated by aria-label (i.e., "You are here" and "Main navigation", for example). I haven't used <menu> in the top navigation because it overrules the list semantics.

Like so:

<header>
  <img src="images/company logo.gif" width="129" height="66" alt="Company Logo"/>
<h1>Screen Reader Demonstration</h1>
  <p>HTML5 and ARIA in Action</p>
</header>
<nav aria-label="Main navigation">
  <ul>
    <li><a href="Screen_Reader_Demo_D.html">Home</a></li>
    <li><a href="Examples.html" >Examples</a>
      <ul>
        <li><a href="A11ble_Form.html">Accessible Form</a></li>
        <li><a href="A11ble_Calendar.html">Accessible Calendar</a></li>
        <li><a href="A11ble_Dialog.html">Accessible Dialog</a></li>
        <li><a href="A11ble_Graph.html">Accessible Graph</a></li>
      </ul>
    </li>
    <li><a href="">Techniques</a></li>
  </ul>
</nav>
<nav aria-label="You are here"> Home Page
</nav>

Does this seem correct to you?

Thanks!

Mike