WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Navigation lists and headers - best practise?

for

From: Moore, Michael
Date: Aug 25, 2006 8:40AM

Just thought that I would throw my two cents worth into the discussion.

My experience with screen readers is that headings are extremely useful
when navigating a page using screen readers. Much more so than "skip"
links.

Thus a heading used to navigation can be very useful. I can move from
content to navigation sections quickly or the reverse through the
headings list or by using the "h" key in JAWS.

I went to a panel discussion at SXSW this past spring where Eric Myer
discussed a strategy that he has used for setting headings:
<h1> is the most important thing on the page.
<h2> etc. set up relative levels of importance for the subject
matter on the page.
He also said that many folks would label him a heretic to web standards,
I am paraphrasing of course. And sitting in the audience, my gut
reaction was "No! this totally violates heading structure."

Having had a few months to mull it over though it makes sense. If I
Identify my navigation sections through lower level headings, and have
my main topic for the page headed with an <h1> I can create a very
structurally useful page for everyone.

Consider the following page structure.

Top area: includes a branding logo, skiplink, style switcher, search
form, main navigation, and some nice decorative graphics. The main
navigation is prefaced with an <h2> and contained within a list. The
<h2> may be a graphic and may not be obvious to someone using a
graphical browser without a screen reader.

Left side: section navigation contained within a list and prefaced with
an <h2>

Right side: Main content, Primary article leads with an <h1> and is the
destination for the skip link. The content is organized with a properly
nested heading structure.
<h1>Topic<h1>
<h2>subTopic 1<h2>
<h2>subTopic 2<h2>
<h3>sub-subTopic</h3>...

Now if I view this page with a graphical browser I understand the
organization visually, assuming that I have styled things well.

If I explore the page with JAWS (the screen reader used by my agency), I
can quickly get to the content using the skip link, a couple of taps on
the "h" key or a single tap on the "1" key. I can move to the
navigation menus with either the "h" key, the headings list, the "2"
key, using the links list, or even by bringing up a list of lists. These
options all improve usability of the site with the reader.

If this site is visited by a bot, it can be effectively, and accurately
indexed.

So, in all I think that the use of headings can greatly improve the
usability of sites with screen readers and browsers that support heading
navigation. Strict adherence to heading nesting is far less important
than logical and consistent use of headings based upon the "importance"
of the section within a page.

So call me a heretic, I will be in good company.

Mike