WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Burger Menus and necessary ARIA support

for

From: Fischer, Johannes
Date: Sep 14, 2017 1:35AM

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