472,805 Members | 975 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,805 software developers and data experts.

best way to markup navigation menus?

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
4 3861
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
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
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
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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

24
by: delerious | last post by:
Hi, I am designing a web site that will that showcase a bunch of vacation pictures. It will have a banner and a navigation menu (consisting of 13 rectangular images that can be clicked). I am...
131
by: Peter Foti | last post by:
Simple question... which is better to use for defining font sizes and why? px and em seem to be the leading candidates. I know what the general answer is going to be, but I'm hoping to ultimately...
145
by: Mark Johnson | last post by:
Oddly enough, I found it difficult, using Google, to find a list of best-of sites based on the quality of their css packages. So I'd ask. Does anyone know of particularly good sites which are in...
1
by: Bryan | last post by:
I've been trying to figure out how to do this for the past 2 days and am finally tossing in the towel. No matter what I do, I just can't seem to get it to work and haven't been able to find any...
2
by: Dan V. | last post by:
What do you recommend to use for saving time and get great results for making image and css buttons on a site? Also top tabs like for navigation. Separate question maybe is what is the best tool...
136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
2
by: Jay | last post by:
I have used Smart Navigation on several projects and it works wonderfully. For my last project I used some javascript menus. SmartNavigation caused them to not function. So I used SmartScoller...
10
by: EA | last post by:
I am sure I must be missing something about building navigation bars with CSS. Yes it is a very clever and efficient way to format navigation structures on simple one navigation level webs, i.e....
4
by: robert.waters | last post by:
Hello, I have a main form that is maximized when my application loads; this main form contains links to all other forms. I've had to specify the Popup property of these other forms, so that...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.