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

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
>
>
>