best way to markup navigation menus?

Dave Patton

Using my About page as an example:
http://members.shaw.ca/davepatton/about.html

What is the best/proper way to markup a page such as
this that has "the main body" and "a navigation menu"?

It has been suggested before that I should have the
navigation menu at the end of the HTML, so that a
screen reader doesn't have to read it to get to
the content, with the possible exception of having
it at the top of the HTML for the site's homepage.

It has also been suggested that there should be a link
at the start of the HTML to skip to the navigation menu,
and that this link should be hidden using CSS.

The most recent suggestion is that the "On This Page"
information should be at the start of the HTML, to serve
as a 'table of contents', along with a 'skip to navigation
menu' link, and that the "At This Site" information should
be at the end of the HTHL.

So, do you think this is the "best/proper" way to do the markup?
<div>
<h1>Page Title</h1>
<div id="toc">
<h2>On This Page:</h2>
<ul>....</ul>
<div>
<div id="skiptonav">
<p><a href="#navmenu">Skip to Navigation Menu</a></p>
</div>
<div id="content">
<p>...</p>
</div>
<div id="navmenu">
<h2>At This Site</h2>
<ul>....</ul>
<div>

--
Dave Patton
Canadian Coordinator, Degree Confluence Project
http://www.confluence.org/
My website: http://members.shaw.ca/davepatton/

Jul 20 '05 #1

brucie

in post: <news:Xn*********************************@24.71.22 3.159>
Dave Patton <sp**@trap.invalid> said:

It has been suggested before that I should have the
navigation menu at the end of the HTML,
it is likely that a visitor would want the content of the page before
the nav to take them away from the page.
so that a screen reader doesn't have to read it to get to the content,
any decent assistive tech has the ability to skip goodies in a variety
of different ways.
It has also been suggested that there should be a link
at the start of the HTML to skip to the navigation menu,
see above. you don't need to reinvent the wheel.
and that this link should be hidden using CSS.

which may also hide it from the assistive tech and small visible images
may be filtered out by proxies/filters as a webbug.

as you may have guessed i don't agree with the use of skip links, it
gives me a nasty patronizing taste in my mouth. ptooy.
--
b r u c i e

Jul 20 '05 #2

Spartanicus

Dave Patton <sp**@trap.invalid> wrote:

Using my About page as an example:
http://members.shaw.ca/davepatton/about.html

What is the best/proper way to markup a page such as
this that has "the main body" and "a navigation menu"?

It has been suggested before that I should have the
navigation menu at the end of the HTML, so that a
screen reader doesn't have to read it to get to
the content
Good advice. Also helps to prevent your nav bar/section links from being
listed in SE's "summary" for certain types of searches.
, with the possible exception of having
it at the top of the HTML for the site's homepage.
I see no reason why there should be an exception for the index page. If
you are going to use a site wide nav then every link from the nav
bar/section should also appear in the "content" section of the index
page along with text explaining what can be found there.
It has also been suggested that there should be a link
at the start of the HTML to skip to the navigation menu,
and that this link should be hidden using CSS.

Bad form imo.

Using the provided "about page" example you have 2 options: float the
content to the left thus allowing you to place the nav after the content
in the html, or use css absolute positioning. If like in your example
you can use floats then they are probably the easier option. Css
absolute positioning requires more effort to maintain flexibility, and
for more extreme zooming you typically can't prevent it from breaking.

--
Spartanicus

Jul 20 '05 #3

Dave Patton

Spartanicus <me@privacy.net> wrote in
news:ng********************************@news.spart anicus.utvinternet.ie:

Dave Patton <sp**@trap.invalid> wrote:

Using my About page as an example:
http://members.shaw.ca/davepatton/about.html

What is the best/proper way to markup a page such as
this that has "the main body" and "a navigation menu"? It has been suggested before that I should have the
navigation menu at the end of the HTML, so that a
screen reader doesn't have to read it to get to
the content , with the possible exception of having
it at the top of the HTML for the site's homepage.
I see no reason why there should be an exception for the index page.

The reason I was asking was that on Jun 12th, in the thread
"Heading-related HTML issues" in this group, Jukka K. Korpela said
"except perhaps on the _main_ page. When entering a main page,
the user _might_ wish to hear the table of content first".
If you are going to use a site wide nav then every link from the nav
bar/section should also appear in the "content" section of the index
page along with text explaining what can be found there.

You mean like I have on my site's index page?
http://members.shaw.ca/davepatton/index.html

It has also been suggested that there should be a link
at the start of the HTML to skip to the navigation menu,
and that this link should be hidden using CSS.

Bad form imo.

June 10th, in the "Heading-related HTML issues" thread,
Lachlan Hunt said "You can either put the site navigation
at the top or bottom. Either way, be sure to include a
skip link to either skip to content or skip to navigation,
depending whether it's at the top or bottom. You can hide
this skip link with CSS, but it's visible when the document
is not styled".

July 9th, in the "Site review request: www.elac.bc.ca" thread
in this group, "jake" said:
For benefit of assistive technology (AT) users:
Consider:
(a) Position the 'On this page' portion of the menu so that it gets
read at the *start* of the page -- not at the end. i.e. So it acts
as a Table of Contents.
(b) Provide a 'skip to navigation' link at the start of each page so
that a user can get quickly to the 'At this site' portion of the menu.

In other words, I've seen contradictory suggestions for
'the best way to do things', some of it from 'well known'
people in these newsgroups, so that's why I was asking :-)
Thanks to you and brucie for the feedback.

--
Dave Patton
Canadian Coordinator, Degree Confluence Project
http://www.confluence.org/
My website: http://members.shaw.ca/davepatton/

Jul 20 '05 #4

Spartanicus

Dave Patton <sp**@trap.invalid> wrote:

The reason I was asking was that on Jun 12th, in the thread
"Heading-related HTML issues" in this group, Jukka K. Korpela said
"except perhaps on the _main_ page. When entering a main page,
the user _might_ wish to hear the table of content first".

If you are going to use a site wide nav then every link from the nav
bar/section should also appear in the "content" section of the index
page along with text explaining what can be found there.

You mean like I have on my site's index page?
http://members.shaw.ca/davepatton/index.html

Yes, note that this also removes the reasoning for placing the nav
section first in the html for the index page.

It has also been suggested that there should be a link
at the start of the HTML to skip to the navigation menu,
and that this link should be hidden using CSS.

Bad form imo.

June 10th, in the "Heading-related HTML issues" thread,
Lachlan Hunt said "You can either put the site navigation
at the top or bottom. Either way, be sure to include a
skip link to either skip to content or skip to navigation,
depending whether it's at the top or bottom. You can hide
this skip link with CSS, but it's visible when the document
is not styled".

July 9th, in the "Site review request: www.elac.bc.ca" thread
in this group, "jake" said:
For benefit of assistive technology (AT) users:
Consider:
(a) Position the 'On this page' portion of the menu so that it gets
read at the *start* of the page -- not at the end. i.e. So it acts
as a Table of Contents.
(b) Provide a 'skip to navigation' link at the start of each page so
that a user can get quickly to the 'At this site' portion of the menu.

In other words, I've seen contradictory suggestions for
'the best way to do things', some of it from 'well known'
people in these newsgroups

To many people make assumptions about what does and does not work for
disabled people.

"Skip to" links typically aim to get around the problem of non
linearizing single table layouts. Nowadays a css layout means we can
prevent creating the problem, hence "skip to" links are no longer
useful.

Designing/coding for the disabled is a niche skill that requires
considerable specialist knowledge and experience. It requires regular
testing with soft and hardware used by various disabled people (many
forms of disability exist), contacts with those people to get their
opinions and studying their actual behaviour in user tests.

Imo most web authors should concentrate on cross UA, cross platform
access (including non-graphical/text mode access) and that their text
can be zoomed. Do that and you'll have a site with pretty good
accessibility. Attempts to do more are likely to make accessibility
worse, not better.

--
Spartanicus

Jul 20 '05 #5