Headings, heading hierarchy, and document outlines

Recently my coworkers and I have been discussing HTML headings and heading hierarchy. This may not sound like something you need to spend a lot of time discussing, but there are some situations when it seems very difficult to find a solution without compromises.

The importance of headings

First a little detour about the function and importance of headings in HTML. If you already know why headings are important, feel free to skip to the next section.

HTML headings, created with the h1-h6 elements, are very useful and should be used for anything that visually looks or acts like a heading. This is partly because it is the semantically right choice, partly because it may help your search engine rankings. But the most important reason is that using real headings improves accessibility.

Screen reader users, for instance, can use keyboard shortcuts to skip from heading to heading in a document. To see this in action, check out Importance of HTML Headings for Accessibility, a video showing how a screen reader user navigates a document by skipping from one heading to another. Likewise, some browsers allow keyboard-only users to use shortcuts to skip from heading to heading, speeding up navigation through a document.

So there are several reasons to use headings, and to use them properly.

Requirements for a good document structure

The outcome of the discussions we’ve been having at the office is a number of requirements or statements, some based on what “feels right”, others based on accessibility guidelines and general best practice. What it boils down to are the following rules of thumb:

Each document should have a logical heading structure that starts at level 1 and doesn’t skip any levels
Anything that visually looks like a heading should be marked up as a real heading
The title of the document’s main content should be a level 1 heading
There should be only one level 1 heading in each document

The question I haven’t been able to find a clear answer to is this: what do you do when the document’s main heading is not the first text that should be marked up as a heading? Insert a “dummy” h1 heading at the top of the document? Let the document start with an h2 heading and give up on creating a perfect document outline? Something else?

Heading guidance

In search of some guidance, I looked at what WCAG 2.0 has to say, and found the following among the documents describing techniques for WCAG 2.0.

To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).

G141: Organizing a page using headings

In this example, the main content of the page is in the middle column of a 3-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.

H42: Using h1-h6 to identify headings

Update: Roberto Scano pointed out that these techniques refer to different WCAG 2.0 success criteria with different conformance levels.

H42: Using h1-h6 to identify headings is a sufficient technique for Success Criterion 1.3.1 (Info and Relationships), which is Level A, while G141: Organizing a page using headings is a sufficient technique for Success Criterion 2.4.10 (Section Headings), which is Level AAA.

So according to WCAG 2.0 it is more important to mark up headings as headings than to have a perfect heading hierarchy.

Possible options

Based on this I can see two viable options:

Give up on the first heading necessarily being an h1, and use lower level headings before the document title (like the second WCAG 2.0 example does).
Make sure the organisation’s logo is early enough in the markup to always be able to serve as the first heading and make it an h1. Use lower level headings for any headings that come between the logo and the document title, which you also make an h1 heading.

I am leaning towards option 2, which could give a site with a three-column layout the following basic markup and heading structure:

<div id="header">
	<h1><img src="logo.gif" alt="Organisation name"></h1>
	<h2>Main menu</h2>
	<ul>
		<li></li>
	</ul>
</div>
<div id="nav-sub">
	<h2>Sub menu</h2>
	<ul>
		<li></li>
	</ul>
</div>
<div id="content-primary">
	<h1>Page title</h1>
	<p>Page content.</p>
</div>

The “Main menu” and “Sub menu” headings can, if the design requires it, be hidden visually but still provide guidance for screen reader users.

For people who use them to navigate, headings being marked up as real headings is likely to be more important than the document outline being perfect. Still, starting a page with a lower level heading just doesn’t feel right. On the other hand, having two h1 headings in the same document is seen as incorrect by some, as is making the logo a heading.

Like I said at the beginning of this post it’s hard to find a solution without compromises.

Four questions. Any answers?

So, some questions for anyone who might have some answers:

Do you have a better suggestion than the above options?
If not, which option would you say is best, and why?
Many recommend using only one h1 heading on a page. Why, exactly, and what problems would using two (or more) level 1 headings create? Some concrete examples would be nice.
Does it matter to screen reader users and others who use headings for navigation what level the first heading in a document is?

Here’s hoping for some good and conclusive answers (which is why comments are enabled for this post).

Posted on January 26, 2009 in Accessibility, (X)HTML