WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Burger Menus and necessary ARIA support

for

From: Vemaarapu Venkatesh
Date: Sep 12, 2017 11:28PM

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