analysis of menus for discussion

Here are my notes on menus, for today's discussion.



Menu and navigation are blurred for a lot of designers/webdevs
*         Hybrids
o    Complex layout.
*         Amazon.com your account has 2 columns.  One has a very traditional-looking menu, but with a mix of buttons that do stuff and links that navigate to places.  The other column has product links with pictures and add to cart buttons.
*         Amazon your prime has formatted graphical links grouped under headings
*         Shopping carts are often a set of formatted links with pictures, sometimes actions you can take on the pictures.  Is this a menu or a dialog?
*         Naviation at the top of office online.  Outlook.com and click on the chevron to the right of "Outlook.com" at the beginning of the page.  There's a popup set of tiles, which are links with images inside.  Is that a menu?  A dialog? Navigation?
o    Is a popup set of links a menu or navigation? It doesn't act like what people expect when screen reader says 'menu'
o    Mega menu is not a menu at all, but a popup tab panel with lists of links under headings. It functions as a sitemap
*         http://designm.ag/inspiration/mega-menus/
*         http://www.microsoft.com/en-us/default.aspx click on 'products'
*         There's a similar concept called a mega footer, which is a sitemap at the bottom of the page.  These are static navigation, so not generally confused with menus.  http://www.devtheweb.net/blog/2009/12/19/mega-footers/
*         Side note: we should probably do a wcag technique for these
o    Facebook notification center is a menu with pictures and formatted text.  Or is it?  It navigates.
o    Menu or dialog:
*         http://news.google.com little arrow next to your account.  Is that a menu or a dialog?
*         Office ribbon is like this too.


*         Context menus are common in web apps
*         Outlook.com and gmail have some traditional popup menus.
*         Settings is often a traditional menu.



HTML 5.1 menus
*         Nicer than what I remember from 5.0 drafts
*         Firefox supports context menus, but not others.  No other browser supports menus.  Does anyone know Chrome's plans here?
*         Menu http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-menu-element
*         Menu item http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-menuitem-element
*         Commands are less odd than in 5.0 http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#commands
*         Context menus (Firefox supports) http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#context-menus



ARIA menus
*         The aria itself is clear
*         Doesn't support hybrid models.  Do we want more roles?  This is the sort of problem that patterns were intended to solve.
*         Building script-based menus that handle multiple input types is really hard.  Lots are broken with touch or keyboard.  Even more break when user tries to use a combination of input types.

Command (abstract role) http://www.w3.org/TR/wai-aria/roles#command

menu<http://www.w3.org/TR/wai-aria/roles#menu>

A type of widget that offers a list of choices to the user.

menubar<http://www.w3.org/TR/wai-aria/roles#menubar>

A presentation of menu that usually remains visible and is usually presented horizontally.

menuitem<http://www.w3.org/TR/wai-aria/roles#menuitem>

An option in a set of choices contained by a menu or menubar.

menuitemcheckbox<http://www.w3.org/TR/wai-aria/roles#menuitemcheckbox>

A menuitem with a checkable state whose possible values are true, false, or mixed.

menuitemradio<http://www.w3.org/TR/wai-aria/roles#menuitemradio>

A checkable menuitem in a set of elements with role menuitemradio, only one of which can be checked at a time.