WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Navigation lists and headers - best practise?

for

From: Joseph O'Connor
Date: Aug 24, 2006 2:20PM

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