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

Thanks, everyone. Your comments were helpful.
Mike
 

    On Wednesday, April 20, 2016 1:06 PM, Wayne Dick <wayneedick@gmail.com> wrote:
 

 As a user I don't care much how the author structures the objects. I just like the ability to jump to regions that the author feels are important header, nav and footer groups. To me these objects mean. Here is where I keep preface information  for the header. Here is where I keep my important links for nav, and here is where I keep my post information for the footer. To me the author can put anything they want in these fields. That is the author's business. I just want to be able to find the info and it's role.

Wayne

On Wed, Apr 20, 2016 at 1:41 AM, Alastair Campbell <acampbell@nomensa.com> wrote:

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