WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Burger Menus and necessary ARIA support

for

From: Bryan Garaventa
Date: Sep 14, 2017 12:27PM

"of course, you can always recommend to use more ARIA attributes even if using less ARIA attributes not always fails a WCAG success criterion."

I understand the desire to do this, but unfortunately this often leads to greater issues down the road when developers copy and paste code fragments that end up contradicting one another and they don't know enough to fix them. Personally I always recommend using the least amount when possible, and if needed then make sure that everything is ironclad including all required attributes and necessary focus handling. Mixing these two concepts together often leads to even more confusion by mainstream developers in my experience, because they end up sprinkling roles and attributes in places where they have no business being. I'm not suggesting that you are recommending this, but I've found that when I've deviated into doing this myself in the past, even though what I was suggesting was totally clear to me, it often picked up a life of its own when introduced by differing dev teams with variable levels of experience and it typically didn't have any relation to what I was originally saying to begin with. So, I found it was simplest to say don't do it, or if you need to do it, you 'must' do it like this. It solved a lot of problems for me anyway.


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 Fischer, Johannes
Sent: Thursday, September 14, 2017 12:36 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Burger Menus and necessary ARIA support

Hi,

ok, thank you for your comments and the examples. Like I thought at the beginning it's not strictly regulated, it's rather a recommendation to do it like in the ARIA Authoring Practices. Bryan, you suggested not to use whole ARIA Menu markup if the menu button just expanded some links to tab through. Of course, aria-expanded is important. The question is, when is it just expanding some links and when is it a menu which always needs more ARIA attributes? I read out of your comments that this depends on the complexity and you have to think about it in every particular case. But of course, you can always recommend to use more ARIA attributes even if using less ARIA attributes not always fails a WCAG success criterion.

Regards,
Johannes


-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: <EMAIL REMOVED> ] Im Auftrag von Bryan Garaventa
Gesendet: Mittwoch, 13. September 2017 19:41
An: WebAIM Discussion List
Betreff: Re: [WebAIM] Burger Menus and necessary ARIA support

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