tab key and pseudo class selector

[Haines Brown]

I have a drop down menu system that consists of many entries in two to
four levels. Because of the size and complexity of the menu, I have the
user hover over a menu list item to make its submenu visible.

This works fine, but I'd like to have this behavior also implemented
entirely from the keyboard. To do this I've enabled tabbing among text
strings by placing them into empty anchor elements. As a result, when I
tab to a list item text, it makes its submenu visible.

Here is an abbreviated and simplied markup to show what I mean:

<ul>
<li><a href="" id="a">Top Heading</a>
<ul id="list-a">
<li><a accesskey="a" href="<path>">a ) Subheading</a></li>
<li><a accesskey="b" href="<path>">b ) Subheading</a></li>
...

<style>
a#a:focus + ul#list-a, a#a:active + ul#list-a { display: block; }
</style>

When the user displays the submenu, he can click on it to navigate to
the <pathpage. However, I'd like to duplicate this operation from the
the keyboard. The traditional way was to use accesskey property (which
I've implemented in the example above by way of illustration). However,
using letters for access keys conflicts with browser hot keys, and not
all browsers (including my firefox/iceweasel) respond to digits.

Is there anything wrong with my way to make submenus visible above? Is
there any way to select and activate a menu that links to a page other
than getting there simply by tabbing, which is too cumbersome for a
large complex menu.

---
Haines Brown, KB1GRM

[Jukka K. Korpela]

Re: tab key and pseudo class selector

Scripsit Haines Brown:

I have a drop down menu system that consists of many entries in two to
four levels.

You should most probably redesign it. That sounds like poor usability
and poor accessibility, and such menu systems are a frequent cause of
complains.

Because of the size and complexity of the menu, I have
the user hover over a menu list item to make its submenu visible.

Just make it simple, then keep it simple, mm'kay?

This works fine, but I'd like to have this behavior also implemented
entirely from the keyboard.

So you are now trying to find partial fixes to some problems you created
by setting up an overly complex menu system.

To do this I've enabled tabbing among text
strings by placing them into empty anchor elements.

Gets even worse. You are intentional breaking the usability and the
accessibility of the pages.

<li><a accesskey="a" href="<path>">a ) Subheading</a></li>

The accesskey attribute, nominally introduced to promote accessibility,
has been found to be hostile to accessibility. The setting above will
normally mask out the functionality of Alt+A in a browser, and you
cannot possibly know what damage is done (i.e., which function, if any,
is masked out).

However,
using letters for access keys conflicts with browser hot keys, and not
all browsers (including my firefox/iceweasel) respond to digits.

Indeed.

And the idea of using :focus won't take you far, since it is
inconsistently implemented in different browsers.

Is there anything wrong with my way to make submenus visible above?

Yes, the whole idea is wrong. It's pointless to discuss CSS details
before having a reasonable design.

A single dropdown menu, implemented via CSS in a manner that degrades
gracefully, might be reasonable. And perhaps you can have several such
menus on a page, but don't try to nest them. A

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[Haines Brown]

Re: tab key and pseudo class selector

"Jukka K. Korpela" <jkorpela@cs.tu t.fiwrites:

Scripsit Haines Brown:
>

>I have a drop down menu system that consists of many entries in two
>to four levels.

>
You should most probably redesign it. That sounds like poor usability
and poor accessibility, and such menu systems are a frequent cause of
complains.

I appreciate your other points, but I'd like to focus on this one, if
you allow, for much of the rest of what you say follows from it.

It was my assumption that, in terms of usability, three levels are
normally the maximum depth for cascading menus. Are you disagreeing with
that generality?

One, of course, has to take into account the intended user base. My
users in this case are people who are motivated to dig for material. And
I'm also not in a competitive situation where competing sites' greater
ease of use would give them an advantage over me.

A menu system has the great advantage of graphically organizing material
into categories and subcategories that guide the user toward his
ultimate destination. I can't think of any other approach that quite
does that. But if you can think of any, I'd appreciate knowing of it.

In principle I could implement a search engine and make sure that each
target page <meta name="keywords" ..is equipped with a word
corresponding to each categorical level. However, that wouldn't really
work.

--

Haines Brown, KB1GRM

[dorayme]

Re: tab key and pseudo class selector

In article <87myme3zld.fsf @teufel.hartfor d-hwp.com>,
Haines Brown <brownh@teufel. hartford-hwp.comwrote:

"Jukka K. Korpela" <jkorpela@cs.tu t.fiwrites:
>

Scripsit Haines Brown:

I have a drop down menu system that consists of many entries in two
to four levels.

You should most probably redesign it. That sounds like poor usability
and poor accessibility, and such menu systems are a frequent cause of
complains.

>
I appreciate your other points, but I'd like to focus on this one, if
you allow, for much of the rest of what you say follows from it.
>
It was my assumption that, in terms of usability, three levels are
normally the maximum depth for cascading menus. Are you disagreeing with
that generality?
>

Yes. Levels (even one - but that is safest) buggers up accessibility.

One, of course, has to take into account the intended user base. My
users in this case are people who are motivated to dig for material.

Everyone digs for material. Humans are driven.

A menu system has the great advantage of graphically organizing material
into categories and subcategories that guide the user toward his
ultimate destination.

In theory, maybe. But considering the troubles they run into in
practice, given the technologies and browser differences, it is better
to turn to alternatives. It is not as if there are not excellent
alternatives.

I can't think of any other approach that quite
does that. But if you can think of any, I'd appreciate knowing of it.
>
In principle I could implement a search engine and make sure that each
target page <meta name="keywords" ..is equipped with a word
corresponding to each categorical level. However, that wouldn't really
work.

What quite is wrong with a search engine? Why would it not really work?

Anyway, you can have a site map. You can choose your top categories
carefully so that there is little doubt that a person wanting to know
about ducks will click a link that will lead to ducks (the link might go
to a page that has a prominent link called "Birds good to eat").

You might suppose that this is inefficient for the user? Why? If,
because he authopr of the site has not planned well, the average
intelligent user can easily go on flase link trails, so too can he go on
false drop down pathways on a single page, fiddling and fumbling with
mouse and missing the exact spot 2 levels down and having to start all
over and so on.

Go for reliability. If you must have a drop down, JK's advice is good.
No more than a level.

I would forget about drop downs as much as you can for the following
reason: it makes the author lazy about meaning, about logical ordering
of pages and heading and titles and everything to do with good
management. Drop downs can be like bad substitutes for good and deeper
organization of a site.

--
dorayme

[Jukka K. Korpela]

Re: tab key and pseudo class selector

Scripsit Haines Brown:

It was my assumption that, in terms of usability, three levels are
normally the maximum depth for cascading menus. Are you disagreeing
with that generality?

I am. You mentioned "a drop down menu system that consists of many
entries in two to four levels". The very idea of drop down navigation on
web pages is questionable; see

http://www.cs.tut.fi/~jkorpela/forms/navmenu.html

which is admittedly old, and CSS-based approaches (a list of link,
turned into a drop down menu using CSS) have changed the picture
somewhat. But most of the counterargument s apply to them as well.

A menu system has the great advantage of graphically organizing
material into categories and subcategories that guide the user toward
his ultimate destination.

Many people have difficulties in making a one-dimensional selection when
there are several options, and even when there aren't. In fact, I would
say that _most_ people make selections better if they can concentrate,
at each level, on the selection at hand. A "graphic organization",
whatever that really means (I saw no URL), probably mixes the levels.

In principle I could implement a search engine and make sure that each
target page <meta name="keywords" ..is equipped with a word
corresponding to each categorical level. However, that wouldn't really
work.

It's hard to tell without knowing the specifics.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[Bergamot]

Re: tab key and pseudo class selector

Haines Brown wrote:

>
While a site map makes sense, I don't see how it can
accommodate hundreds of categories.

But you want to make drop-down menus that do? That sounds a lot more
painful to use than a site map.

--
Berg

[Haines Brown]

Re: tab key and pseudo class selector

dorayme <doraymeRidThis @optusnet.com.a uwrites:

Perhaps we can meet half way here and say that some sites might
benefit more than other sites from drop down menuing.

I find all your points persuasive. You and Jukka have made me much more
aware of the problems with drop down menus. As a result, I'm starting my
site now under discussion using hierarchical pages
(www.hartford-hwp.com/image_archive/index.html).

A model of the site with links to all important pages (important
meaning that if someone was likely to be searching for something that
was on a page, that page better appear on the site map. You would not
put in page 17 of a 24 page section that was merely an essay on
something, the material broken into pages to avoid too much scrolling)
is what I meant.

Here is an example of a site where there are about 40 top-level
categories for a hierarchy of linked pages:
www.hartford-hwp.com/archives/. This is a lot! But I know of no
alternative without adding even more levels. It also has a search
utility, which in this case seems quite appropriate. although less so
for the site I've been discussing.

You could couple this site map with a search function for this page
alone. This way, you will get most of the functionality of the sort of
comprehensive dropdown menu system you seem in favour of, without the
accessibility drawbacks. Drawbacks, btw, that you are aware of (as
evidenced by your remarks at the end). You will get no more results
from a search of this site map page than you would get uncertainties
from negotiating with a mouse a complex system of dropdowns.

Understood. I'm not really arguing for drop down menus, but only
weighing the pros and cons. My initial exploration in that direction has
been brought to an end by this thread, particularly Jukka's web page
that catalogs some of the problems.

Yes, there is a main home page and you can go see animals or plants
from there. A click gets you to animals. The animals page has ducks
and camels and the camels page has (if need be) links to different
varieties, all clearly marked in the local menu there.

Your example has at least four levels, perhaps five. I've always worried
about forcing the user to dig deeply, but for your example (given that
it represents a simplification) , I'm not sure how to avoid that.

For truly complex sites, it is not an easy job, I agree. but there are
some great weapons at hand to assist. One of the weapons is the clever
use of redundancy. Strictly for a super rational user you would not
repeat links to "irrelevant things" on a page. But who is so rational
and clear headed always? So you make it easy for folk by allowing them
to shoot across the site without having to go back to the home page.
>
Hard to go into details because it is a complex task and requires
judgement and particular circumstances.

Yes, a challenge. In one of my sites I mentioned above, I make extensive
use of cross links to material that has relevance that is not manifest
in the hierarchy.

--

Haines Brown, KB1GRM

[Haines Brown]

Re: tab key and pseudo class selector

"Jukka K. Korpela" <jkorpela@cs.tu t.fiwrites:

Scripsit Haines Brown:
>

>Your example of a "normal list of links" in fact is a hierarchy of
>three levels (perhaps more), and so you apparently are not objecting
>to hierarchies per se, but how they are implemented.

>
A list is not a hierarchy, but you are right in the sequel. If you
have, say, 100 links, you should try and group them somehow, so that
the user can first select between the groups, then within the selected
group. If you have hundreds of links, you start needing several levels
of selection, i.e. some hierarchy. But this means that you need to
divide the links into several _pages_.

Sorry for the confusion. I did not mean to imply a list is a hierarchy,
but meant a hierarchy of link-lists.

Using CSS, you _might_ be able to put all the links on one page so
that at any time, only a handful (say, a dozen) of them is
visible. But this is usually a wrong approach. To begin with, when
someone enters the page using a speech browser, he often hears first
some general information about the page, as analyzed by the browser,
e.g. the total number of links on it. And "This page has six hundred
seventy-five links" isn't very promising.

An example of a page that gets close to the plethora of links that you
find problematic is: www.hartford-hwp.com/archives/ , which has 40. At
least they are put into five distinct groups.

--

Haines Brown, KB1GRM

[dorayme]

Re: tab key and pseudo class selector

In article <87ve102cfy.fsf @teufel.hartfor d-hwp.com>,
Haines Brown <brownh@teufel. hartford-hwp.comwrote:

dorayme <doraymeRidThis @optusnet.com.a uwrites:
>

Perhaps we can meet half way here and say that some sites might
benefit more than other sites from drop down menuing.

>
I find all your points persuasive. You and Jukka have made me much more
aware of the problems with drop down menus. As a result, I'm starting my
site now under discussion using hierarchical pages
(www.hartford-hwp.com/image_archive/index.html).
>

For truly complex sites, it is not an easy job, I agree. but there are
some great weapons at hand to assist. One of the weapons is the clever
use of redundancy. Strictly for a super rational user you would not
repeat links to "irrelevant things" on a page. But who is so rational
and clear headed always? So you make it easy for folk by allowing them
to shoot across the site without having to go back to the home page.

Hard to go into details because it is a complex task and requires
judgement and particular circumstances.

>
Yes, a challenge. In one of my sites I mentioned above, I make extensive
use of cross links to material that has relevance that is not manifest
in the hierarchy.

I will just for now make this point. Look at your:

<http://www.hartford-hwp.com/image_archive/menu-01.html>

which can take you to 5 different pages on parts of Archaic Africa and
Europe. However, on each of these parts, the user has to come back to
the above link. I am not saying this is illogical. It is quite sensible.
But you have tons of room on all your pages, why not repeat the menu (I
quote above) on each of those pages? This probably cuts down the number
of mouse click trips users interested in all the parts of Archaic places
have to make.

This is the sort of thing I was meaning previously by attending to
organization and using redundancy.

The truth is, there are no rigid guidelines in all these matters and so
beware of anyone selling you rigid laws. You simply excercise judgement
and knowledge of the likely people using the site. I would bet quids
that many people interested in Archaic Africa would be interested in
stuff on from more than one region. Armed with this, putting a local
menu to all the regions on each region, is the obvious move.

I assume you know that php includes are a great help in these matters.

In general, you should be putting a top level menu on each page. From
the pages I just perused, I felt the need for a menu informed from the
index page. For example:

Mode of productions: <Archaic<Ancien tand <Feudal>

where <indicate menu links, might usefully be at the top of *all* the
subsequent pages. On the Archaic pages, in addition, a local menu
listing <Africa<West Africaand <Europe>.

--
dorayme

[Haines Brown]

Re: tab key and pseudo class selector

dorayme <doraymeRidThis @optusnet.com.a uwrites:

I will just for now make this point. Look at your:
>
<http://www.hartford-hwp.com/image_archive/menu-01.html>
>
why not repeat the menu (I quote above) on each of those pages? This
probably cuts down the number of mouse click trips users interested in
all the parts of Archaic places have to make.

dorayme,

I implemented your suggestion. It strikes me as ugly, but it does the
job that you recommended. Not sure how to "prettify" it. The link
buttons are sure plain looking, but at least they are utilitarian in
that their purpose is transparent.

--

Haines Brown, KB1GRM

[dorayme]

Re: tab key and pseudo class selector

In article <87abia2t3t.fsf @teufel.hartfor d-hwp.com>,
Haines Brown <brownh@teufel. hartford-hwp.comwrote:

dorayme <doraymeRidThis @optusnet.com.a uwrites:
>

I will just for now make this point. Look at your:

<http://www.hartford-hwp.com/image_archive/menu-01.html>

why not repeat the menu (I quote above) on each of those pages? This
probably cuts down the number of mouse click trips users interested in
all the parts of Archaic places have to make.

>
dorayme,
>
I implemented your suggestion. It strikes me as ugly, but it does the
job that you recommended. Not sure how to "prettify" it. The link
buttons are sure plain looking, but at least they are utilitarian in
that their purpose is transparent.

I was only talking about the logic and the usefulness aspects, not
implying how you should implement it visually. Your additions do not
make the page uglier, in my opinion, if that is any consolation! <g>

It seems to me there is an almost invariable good rule to making a
website of many pages. And that is to fashion the most general
navigation into the template. And to put in local menus in addition for
various complex sections.

Important, imo, is to show the relationship between the main (global)
menu and the particular local. The sort of thing I think is quite
helpful can be seen all over the place, I noticed it last at

<http://www.khs.org.au/>

Look at Local History, this stays highlighted, even though the local
menu in that section changes highlighting according to the page being
viewed.

The basic functional job of putting such navigation in is not, imo, a
matter of taste in any way. It is essential. But how to construct the
page to make it look nice, well, that is a different thing altogether
and will vary according to one's aptitude. I like functional and
straightforward and for a site like yours with an interesting and
serious purpose, there is no need to be too fancy.

--
dorayme