I'm contemplating an alternative to the usual nested-list nav menu
structure and solicit your opinions.
First, here's a standard nested menu. Opinions vary as to whether
it's kosher to include all the sub-menus nested inside the parent and
conceal the inactive sub-menus from visual users. I've included all
the sub-menus in this markup for the sake of illustration:
<h3>Navigation</h3>
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="products.php">Products</a>
<ul>
<li><a href="widgets.php">Widgets</a>
<li><a href="whatsits.php">Whatsits</a>
<li><a href="thingummies.php">Thingummies</a>
</ul>
</li>
<li><a href="philosophies.php">Philosophies</a>
<ul>
<li><a href="tao.php">Tao</a>
<li><a href="zen.php">Zen</a>
</ul>
</li>
</ul>
This makes semantic sense but could wear on your patience if you're
hearing the page through a screen-reader. If you activate a link in
the parent menu and bring up a new page that again contains the
navigation menu, how do you know that a sub-menu exists inside the
parent item? Do you have to listen through all the menu options
you've already heard in order to discover and hear the new sub-menu?
As an alternative, I'm considering a series of linked lists instead
of one complex nested list. In the following example, the Products
and Philosophies sub-menus appear after, not nested inside, the
top-level menu. The Products and Philosophies items in the top-level
menu now contain URI fragment identifiers (same-page anchors) linking
to their sub-menus farther down the page. If you've navigated to the
Products home page, I'd also add a skip link to the Products sub-menu
so you wouldn't be forced to hear the top-level nav menu again:
<p><a href="#products">Skip to Products</a></p>
<h3>Navigation</h3>
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#philosophies">Philosophies</a></li>
</ul>
<div id="products">
<h3>Products</h3>
<ul>
<li><a href="widgets.php">Widgets</a>
<li><a href="whatsits.php">Whatsits</a>
<li><a href="thingummies.php">Thingummies</a>
</ul>
</div>
<div id="philosophies">
<h3>Philosophies</h3>
<ul>
<li><a href="tao.php">Tao</a>
<li><a href="zen.php">Zen</a>
</ul>
</div>
Advantages:
1) faster & easier for non-visual users to navigate (I hope).
2) lends itself easily to visual layouts in which the sub-menu lies
in a column or row adjacent to the parent menu.
3) sub-menus can be displayed or concealed for visual users in the
same ways as nested sub-menus are.
Disadvantages:
1) The semantic relationship of parent menu item to sub-menu is
obscured if not lost.
2) Because the sub-menu is not structurally nested within the parent
item, some visual layouts of the menu will be difficult or
impossible, such as the nested folder metaphor.
Your comments?
Paul
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
