Re: Skipping of headings

Dear Oscar,

The starting point here is to understand the purpose of headings.

The top level heading H1 is the title of the page primary content. That is why it is always similar to the <title> element in the <head> section of the html.
Section headings (H2 – H6) introduce the various aspects of the page content and should be followed by some content that expands upon the section heading.

If we look at your example we see that the page starts with a banner containing a level 2 heading that simply says the name of the site. This is not a section heading, it is a statement and therefore does not require an HTML heading element. It is a block of text (paragraph or span).

Next we have the navigation section which is a list of links. This is content so it needs a section heading. However, even though it is the first bit of content, it cannot have a level 1 heading because it does not describe the page content, so it should have a level 2 section heading, not some random section heading. If you give it a level 5 then the question is “where are levels 2 – 4 ?”. A blind user will think she has missed something.

The <main> section starts with the top level heading <H1> which is correct as it indicates that here we have the main content of the page. this is then followed by the page content divided up into sub-sections organised in a logical tree structure. Also correct.

Finally we have some aside and footer elements. These are additional content, usually interesting bits and bobs and more detailed site-wide links etc. As these are new topics (not necessarily relevant to the main heading) there is room for confusion. The options are to either make it clear that we start anew by using a second <H1> or use the same approach as at the beginning of the page and start with a H2 and make sure that the textual content makes it clear that we have started anew such as “Additional Resources”. As a user I prefer the first option, but Search Engines and WCAG  prefer the second. (see  http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H42.html  ) Either way it is not a good idea to suddenly introduce random heading levels such as H6 because it really confuses blind users.

Regards
Richard

Richard Warren
Technical Manager
Website Auditing Limited (Userite)
http://www.userite.com


------------------------------------------------------------------

From: Oscar Cao 
Sent: Monday, October 20, 2014 12:57 PM
To: 'WAI Interest Group' 
Subject: Skipping of headings

Hello All

 

I’m sure there’s been quite a bit of debate on the skipping of headings issue. I totally agree headings that reside within the “main content area” of the page should not have any skipping of headings whatsoever. However, for SEO and various other reasons, headings outside the “main content area” should be allowed to skip heading levels. What I mean by this is, for example:

 

<header role=”banner”>

<h2>My website’s name</h2>

</header>

<div>

<nav role=”navigation”>

<h5>Left Hand Navigation</h5>

<ul>…</ul>

</nav>

</div>

<section role=”main”>

<h1>main heading</h1>

<p>…</p>

<h2>second level heading</h2>

<p>…</p>

<h3>third level heading</h3>

<p>…</p>

Etc…

</section>

<aside class=”side”>

<h6>Some heading</6>

</aside>

<footer role=”contentinfo”>

<h6>Footer Links</h6>

</footer>

 

 

What I would like to know is, what is the official WCAG 2.0 stand on this specific scenario. Is this conforming to the WCAG 2.0 guidelines or non-conforming; if it is the latter, what is the correct solution/markup to use?

 

Thanks,

Oscar

Received on Tuesday, 21 October 2014 11:00:00 UTC