W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2013

Re: Keyboard Accessibility of Drop Down Menus

From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Thu, 03 Jan 2013 08:59:05 +0000
Message-ID: <50E54859.8010403@splintered.co.uk>
To: w3c-wai-ig@w3.org
On 03/01/2013 05:50, Thierry wrote:
> Hi Patrick,
>
>> Do you have some example markup+css? The main problem I've always
>> encountered is that, unlike :hover, :focus is lost as soon a user tabs into
>> a child element, thus immediately hiding the submenu as soon as you move
>> away from the main item that triggered its display. I've found no way around
>> this other than using extra JS to "keep" the submenu open via an added class
>> injected to the main item.
>
> Take a look at this fiddle: http://jsfiddle.net/thierrykoblentz/uWqBB/
>
> The idea is to force the parent item to *drop* which moves the
> sub-menu below the top item even though you tab from one sub-link to
> the next.

Oh, hadn't come across this method before. It does seem a 
bit...delicate, as it relies on no item in the dropdown being wider than 
the width of the top item. It also starts to disintegrate if the 
viewport gets too narrow. Very interesting though, and can certainly 
work in particular situations.

P
-- 
Patrick H. Lauke
______________________________________________________________
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
______________________________________________________________
twitter: @patrick_h_lauke | skype: patrick_h_lauke
______________________________________________________________
Received on Thursday, 3 January 2013 08:59:29 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 3 January 2013 08:59:29 GMT