The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

How does one build an accessible dropdown menu?

There have been some discussions about drop down menus not being accessible and I have seen some drop down menus that did work via the keyboard. My question is how does one build a keyboard accessible drop down menu from the ground up?

I AM NOT looking for canned menus that already exist. I want to understand the nuts and bolts theory behind these menus so that I can build my own custom menu to serve my own purposes and along the way maybe provide others with the tools to do the same.

One of my ultimate objectives is to build a pure DHTML keyboard accessible drop down menu that does not require JavaScript (at least not for Firefox and Opera). I've seen this done, now I want to know how they did it.

You can build a drop-down menu using HTML and CSS only, however it will not work in any of the browsers I've tested in (IE7, FF1.5.0.12, FF 2.0.0.4, Opera 9.21). For an actually useful drop-down menu with keyboard access, you'd need to use Javascript (likely onFocus())

I can build a fully functional dropdown with only HTML and CSS using the hover pseudo class that will work correctly in Firefox, Opera Safari and with minor issues in IE7. If it doesn't have nested menus, it will even work just fine in IE7.

The problem is this pure DHTML menu can't be accessed via a keyboard.
This looks like a spot in the HTML/CSS specifications that is sorely lacking.

What we need is a CSS style instruction like maybe "keyboard:stop" that can be applied to any HTML object like an LI tag and when the object has focus the hover pseudo class is applied. A CSS instruction that tells the keyboard to go to an object combined with nested unordered lists would make for a very elegant drop down menuing system.

Originally Posted by [url=http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes]W3C[/url]

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

Unfortunately, it doesn't appear to be well-supported.

I did as such manage to get FF to work, by pressing the Menu key/[Shift] + [F10], but this opened both all the sub-sub-menus (causing them to overlap) and opened the right-click menu on top of the menu, so it isn't very useful - it was on the second website in my signature (where I have a fairly strong design with sub-sub-menus, which works well in IE7/FF/Opera) that I experienced this. I'd be interested in knowing if other people can reproduce this?

What this really sounds like is that W3C needs to address this functional need in HTML and CSS such that developers could use to EASILY address both the mouse and keyboard the way the hover pseudo-class handles the mouse.

An alternative menu (e.g. the main menu item being linked to an alternative webpage for the sub-menu items) might be accessible, but it isn't the best for usability.

In either case as long as there is an alternative means of navigation that preforms the same duty there is not an accessibility issue, it just might not be as usable. My goal was to provide the same level of USABILITY to users who have to use keyboards instead of a mouse. The thing is I am not going to remove a feature that enhances usability for the vast majority of my users just because a small minority can not use the ADDED functionality. Everyone can get to the content, its just that a few people need to visit an extra menu page along the way.

Well I think a small logical step you could take would be to ensure that when they hit the Tab key for the first time that they get your first navigational item. It's safe to say what you are actually looking for is a Tab system that walks through the subareas of the drop downs, correct?

The first tab key stops are all links to primary site navigation pages. What I was hoping for was the ability to use the keyboard to navigate my drop down menus without having to jump to menu pages. I've come to the conclusion that given the current state of web specifications and browser support this can not be done without adding in a mess load of HTML and JavaScript to my menus, which would make them very bloated. For now the best option seems to be to rely on the menu pages to provide the navigation provided by the drop down menus for those users who can not use a mouse.