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

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Vemaarapu Venkatesh
Sent: Tuesday, September 12, 2017 10:28 PM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Burger Menus and necessary ARIA support

Hi Fischer,

If you are using <button> element, tabindex="0" and role="button"
attributes need not to be used as <button> itself have the implicit role of button and also your tab key takes you to the button though tabindex="0" is not used.
Strictly do not use aria-label="navigation" on <button> unless it says your button name because it override your accessible button name and I am not sure for what purpose you are doing that. If it is to indicate navigation region do this <nav role="navigation"> All your navigation menu buttons </nav>

If aria-haspopup="true" or aria-haspopup="menu" is not used screen readers doesn't convey that the button has a attached menu. Also aria-expanded is required to make screen readers announce the state of the menu i.e.
collapsed or expanded so no need to define explicit states like open/ close navigation if aria-expanded is used.

aria-controls is necessary to build relationship between your button and attached menu.
I expect the links in the menu should be navigable with up and down arrow keys as it is a submenu.
So without all these things I don't think so the menu gives usable experience.

Thanks,
Venkatesh