WebAIM - Web Accessibility In Mind

E-mail List Archives

Headings in a Menu Button UI pattern

for

From: Chris Pearce
Date: Jun 9, 2015 12:58AM

Hi,

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?

And semantically I think this type of menu is better suited to a `dl` where
the headings are `dt`s and the links within `dd`s rather than the default
`ul`/`li` setup.

Any advice on the best way to implement this in the most accessible way
would be greatly appreciated.

Thanks a lot,
Chris

--


http://chris-pearce.me
<EMAIL REMOVED>