Re: Officially suggested keyboard interaction for sub-menu items in the "navigation"?

On Mon, Jul 30, 2012 at 2:00 AM, Ian Yang <ian@invigoreight.com> wrote:
> Do we have a conclusion? Taking a look on the previous code again, and there
> is a dilemma: when the focus is on the "About" menu item, should hitting
> Enter key toggle the sub-menu or take users to about.html? There is no
> specification addresses this issue. So it seems to be wrong to put a
> "menubar" in the "navigation"?

Yes. The problem is navigation lists have different user expectations
from application menu bars, precisely because the top-level items
often have a primary purpose of acting as links!

I think there are are two good approaches here that don't violate user
expectations:

1. If the top-level items take the user to hub pages from which their
child items are themselves accessible as links, don't try to make the
child items keyboard navigable (leave their container display: none or
remove it from the DOM). They can be quick-access lists on hover for
mouse users. Keyboard users access the subitems through the hub pages
(or site search, or a sitemap, or an external search engine).

2. If there's an icon indicating a top-level item has a child list
such as a downwards pointing arrow, you can turn that into a separate
button for opening the sublist as a popup with alternative text like
"Open about sub-links". You may wish to markup the list opening button
with @aria-haspopup and mark the opened list up as a dialog:

http://www.w3.org/TR/wai-aria/complete#aria-haspopup

http://www.w3.org/TR/wai-aria/complete#dialog

http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element

--
Benjamin Hawkes-Lewis

Received on Monday, 30 July 2012 06:58:32 UTC