Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Menubar examples: Draft note about mouse hover behavior #603

Closed
mcking65 opened this issue Feb 12, 2018 · 4 comments
Closed

Menubar examples: Draft note about mouse hover behavior #603

mcking65 opened this issue Feb 12, 2018 · 4 comments
Assignees
Labels
editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. Example Page Related to a page containing an example implementation of a pattern

Comments

@mcking65
Copy link
Contributor

mcking65 commented Feb 12, 2018

In the menubar examples, add information under accessibility features describing the mouse hover behaviors, comparing and contrasting with desktop.

Some web menus open automatically on hover. In contrast, in the editor menubar example, users have to click a menubar item first. Once a menu has been opened, exploration is aided by opening subsequent menus on hover. This behavior can help users who may be exploring the screen by moving a mouse pointer, e.g., with a magnifier, and who would have a hard time seeing elements that the submenus would cover if simply passing the mouse over the menubar always triggered display of submenus.

@mcking65 mcking65 self-assigned this Feb 12, 2018
@mcking65 mcking65 added editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. Example Page Related to a page containing an example implementation of a pattern labels Feb 13, 2018
@mcking65 mcking65 added this to the 1.1 APG Release 2 milestone Feb 13, 2018
@carmacleod
Copy link
Contributor

Before making any specific recommendations about hover in menubars or menu buttons, please also read some of the opposing views out there.

The discussion in the WAI issue discusses a "hover intent pattern", which, if your users really-truly want hover to automatically open menus, then I would say that you MUST wait for them to show hover intent, like pausing over the button just long enough to indicate that they want a menu to open.

The other point noted in the WAI issue is that apparently users expect to have to click (or type space or enter) to open a menu button's menu. So menu buttons should not open on hover. (Note that the APG menu button examples do open on hover, so perhaps they should be changed).

Anyhow, I'm just saying that this is not a straightforward thing. We should research it, sure, but we may end up simply saying, "Do your user testing".

One thing that is clear is that true "application" menus, like the ones in Google docs, etc., are expected to require a click initially (i.e. to essentially give the menubar focus), and from then on, hover is expected to open other menus automatically, which is what we are doing for the APG's example application menu.

mcking65 added a commit that referenced this issue Jun 12, 2018
For issue #603, modified: examples/menubar/menubar-2/menubar-2.html.
In the accessibility features section, added items 4 and 5 describing the conditions when mouse hover can move focus.
@annabbott
Copy link

"Accessibility Features" > items 4 and 5 look good.
Found one nit: "Accessibility Features" > item 2: remove extra space after last word of sentence and the period.
Also added this comment to #711 (instructions were confusing).

mcking65 added a commit that referenced this issue Jun 27, 2018
…#711)

For issue #603, modified: examples/menubar/menubar-2/menubar-2.html.
In the accessibility features section, added items 4 and 5 describing the conditions when mouse hover can move focus.
@mcking65
Copy link
Contributor Author

Fixed with commit eafc098.

@carmacleod
Copy link
Contributor

Looks good @mcking65 - thank-you. This really helps explain the thinking behind the application menubar example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. Example Page Related to a page containing an example implementation of a pattern
Development

No branches or pull requests

3 participants