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


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Philip Kiff
Sent: Friday, August 25, 2006 12:01 AM
To: WebAIM Discussion List
Subject: RE: [WebAIM] Navigation lists and headers - best practise?

ph O'Connor wrote:
> Philip Kiff wrote:
>> I think it can be handy for some users if navigation menu lists are
>> preceded by headings, and I have begun to think that adding them is a

>> generally good idea, but I don't think it makes sense in all
>> circumstances. And it certainly would not make sense to specify h2
>> as the particular heading level to use.
>
> Phil,
>
> I concur that it is useful "for some users" to precede navigation menu

> lists with headings, but am not sure why H2 would not be used and
> moreover feel that it is useful for all users. Is there research or
> are there WCAG 1.0 guidelines against this practice?

I am not aware of any specific research into this. I mention one
contentious guideline interpretation below. But just to be clear, I do
think that this use of headings can be useful, and I think that using h2
may be the best choice on many sites, and generally I think this
practice supports and complements WCAG 1.0 and other web accessibility
guidelines for the reasons suggested by Jon.

My comments were not meant to suggest that one should not use h2 heading
elements. All I'm trying to get at is that I am not sure that naming h2
as the specific level to use is something that one should view as a
generally accepted "best practice".

>From my unscientific observations, I would say that the use of a
>heading to
mark up "off-left" text to introduce an unordered list used as a
navigation menu is something that many accessible designers may be
inclined towards and some are putting into practice, but it does not yet
have the status of a widely accepted "best practice". Maybe my
observations are wrong on this latter point, though this seems to be
where I am tending myself. But assuming one accepts the idea of using
headings in this way, my question is whether one should specify using h2
level heading elements or if it might not be better just to leave it at
a recommendation to use "an appropriate"
heading element.

I think one will find that there are legitimate, and possibly
irreconcilable, differences of opinion about the correct use of heading
elements generally. For instance, some people advocate the use of just
a single h1 heading element on each page, while others see that as a
waste of a heading level, especially when creating large documents which
actually make use of all 6 heading levels on some pages. Some people
suggest that the h1 should more or less duplicate the information in the
title element from the html head section. Others suggest that the h1
element should mark up the top banner of each page, thereby ensuring
that the site/brand identity is part of every page structure: the h2
would then be used as the first page-specific content heading, and if
you follow the previous method, then the h2 might therefore contain more
or less a duplicate of the title element from the html head section. I
personally haven't yet seen a convincing argument that one or the other
of these positions is clearly better (more accessible, more usable, more
standards-compliant) than the other. If that's the case, then it is
difficult to say that h2 should always be the heading used since on two
almost identical pages the relative level of h1 and h2 elements may be
interchanged.

Also, according to the WCAG 1.0, you are not supposed to skip headings:
"Since some users skim through a document by navigating its headings, it
is important to use them appropriately to convey document structure.
Users should order heading elements properly. For example, in HTML, H2
elements should follow H1 elements, H3 elements should follow H2
elements, etc.
Content developers should not "skip" levels (e.g., H1 directly to H3).
Do not use headings to create font effects; use style sheets to change
font styles for example."
(HTML Techniques, 1.2.1 Section headings,
<http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers>;)

This will not affect all sites, but you can see that in a case where the
navigation menu appears before anything else on the page, then it will
be technically incorrect to apply an h2 heading level to it, since an h2
should only appear _after_ an h1 has already appeared. Now there are
differences of opinion I think about whether or not this is actually an
accessibility issue, despite what it states in the WCAG Guidelines. And
I am not clear on whether this would actually present any real
accessibility issue for anyone.
But it would still make more sense to me in such cases to use an h1
there.
And once you've done that, then you could use another h1 for your page
title. Your h1 headings would then act as a link to your navigation
menu and your main contents. This seems defensible to me as a method of
coding.

> but am not sure why H2 would not be used and moreover feel that it is
> useful for all users.

I think again it depends on the design and coding of the site. For
instance, on a site where the nav menu is the first thing that appears
on a page (before a logo, before a title, before anything), then I don't
really see these inserted headings (h2 or h1 or whatever) as
particularly useful for any user. The navigation menu is the first
thing that any browser is going to get (visual or aural). If the user
wants to go to the navigation menu, they will not enter into a headings
reading mode, they will just start to read again at the top of the page
or jump to the top of the page. The addition of a heading in such a
case is just slowing down a screen reader's access to your menu since
they have to listen to the heading before they get to listen to your
menu. I can even imagine a case where a user wants to jump to the page
content by using some kind of heading reading mode, and that user would
have to repeatedly listen to the menu heading when what they really
wanted was to use the headings specifically to skip the navigation menu.
That's not saying that the content becomes inaccessible, but in terms of
a streamlined interface (i.e. best practices in terms of "usability"), I
can imagine particular cases where using the h2 in this way is not
useful for all users, and hence why I'm not sure about identifying it as
a "best practice".

Phil.


Address list
messages to <EMAIL REMOVED>