Foundation-sites: Accessibility issue with Dropdown

[mparker11]

I'm not able to make dropdown menus appear once focused on it with a screen reader, using any screen reader for Windows and Macs. I can reproduce it on the documentation site as well.

http://foundation.zurb.com/sites/docs/dropdown-menu.html

If you go to that page, and use the screen reader's mapped keys to navigate to the example dropdown menu, you'll see that on focus (when the screen reader reads "Item 1"), you cannot open the item using mapped keys that should open it.

[Owlbertz]

Hi @mparker11,
I would really like to get this compliant for screen readers. Could you give me a little more details on what keys you use? Tabbing through the menu and navigation using the arrow keys is what we implemented for Dropdown Menu so far.

[michaelwayneharris87]

I'm also interested in this.

I've been doing some accessibility testing with the Foundation dropdowns generally. A few things I'm noticing:

• With Voiceover, VO+Space doesn't interact with the list item (still need to test JAWS, etc)
• Sometimes I'm losing visual focus with Safari on dropdowns. I'm still trying to figure out how to reproduce that one.
• When escaping from a dropped down item, focus returns to the last item in the menu bar, rather than from the menu item that is the parent of the dropdown.

Sorry I don't have more to go on at the moment.

[mparker11]

@Owlbertz

@michaelwayneharris87 touched on it a bit. He's using Voiceover while I was primarily using NVDA (paired with Firefox). The keys to use for them are NVDA + Arrows, which in my case was Caps Lock + Arrows. They allow you to modify the NVDA key. Using that combination never allowed the dropdown menu to be read allowed. I've moved on without a solution but it will probably resurface for another. Thanks for taking this on.

[Owlbertz]

@mparker11 @michaelwayneharris87 I am currently digging through the accessibility issues of Foundation and would like to ask you if the behavior you reported as broken still exists in the latest version?

[mparker11]

Thanks for checking back in. The project I was working on is out of my jurisdiction now, and I'm not doing anything with accessible drop-downs at the moment.

[ncoden]

@Owlbertz I worked a bit with screen readers for Abide accessibiity. I can take care of this issue this weekend if you want.

[ncoden]

Thanks @DanielRuf

[drball]

I have recently been doing some accessibility testing with voiceover in safari and chrome. I have tested the dropdown menu on the latest docs and items 1 & 2 with subitems does not expand when pressed. Using tab order does work, with spacebar to expand, but screenreader focus is different.

[narends]

According to the W3C documentation (https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html), the role="menubar" must be on the <ul> element, the role="menuitem" should be on the <a> element within the <li> and the <li> can get the role="none".
Currently, Foundation places the role="menuitem" on the <li> element in stead of on the <a> element, which makes the underlying submenu inaccessible by screenreaders.

[DanielRuf]

Does someone want to provide a PR? This would be great.