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:48AM

On 09/06/2015 08:45, Chris Pearce wrote:
> I was thinking does the inclusion of headings now make this not follow the ARIA menu pattern.

Well yes, that's what I'm thinking/saying.

> And if that were the case do the same keyboard behaviours still apply?

Note also that an ARIA menu is really most appropriate for web
applications that pretend to be/emulate actual apps. If this menu is
just for a site navigation, then I'd argue it's more appropriate NOT to
use it. See

http://www.w3.org/WAI/tutorials/menus/flyout/ (for navigations etc)

versus

http://www.w3.org/WAI/tutorials/menus/application/ (actual application
menus)

P

>
> Chris
>
> Sent from my iPhone
>
>> On 9 Jun 2015, at 5:11 pm, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
>>
>>> 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
>> >> >> >> > > > > >


--
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