WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Keyboard navigation using arrows only

for

From: Bryan Garaventa
Date: Sep 4, 2014 12:43AM

Thanks, I appreciate the feedback.

The point of the demos isn't to be overly complicated or to represent mega-menus, but to convey what ATs like screen readers convey when encountering properly coded ARIA Menu constructs. It's true that aria-owns isn't strictly necessary, but it does explicitly set a parent child relationship that, when more fully supported by browsers, may increase speed by making it easier for browsers to map these associations in the Accessibility Tree.

Regarding the use of aria-posinset and aria-setsize, I agree that this isn't necessary. However, if these aren't included, then positioning data such as "1 of 6", "2 of 6", etc., won't actually be announced using both JAWS and NVDA in IE and Firefox equally, so it is useful at times for this purpose.

One of the primary problems with ARIA Menus that include both horizontal and vertical menus together at the same time, is that the horizontal and vertical aspects of these menus are not conveyed to screen reader users, so it is impossible for a blind screen reader user to know when pressing the Down arrow will navigate to another menu item at the same logical level, or if it will open a submenu instead, or if pressing the Right arrow will do the same, and so on with Up and Left. This is extremely confusing to a person who cannot see what the menus look like.

The same issue can be observed in a standard ARIA Menubar construct, where menuitems are represented from left to right, then pressing the Down arrow will open drop down submenus that are vertical, which then require a different mode of interaction to open submenus by using the Right arrow instead, none of which is conveyed to a blind screen reader user.

Currently the only way to deal with this at present is to either add offscreen text within the menuitem node that states which arrow press will open a submenu, or to include an aria-describedby attribute that does the same.

None of this will work well for mega-menu constructs however, because the nesting is too deep and this makes content very difficult to locate.

I recommend reading what Adobe has done to solve this problem, which is a good solution that is also an open source project that can be implemented by others for the same purpose.
Blog: http://blogs.adobe.com/accessibility/2013/05/adobe-com.html
Test: http://terrillthompson.com/tests/menus/accessible-mega-menu/test.html