WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Burger Menus and necessary ARIA support

for

From: Fischer, Johannes
Date: Sep 13, 2017 12:13AM

Hi Venkatesh,

thanks for your opinion. It is not a <button> element with role="button" and tabindex="0". It is either a <button> element (best solution) or it is a <div> element with role="button" and tabindex="0". aria-label is used because it's a button with an icon font or background image, so there is no other accessible button name (except perhaps a title attribute for mouse users who can see it).

Definitely I would use aria-expanded. And ok, aria-haspopup and aria-controls are not really optional for the menu button. If there are 5 items in the menu and 2 of them have a submenu with again some items, would you use aria-haspopup and aria-controls on the 2 items containing a submenu as well (of course, aria-expanded is used)? It would make sense to me.
When I look at another example (https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html), Example 1, Menu "About", Submenu "Fact", aria-expanded and aria-haspopup are used, but aria-controls not. But perhaps they just forgot to add it.

Johannes

-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: <EMAIL REMOVED> ] Im Auftrag von Vemaarapu Venkatesh
Gesendet: Mittwoch, 13. September 2017 07:28
An: <EMAIL REMOVED>
Betreff: 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