WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Navigation lists and headers - best practise?

for

From: Jon Gunderson
Date: Aug 25, 2006 9:10AM

These are the header rules we are using with the Functional Accessibility Evaluator[1]:

Section Headings
Rule 1: Header elements should preceed lists that are primarily links (Navigation bars)

Rule 2: Each page should have a unique h1 element and header elements that follow it should be properly nested.

Rule 3: The percentage of text content contained in header elements (h1..h6) should range between approximately 3 and 9.

Rule 4: H1 content should be a subset of the TITLE element content

Rule 5: There should be no more than 2 H1 on a web resource

I would be interested in comments on these rules.

Jon

[1] Functional Web Accessibility Evaluator
http://fae.cita.uiuc.edu


---- Original message ----
>Date: Fri, 25 Aug 2006 09:29:50 -0500
>From: "Moore, Michael" < <EMAIL REMOVED> >
>Subject: RE: [WebAIM] Navigation lists and headers - best practise?
>To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>
>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
>
>
>