WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Burger Menus and necessary ARIA support

for

From: Bryan Garaventa
Date: Sep 13, 2017 11:40AM

Hi,
If all you want is a triggering element that expands a list of links that you tab through, you don't need to use ARIA Menu markup at all for this besides the use of aria-expanded on the button to convey this and possibly a named region if you wish around the links. There is nothing that is not accessible about this simple implementation.

When you apply ARIA Menu attributes however, that is when it becomes complicated, which then requires a whole bunch of keyboard functionality requirements, focus handling plus role matching, plus proper attribute usage to accomplish to ensure accessibility, because incorrect ARIA usage will actually make such controls totally inaccessible if misapplied. Here is a live example of one that is a simple vertical dropdown ARIA Menu construct:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Vertical%20(Internal%20Content)/demo.htm

Notice how screen readers like JAWS and NVDA convey these roles when arrowing around within this menu after activating the menu button.

This follows the mapping guidance documented here
http://whatsock.com/training/matrices/#menu



Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com