WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Keyboard Navigation Pattern for Navigation Menu with Submenu

for

From: Birkir R. Gunnarsson
Date: Jun 24, 2016 2:53PM

Your model/keyboard behavior looks good to me.
Make sue that, while user has focus inside submenu, pressing "escape"
key will close it and move focus back to the top level element.
I think a well constructed menu with arrow key support provides a much
better user experience than putting all links in the focus order.
There are a couple of scenarios that make this more of a chellenge though:
* A menu can only contain clickable actions (menu items can only be
the equivalent of links or buttons that perform one action when
clicked). If a submenu contains a form field, it is not eally a
submenu and the menu markup can cause serious accessibility issues for
screen readers.
* Frequently the top level menu item is coded to perform two
functions. When user mouses over it, the submenu pops up, if user
clicks it, it navigates to a different page. Mapping this to keyboard
(where pressing arrow down opens submenu and navigates to first item,
but pressing enter navigates user to a diffferent page) requires you
to warn the user. These dual purpose elements should be avoided when
possible, but sometimes it isn't possible.



On 6/24/16, Snahendu Bhattacharya < <EMAIL REMOVED> > wrote:
> Hi All!
>
> I have one question regarding the keyboard navigation pattern for
> navigation menu with submenu.
>
> As per WCAG 2.1.1, it all functionality should be available through a
> keyboard interface.
>
> Necessarily it doesn't talks about the pattern on the keyboard navigation
> order as that is more a usability issue rather than Accessibility.
>
> *Current keyboard navigational pattern of the menu:*
>
>>> As soon as user TABs to the menu, Submenu opens automatically.
>>> If user tabs, focus goes to the next menu (not the submenu)
>>> If user uses UP/DOWN arrow key they can navigate to the submenus.
>
> Technically this is accessible as the functionality is accessible through
> keyboard.
>
> *Note:* For screen reader user appropriate roles, States, properties and
> instructions are provided.
>
> *Question is:*
> Does this provide right user experience?
> Does all the submenu need to be made available through TAB key?
> (Considering the fact auto open functionality of the menu can't be changed)
>
> *For the second question* my personal view is, if user is forced to
> traverse through all the menus while pressing TAB (even if they don't want
> to see those), would cause more usability issues.
>
> *Can you please let me know your thoughts?*
> > > > >


--
Work hard. Have fun. Make history.