WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headings in a Menu Button UI pattern

for

From: Marco Zehe
Date: Jun 9, 2015 4:12AM

Hi Chris,

I agree with Léonie here, this definitely sounds more like a navigation
block that should get expanded and collapsed, but not be treated like a
menu. I suggest the following:

1. Give the button that expands and collapses this navigation menu for the
account no role, if you're using a button element, and no aria-haspopup.
Instead, give it an aria-expanded, set to "false" if the menu is currently
not showing, and a value of "true" if it is.
2. When the menu gets inserted/shown, make sure it is inserted in the DOM
*right below/after* that button, so the user can hit Space or Enter to
expand, and then down arrow or VoiceOver+RightArrow into the new items for
the account. Google does this similarly with their Account thing on every
page.
3. Or if it is not possible to insert the items in the DOM at that point,
make sure after setting the visibility to true, to set focus on the first
item within that account navigation block, since it can be assumed the user
wants to interact with this now. Therefore, you can expand the navigation,
and make sure the user doesn't have to search for it.

HTH!

Marco


2015-06-09 11:26 GMT+02:00 Chris Pearce < <EMAIL REMOVED> >:

> Patrick it is an application but whether its a *true* application menu I'm
> not sure as you could say its just a navigation menu. So the menu button is
> the users name, their avatar and a down pointing arrow which when clicked
> reveals the menu, within the menu are a list of links going to user setting
> pages. This is featured in the application header so available on every
> page.
>
> Léonie that's useful feedback thanks. It did get me thinking are these
> labels purely presentational? I feel if they didn't exist the menu would
> still make sense anyway.
>
>
> On 9 June 2015 at 19:12, Léonie Watson < <EMAIL REMOVED> > wrote:
>
> > FWIW, headings as part of a menu UI seems unintuitive to me (as a screen
> > reader user). It isn't a design pattern found in software applications,
> and
> > I'm not sure it's a design pattern we should be considering on the web.
> >
> > Headings are helpful for navigating and understanding the structure of
> > content. A navigation mechanism is arguably not content in this context.
> >
> > Léonie.
> >
> >
> > > > > > > > > >
>
>
>
> --
>
>
> http://chris-pearce.me
> <EMAIL REMOVED>
> > > > >