Zurb Foundation menu accessibility - submenu toggle button

Question

I'm working on a project where there is a requirement for accessibility. I'm trying to test out multi level and responsive horizontal menus like below:

https://foundation.zurb.com/building-blocks/blocks/foundation-5-top-bar.html

Functionality seems to be fine for accessibility except for one issue. The only way to open a submenu by keyboard is to hit the Enter key on the link, which prevents the default function of opening a page. Instead I need to use a toggle button next to the link to open the submenus (similar to the function of a hamburger menu button).

Can Foundation be customized to include a toggle for each submenu? Like if I could remove the toggle function from the link and applied it to a button?

Answer 1

The "one" menu in the one/two/three example is missing the aria-expanded attribute which should toggle between true/false depending on whether the submenu is displayed. Same with the submenus under "three".

I was able to expand the "one" menu using the downarrow key.

Answer 2

That is true, you can use the arrow keys to go through all of the submenus. But the problem is the function that opens the submenus disables the link, so the page cannot be accessed by clicking Enter on the link. (Try filling the menu with links and clicking through them)

This is my solution for now: the accordion menu: https://foundation.zurb.com/sites/docs/accordion-menu.html#submenu-toggle

The accordion menu adds a toggle button, but it doesn't close the menu on blur/focusout. It also doesn't have hover support but I can add that in CSS: li.is-accordion-submenu-parent:hover > ul { display: block !important }

I'll also have to make it look like a horizontal menu again, I'll use this as a workaround for now. It allows keyboard, click, and touch access.

Answer 3

In case anyone is still wondering. I liked to set up foundation "off canvas" and add the accordion menu with submenu toggle enabled. Best mobile menu UX i can get out of foundation 6.4xx imo. You can tab to each link or sub menu open and use arrows to cycle through them as well.

https://foundation.zurb.com/sites/docs/off-canvas.html https://foundation.zurb.com/sites/docs/accordion-menu.html#submenu-toggle

and for wordpress this walker worked great https://foundation.zurb.com/forum/posts/48646-foundation-6-responsive-navigation-menu-for-wordpress