Accessible multi-level dropdown navigation

[samikeijonen]

There has been several issues where users have requested multi-level dropdown menu. I know there already is a branch for it but I wanted to see if I could pull something together. So here we go.

Here is my branch for more accessible multi-level dropdown navigation. The main point is trying to make the menu more accessible.

I forked the master branch because I wanted to start with clean table. You can compare two branches to get the idea.

You can see the live demo in my Github page.

There are some new options and the most important one is enableDropdown. If we doesn't set this to true basically nothing happens.

Let's highlight some other differences.

Better support for keyboard users

Keyboard user use Tab or Shift + Tab to navigate in sites. We can add focus class on navigation elements when menu item link is focused or blurred. toggleFocus function is from _s starter theme.

After that we just add the same styles on .focus as in :hover.

Voilà, we can now tab trough the navigation using keyboard and we get the same effect as people using mouse (hover effect).

Using buttons instead of links for toggling

In my opinion buttons should be used when toggling menu and sub menus, not link <a href="">Button</a> That'll ensure native keyboard accessibility and interaction with a screen readers.

I also removed the hamburger menu and just left the text in the button: Open menu or Close menu. That's always up to developer but there seems to be lot's of studies that hamburger menu doesn't always work.

For sub menu buttons I added screen-reader-text class and the label is changing when toggling.

Sub menu buttons are not in the html markup and they are added using Javascript. This is better solution for CMS platforms like WordPress and users who disabled Javascript.

Issues

There are some other details, for example using more aria states for better accessibility. But that's not an issue :smile: .

1. Sub menus don't have fancy CSS3 transitions. I'm not sure how to calculate height of sub menu.
2. Currently all sub menus stays open even if you open new sub menu. I know that in multi-level branch there is some code for this but not sure how it fits in this solution.

Any feedback is more than welcome! I totally understand if this is not your cup of tea. But if you want to merge this idea in your repo let me know.

[samikeijonen]

If someone wants to test out my branch of accessible multi level dropdown menu, here is my fork for it. I'll consider it as alpha/beta release.

[wachilt]

I've just ran a basic test of your branch in latest versions of Firefox/Dev (Mac/PC), Chrome (Mac/PC), Opera (Mac/PC), Safari (Mac OS/iOS - iPhone 5) Edge, IE11/10/9 and have not found any issues.

Lovely to see that all links/URLs are still accessible sans-JS too. :)

[samikeijonen]

Thanks for testing!