WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dropdown Menus

for

From: Birkir R. Gunnarsson
Date: Jan 7, 2018 6:32PM

Check out
ARIA authoring Practices menu button example:
https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/menu-button/menu-button-1/menu-button-1.html

and ACCDC mega menu example:
http://whatsock.com/test/ARIA%20Menubar/ARIA%20Menubar/menubar.html

Basically,
The trigger is a menu button (button with an aria-haspopup attribute,
when activatd the focus should move to the first menu item.
You should be able to navigate through the first level menu items with
arrow up/down. If a menu opens a submenu you should be able to use
arrow right to expand e it, arrow left or escape to close it and move
focus back to that menu item That element must have
aria-haspopup="true" to indicate that it has a submenu.

Ideally all menu items have tabindex='-1" and it takes quite a bit of
JavaScript to create the menu keyboard navigation. This is doable, but
it's not necessarily the best or most intuitive UI, and definitely
does not work on mobile.
Cheers


On 1/7/18, JP Jamous < <EMAIL REMOVED> > wrote:
> Hi WebAimers,
>
>
>
> I have been researching dropdown menus on the web, but I wanted to find out
> what you folks have to share. Here is my situation below.
>
>
>
> I have a nested dropdown menu on a client's web site. It is made up of a
> button that drops a list of menus onmouseover. The menus and their submenus
> stay visible for mouse users, as it works great for them. However, it is
> terrifying to screen reader and keyboard only users, because it has an array
> of nested links totaling about 50 links.
>
>
>
> I figured that if I add onfocus to the menu button, the browser would detect
> a keyboard command and I can dropdown only the first level of menus. If the
> keyboard user chooses to expand or collapse the first level, that will be at
> the user's discretion.
>
>
>
> What I am lacking is a tested JavaScript function or functions that use ARIA
> attributes to expand and collapse those menus. The menus are made up of
> unordered lists with links in each list. The developers would like to keep
> this template and not choose anything else as it will require so much work
> to redo this huge dropdown menu. I believe it is referred to as Mega menu.
> Please, correct me if I am wrong.
>
>
>
> Does anyone know of a good sample, snippet or documentation I can use? I
> want to break it down to the developers and explain to them how to add it to
> their already created menu. I have not been able to find something useful on
> the web so far and I unfortunately don't have the time to recreate the
> wheels.
>
>
>
> Any help or explanations will be highly appreciated.
>
> > > > >


--
Work hard. Have fun. Make history.