WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headings in a Menu Button UI pattern

for

From: Patrick H. Lauke
Date: Jun 9, 2015 1:11AM

On 09/06/2015 07:58, Chris Pearce wrote:

> At my work we have implemented the Menu Button UI pattern as described
> here: http://www.w3.org/TR/wai-aria-practices/#menubutton following these
> specs:
> https://github.com/chris-pearce/accessibility-specs/blob/master/components/menu-button/README.md
> and using this markup:
> https://github.com/chris-pearce/accessibility-specs/blob/master/components/menu-button/README.md#markup
> which works well.
>
> However now we have to implement a version that uses a heading to group
> links in the drop down menu like this:
>
> *Heading*
> - Link item
> - Link item
> - Link item
> <<-- dividing line -->>
> *Heading*
> - Link item
> - Link item
> - Link item
>
> And I'm unsure the best way to implement this in an accessible way?
>
> Is it another `li` with `role="menuitem"` that receives focus like the
> links do? Or should the headings be referenced via `aria-labelledby`
> attributes on its relevant links?

It may just be my gut feeling (or the lack of authoritive examples to
the contrary), but I believe that this structure (a menu with extra
headings) does not fit in with the (fairly rigid) ARIA menu pattern,
which only allows for very specific types of menus (which essentially
mirror "standard" native application platform menus). I'd love to be
proven wrong, so if there's any good examples of a kosher menu with
extra headings etc, I'm all ears.

Incidentally, this (and the fact that developers used them for general
navigation, rather than for app-like menus) is the reason why I recently
nuked the role="menu" stuff from Bootstrap - see
https://github.com/twbs/bootstrap/pull/16571

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke