E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 16 (In chronological order)

From: Penny Roberts
Date: Wed, Aug 23 2006 9:10AM
Subject: Navigation lists and headers - best practise?
No previous message | Next message →

This is going off at a tangent from the original post so I've started a
new thread.

In response to the thread "are there any accessibility testing best
practices" Jon Gunderson posted a link to the Functional Web
Accessibility Evaluation Tool.
I've looked at the UIUC "Best Practices" site before but I must have
missed this: http://cita.uiuc.edu/html-best-practices/nav/menus.php
Does everyone agree that it is best practice to have an h2 heading
before a ul used for navigation? I've never come across the suggestion
before so I'm interested to know how well supported (or not)+ the idea is.

Penny

From: Philip Kiff
Date: Wed, Aug 23 2006 1:20PM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | Next message →

Penny wrote:
> I've looked at the UIUC "Best Practices" site before but I must have
> missed this: http://cita.uiuc.edu/html-best-practices/nav/menus.php
> Does everyone agree that it is best practice to have an h2 heading
> before a ul used for navigation?

I think the UIUC best practices site is a great resource; however, in this
particular case, I think their recommendation is specific to their own
site -- i.e. the document is a list of best practices for folks working on
various sections of the University of Illinois at Urbana/Champaign's
website, and not all the practices they list are necessarily meant to apply
generally to all other public websites everywhere.

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.

The appropriate heading level will depend on how headings are used elsewhere
on the site, and it will also depend on where the navigation appears in the
source order of the page code. For example, if the navigation menu is the
first thing that appears in the source order of the page's X/HTML code, then
it would be technically incorrect to apply anything except an h1 level
heading to the menu (since the first heading on a page must be h1 to conform
to other guidelines). In practical terms, I'm not sure that marking such
menus (ones that appear at the very top of the source order of the page)
with a heading is necessary or would lead to better ease of use for people
with disabilities or to PDA/cell phone/text-only browsers.

Phil.

From: Jon Gunderson
Date: Wed, Aug 23 2006 4:00PM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →

It allows navigation bars:

1. Many browsers and assistive technologies allow for header navigation

2. When stylesheets are turned off the list of links has a label related to what the links are

3. Use of lists of links for navigation bars seems to be the standard in the web standards movement.

Jon


---- Original message ----
>Date: Wed, 23 Aug 2006 16:05:14 +0100
>From: Penny Roberts < = EMAIL ADDRESS REMOVED = >
>Subject: [WebAIM] Navigation lists and headers - best practise?
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>This is going off at a tangent from the original post so I've started a
>new thread.
>
> In response to the thread "are there any accessibility testing best
>practices" Jon Gunderson posted a link to the Functional Web
>Accessibility Evaluation Tool.
> I've looked at the UIUC "Best Practices" site before but I must have
>missed this: http://cita.uiuc.edu/html-best-practices/nav/menus.php
> Does everyone agree that it is best practice to have an h2 heading
>before a ul used for navigation? I've never come across the suggestion
>before so I'm interested to know how well supported (or not)+ the idea is.
>
>Penny
>
>
>


Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)

Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313

E-mail: = EMAIL ADDRESS REMOVED =

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/

From: Jon Gunderson
Date: Wed, Aug 23 2006 4:20PM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | Next message →

The best pracitces reseverve the H1 element for titling of a web resource[1] and should be a subset of the TITLE element content. in the case where a resource is only a navgation bar and the H1 could be used to label the list of links.

One of the main purposes of developing the best practices is to develop automation tools that can verify their use for functional accessibility.

These tools include:

Mozilla/Firefox Accessibility Toolbar
http://firefox.cita.uiuc.edu

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

Jon

[1] http://cita.uiuc.edu/html-best-practices/nav/title.php



---- Original message ----
>Date: Wed, 23 Aug 2006 15:15:24 -0400
>From: "Philip Kiff" < = EMAIL ADDRESS REMOVED = >
>Subject: RE: [WebAIM] Navigation lists and headers - best practise?
>To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>
>Penny wrote:
>> I've looked at the UIUC "Best Practices" site before but I must have
>> missed this: http://cita.uiuc.edu/html-best-practices/nav/menus.php
>> Does everyone agree that it is best practice to have an h2 heading
>> before a ul used for navigation?
>
>I think the UIUC best practices site is a great resource; however, in this
>particular case, I think their recommendation is specific to their own
>site -- i.e. the document is a list of best practices for folks working on
>various sections of the University of Illinois at Urbana/Champaign's
>website, and not all the practices they list are necessarily meant to apply
>generally to all other public websites everywhere.
>
>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.
>
>The appropriate heading level will depend on how headings are used elsewhere
>on the site, and it will also depend on where the navigation appears in the
>source order of the page code. For example, if the navigation menu is the
>first thing that appears in the source order of the page's X/HTML code, then
>it would be technically incorrect to apply anything except an h1 level
>heading to the menu (since the first heading on a page must be h1 to conform
>to other guidelines). In practical terms, I'm not sure that marking such
>menus (ones that appear at the very top of the source order of the page)
>with a heading is necessary or would lead to better ease of use for people
>with disabilities or to PDA/cell phone/text-only browsers.
>
>Phil.
>
>
>
>


Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)

Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313

E-mail: = EMAIL ADDRESS REMOVED =

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/

From: Penny Roberts
Date: Thu, Aug 24 2006 3:00AM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →

Jon Gunderson wrote:
> One of the main purposes of developing the best practices is to develop automation tools that can verify their use for functional accessibility.

> Functional Web Accessibility Evaluator
> http://fae.cita.uiuc.edu

It was using this that alerted me to the list heading idea (because the
page that I tested didn't have one!), which I had never come across
before.
I like the evaluator: it gives a different perspective to other
accessibility testers.

Penny

From: Penny Roberts
Date: Thu, Aug 24 2006 3:40AM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →

Jon Gunderson wrote:
> It allows navigation bars:
>
> 1. Many browsers and assistive technologies allow for header navigation


But is it a necessity? (I'm not saying that it *isn't* I'm just
inviting discussion.)


> 2. When stylesheets are turned off the list of links has a label related to what the links are


But if the page is written so that it still makes sense with style
disabled isn't it still obvious what a list of links is?
The best practice page for this suggests using CSS to hide it from
graphocal rendering so presumably it is really aimed at non-visual
browsers. Could a screen reader user comment on the need for a heading?

Penny

From: ben morrison
Date: Thu, Aug 24 2006 3:50AM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →

On 8/24/06, Penny Roberts < = EMAIL ADDRESS REMOVED = > wrote:
> Jon Gunderson wrote:
> > It allows navigation bars:
> >
> > 1. Many browsers and assistive technologies allow for header navigation
>
>
> But is it a necessity? (I'm not saying that it *isn't* I'm just
> inviting discussion.)
>
>
> > 2. When stylesheets are turned off the list of links has a label related to what the links are
>
>
> But if the page is written so that it still makes sense with style
> disabled isn't it still obvious what a list of links is?
> The best practice page for this suggests using CSS to hide it from
> graphocal rendering so presumably it is really aimed at non-visual
> browsers. Could a screen reader user comment on the need for a heading?


Recently I've started using headings for subnavigation. For example,
you have clicked on about us:

<h2>Explore about us</h2>
<ul><li> ..... </li></ul>

It hepls visual users and I would guess screen readers as well. I do
use source ordering so my main content will be before my subnavigation
so I can use a h2.

ben

--
Ben Morrison

From: Austin, Darrel
Date: Thu, Aug 24 2006 2:10PM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | Next message →

> Recently I've started using headings for subnavigation. For
> example, you have clicked on about us:
>
> <h2>Explore about us</h2>
> <ul><li> ..... </li></ul>

I've been doing something similar with DLs. In terms of accessibility, I
don't know if this is any better/worse, but I tend to like the semantics
of it:

<dl>
<dt>About Us</dt>
<dd>
<ul>
<li>Our Team</li>
<li>Our History</li>
</ul>
</dd>
<dt>etc...

-Darrel

From: Joseph O'Connor
Date: Thu, Aug 24 2006 2:20PM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →

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 refer you to:
http://www.csun.edu

We don't have any other uses for H2 -- at least none that appear to
me but perhaps someone can suggest an alternative scheme.

We are currently undecided as to just what our H1 should be on this
page, but are leaning towards the treatment used on the University of
Michigan site:

http://www.umich.edu

The umich.edu site wraps their university logo in an H1 heading.
Interesting... and it reads well in JAWS.

I don't agree with the text that follows the logo on the umich.edu
site, text that is only apparent to screen reader users. Our
alternate media specialist tells me that occasionally a sighted user
will be working with a non-sighted user and that it is confusing to
the sighted user to hear text that isn't apparently there. I call
this poetic justice, but it bothers her:-o

She also doesn't like our "off-left" accesskey instructions and we're
currently casting about for an alternative method. The "off-left"
method was developed by Bob Easton of IBM. (By the way, "off-right"
doesn't work.)

"off-left" -- any block of text given this class will be positioned
off left:

/* sometimes coded as .access */
.off-left {
position: absolute;
left: -3000px;
width: 500px;
}

The "off-left" method hides text from view, but allows that text to
be spoken to a screen reader user. Trouble is, our accesskey
instructions are not apparent to sighted users who may benefit. They
need to visit our Accessibility page. Back to the drawing board:-(

That said, we use H2's for our navigation menu list headings like so:

<h2> RESOURCES</h2>
<ul>
<li><a href="http://www.csun.edu/aboutCSUN/index.html">About
CSUN</a></li>
/* and etc. */

Joseph O'Connor
CSUN Manager University Web Communications

From: Jon Gunderson
Date: Thu, Aug 24 2006 4:00PM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | Next message →

The use of headers (h2 etc...) allows for keyboard navigation to the begining of thelist. I don't know if there are any technologies thet provide keyboard navigation to DT elements.

Jon


---- Original message ----
>Date: Thu, 24 Aug 2006 15:00:47 -0500
>From: "Austin, Darrel" < = EMAIL ADDRESS REMOVED = >
>Subject: RE: [WebAIM] Navigation lists and headers - best practise?
>To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>
>> Recently I've started using headings for subnavigation. For
>> example, you have clicked on about us:
>>
>> <h2>Explore about us</h2>
>> <ul><li> ..... </li></ul>
>
>I've been doing something similar with DLs. In terms of accessibility, I
>don't know if this is any better/worse, but I tend to like the semantics
>of it:
>
><dl>
><dt>About Us</dt>
><dd>
> <ul>
> <li>Our Team</li>
> <li>Our History</li>
> </ul>
></dd>
><dt>etc...
>
>-Darrel
>
>
>
>


Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)

Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313

E-mail: = EMAIL ADDRESS REMOVED =

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/

From: Philip Kiff
Date: Thu, Aug 24 2006 11:10PM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | Next message →

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.

From: Moore, Michael
Date: Fri, Aug 25 2006 8:40AM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | Next message →

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

From: Jon Gunderson
Date: Fri, Aug 25 2006 8:50AM
Subject: Re: Navigation lists and headers - best practise?
← Previous message | Next message →

We need a way to provide a label for navigation lists, so a heading seems to be the best way, since many borwsers (unfortunately IE is not in this group, but Opera [1]and Firefox with the Mozilla/Firefox Accessibility Extension [2] to) and assistive technologies can navigate to headers with the keyboard.

Jon

[1] Opera
http://www.opera.com

[2] Mozilla/Firefox Accessibility Extension
http://firefox.cita.uiuc.edu/




---- Original message ----
>Date: Thu, 24 Aug 2006 10:32:26 +0100
>From: Penny Roberts < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Navigation lists and headers - best practise?
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>Jon Gunderson wrote:
>> It allows navigation bars:
>>
>> 1. Many browsers and assistive technologies allow for header navigation
>
>
>But is it a necessity? (I'm not saying that it *isn't* I'm just
>inviting discussion.)
>
>
>> 2. When stylesheets are turned off the list of links has a label related to what the links are
>
>
>But if the page is written so that it still makes sense with style
>disabled isn't it still obvious what a list of links is?
> The best practice page for this suggests using CSS to hide it from
>graphocal rendering so presumably it is really aimed at non-visual
>browsers. Could a screen reader user comment on the need for a heading?
>
>Penny
>
>
>
>
>


Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)

Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313

E-mail: = EMAIL ADDRESS REMOVED =

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/

From: Jon Gunderson
Date: Fri, Aug 25 2006 9:10AM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | Next message →

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 ADDRESS REMOVED = >
>Subject: RE: [WebAIM] Navigation lists and headers - best practise?
>To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>
>
>

From: Moore, Michael
Date: Fri, Aug 25 2006 9:40AM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | Next message →

Jon,

My comments are in-line below:


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)
Good Idea

Rule 2: Each page should have a unique h1 element and header elements
that follow it should be properly nested.
<comment>
Not necessary, may not be desirable particularly when seeking to meet
the requirements of Rule 1, unless I misunderstand and you do allow a
freestanding h2 outside of the h1 structure.</comment>

Rule 3: The percentage of text content contained in header elements
(h1..h6) should range between approximately 3 and 9.
<comment>
Not sure I understand this, if the desire is to keep the headings
succinct then there may be a better measure. If the idea is to make
sure that each block of content is at least 10 times that of the length
of its header that does not seem to encourage an efficient writing
style. Of course for folks as wordy as me that would not be a problem
;)</comment>

Rule 4: H1 content should be a subset of the TITLE element content
<comment>
I don't agree with this either. <title>My Web Site: Home</title>
<h1>Welcome to My Web Site</h1> These are intersecting sets. A better
rule would be H1 content should include key words contained in the
title.</comment>

Rule 5: There should be no more than 2 H1 on a web resource
<comment>
Some would argue 1, I would argue that the printable version of a manual
may have need for many more. This would be nice to be a configurable
feature within the tool.</comment>


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

This is really one of the best automated tools that I have
used.</shameless plug>

Mike

From: Jon Gunderson
Date: Fri, Aug 25 2006 2:10PM
Subject: RE: Navigation lists and headers - best practise?
← Previous message | No next message

Mike,
Rule 2 should have added the phrase that headers should be properly nested after the LAST h1 element on the page.

h1 is reserved for titling and titles typically many developers want to have both parts of a title as h1s.

The two parts of a title:
Part 1: Website title
Part 2: Sub page title

In general I think h1 should only be used for sub page information, but other developers and accessibility people we have talked to feel that the website title information should also be an h1. So that is why we feel there can be 2 h1s on a resource, both still need to be a subset of the TITLE element.

The website information is usually in the banner of the web page top and the sub page information usually right be for the content. So there can be other content like navigaiton bars, contact information and other stuff between the h1s. This is why we don't start looking for propoer nesting until after the last h1.

Jon



---- Original message ----
>Date: Fri, 25 Aug 2006 10:34:08 -0500
>From: "Moore, Michael" < = EMAIL ADDRESS REMOVED = >
>Subject: RE: [WebAIM] Navigation lists and headers - best practise?
>To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>
>Jon,
>
>My comments are in-line below:
>
>
>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)
>Good Idea
>
>Rule 2: Each page should have a unique h1 element and header elements
>that follow it should be properly nested.
><comment>
>Not necessary, may not be desirable particularly when seeking to meet
>the requirements of Rule 1, unless I misunderstand and you do allow a
>freestanding h2 outside of the h1 structure.</comment>
>
>Rule 3: The percentage of text content contained in header elements
>(h1..h6) should range between approximately 3 and 9.
><comment>
>Not sure I understand this, if the desire is to keep the headings
>succinct then there may be a better measure. If the idea is to make
>sure that each block of content is at least 10 times that of the length
>of its header that does not seem to encourage an efficient writing
>style. Of course for folks as wordy as me that would not be a problem
>;)</comment>
>
>Rule 4: H1 content should be a subset of the TITLE element content
><comment>
>I don't agree with this either. <title>My Web Site: Home</title>
><h1>Welcome to My Web Site</h1> These are intersecting sets. A better
>rule would be H1 content should include key words contained in the
>title.</comment>
>
>Rule 5: There should be no more than 2 H1 on a web resource
><comment>
>Some would argue 1, I would argue that the printable version of a manual
>may have need for many more. This would be nice to be a configurable
>feature within the tool.</comment>
>
>
>[1] Functional Web Accessibility Evaluator http://fae.cita.uiuc.edu
>
>This is really one of the best automated tools that I have
>used.</shameless plug>
>
>Mike
>
>
>
>


Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)

Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313

E-mail: = EMAIL ADDRESS REMOVED =

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/