HTML, :hover css menu and accessibility

Question

I have a question.

I have made a css menu (no javascript required). This relies on a:hover to show or hide UL elements within the A.

using visibility:hidden; and visibility:visible;

So far so good, until I try and use only a keyboard.

Now to be accessible I need to be able to navigate solely with the keyboard.

So I also added the a:focus to the classes that control the visibilty.

This however did not fix the menu and it remains closed.

Does anyone know how to accomplish this to keep my site accessible?

Thanks in advance.

edit JSFiddle

The biggest problem is how to achieve this so they can tab on the links below. I can do it for mouse only, not for keyboard only.

Someone must know how to do this?!

Answer 1

Pure css based :hover menues are not typically very user friendly even using a mouse. Since the as soon as the pointer is one pixel outside the menu, it's no longer hovered and disappears. This can be very annoying, especially for people with poor fine motor control.

I would suggest you use javascript to show and hide the sub menues, adding a delay so the menu does not disappear too fast if you just happen to move outside the menu for a moment (or use click activated and click hidden menu may be even better). Make sure that the menu is not hidden for users not using JavaScript (make submenus visible by default and hide them using javascript onLoad).

Edit 1: And of course you write the java script to respond both to click/hover and focus.

Edit 2: If you design the page first to work without javascript or css selectors such as :hover, e.g. the menu and the sub-menus are visible all the time. Then add javascript that hides the submenu on document load, and toggles the sub-menus on click / on focus etc. It will automatically work for users not using javascript.

If the design does not work well with all the submenus visible (e.g. they are overlapping or something like this), you could also make a static version (the one visible without javascript) designed to work well even when fully visible, and replace it with a more complex javascript controlled menu when the javascript loads. Or you could let the top level menu items (those always visible in the dynamic version) links that send a query parameter to the server that toggle the specific menu item on and off serverside, and the javascript removes the href value from the links and adds listeners to open and close the submenus without the server roundtrip. It depends on how large the menus are what would be most sensible.

Answer 2

The simplest answer as to why this happens is that you've styled the sub-menu to appear when the a is focused. If you tab from the a element the a is no longer focused, and therefore the sub-menu disappears again (as per the selector/declarations).

As for a fix, I'll have to think about that; sorry not to be more immediately useful.

---

Edited in response to question from OP (in comments):

...the question is really, how do you do this to make it accessible?

Unfortunately, I can't think of a non-JavaScript means to achieve accessibility, I'm afraid. At this time CSS doesn't allow for the selection of parents or siblings (which could make it work, if .subnav a:focus parent(li) siblings was a valid selector).