should i use in a 'href' attribute in a 'button' that evokes a jumpmenu?

[jojolina]

Hello Forumreaders,
The site im working on has a dropdown menu using javascript. http://www.folkshegekoalle.nl . (Dutch site). Now if one moves over the horizontal bar with 'buttons' like 'voor wie' 'accommodatie' 'cursussen' etc. a dropdownmenu appears.
For accessibility reasons i have added a 'href' attribute to those 'buttons' evoking the dropdownmenu, because if i would not do that, the 'tab' does not work. It jumps over those buttons. And people who do not click/ use a mouse could never reach the menu items. On the other hand, in a text-only browser like lynx, this is a bit weard, because the options like 'voor wie' 'accommodatie' 'cursussen' that go now to a certain page, give some confusion with the rest of the menu items.
Or should i use an empty attribute, like href="" ? The disadvantage is that people in the text-only browser (lynx) click on it but it goes nowhere...

What is best practice?
Thanks a lot!
Jo-Ann

A little code for one of the buttons causing the dropdownmenu to appear if one hovers over it. In this moment you can click on this 'button', because of the tab that would not work without an href:
<div id="accommodatiebutton"><a href="nl/accommodatie/verblijven.html" onmouseout="P2H_StartClock();" onmouseover="P2H_Menu('PMaccommodatiebutton', 500, 0);">Accommodatie</a></div>

[Stomme poes]

It also doesn't work for me (I have scripts disabled).

You could do two things: for Lynx you could give the top menu items an id and then the href could = that id
<li><a id="foo" href="#foo">Item 1</a></li>
At least if you click here, you end up at the same part of the page. In Lynx you can see the address of a link while the focus is on it.

Better idea is to have every main menu item go to a page which lists the links in the drop-down part. Lynx users don't need it, but it doens't hurt, and they can always go back a page and continue to read. Visual visitors with a mouse are unlikely to click on it, as they expect to click on the subs. Screen readers, if they can't get the dropdowns to work (can happen with Javascripts), can at least click the main level item and reach the sub links that way.

*Edit it seems you kinda already have this... I click on a menu item (I get no dropdown), and the page I go to has some links near the top of the content, which I'd assume are the same as the subs I can't see.

However, it's a strange menu set-up you have. Why is there a group of divs and then some ul's elsewhere? It looks like the Javascript is linking the two but I can't tell why.

[jojolina]

Hi there! Thanks for looking into it. The solution you suggest is my actual solution. Like you say: at least the main menu items go somewhere in lynx or in a screenreader and i hope that mouse-users will only use the dropdownmenu. Anyway, once in one of those pages, people can reach the rest of the pages listed in the dropdownmenu. But it is not designed to have the topmenu items to be clickable as well, so maybe your first suggestion is better, cause lynx users can see the address of a link while focus on it.

Still difficult to choose what should be the best....

So you think my menu setup a bit strange? This is what SiteGrinder made of it. But i understand the logic: First 4 <div> to describe the main level items and then times an <ul> to describe the dropdownmenu (prijzen is a real button, there is no dropdown menu) . It is seperated which is maybe a bit unusual?

Thanks a lot again, so you would prefer your second solution right?

Jo-Ann

[Stomme poes]

Yeah, I guess semantically it looks weird, is all. I expect a menu to simple be

<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="overons.html">About</a></li>
  <li><a href="producten.html">Products</a>
    <ul>
      <li><a href="duckies.html">Rubber Duckies"</a>
        <ul>
          <li><a href="bruin">Brown</a></li>
          <li><a href="geel">Yellow</a></li>
        </ul>
      </li>
      <li><a href="ponies.html">Little Ponies</a></li>
      <li><a href="foo.html">Foo Man Choos</a></li>
    </ul>
  </li>
  <li><a href="laast">Last Menu Item</a></li>
</ul>

Subs in subs submenus. It's logical and makes sense to robots, screen readers, Lynxers, etc.

But eh, I'm quite unfamiliar with the Javascript world. : )