WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Burger Menus and necessary ARIA support

for

From: Jonathan Cohn
Date: Sep 13, 2017 10:51AM

I found it interesting that target.com does not use aria-expanded or
aria-haspopup but instead just modifies the aria-label. At least that was
my experience on a Macintosh system earlier this week. I suppose this could
run one into difficulties with translation or other technologies.
Certainly when not paying strict attention, I would have trouble telling
the difference between f implementing all the aria states vs changing a
label.



On Wed, Sep 13, 2017 at 1:28 AM Vemaarapu Venkatesh <
<EMAIL REMOVED> > wrote:

> 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
> > > > >