Accessible and Responsive navigation patterns

I have been wanted to learn about accessibility more and more. I feel like I know the basics already but there is always something new to learn. One thing that keeps puzzling me over and over again is how to create different types of responsive but more accessible navigation patterns.

Good or bad navigation. Or very bad.

What kind of navigation patterns are there?

There is definitely room for new innovation in navigation menus. But there are certain basic navigation patterns which we see more often.

• “Do nothing” approach means to me that there is no drop down menus or different type of settings on smaller screens.
• Link to footer menu where on top of the page there is link to footer where you can find navigation.
• Multilevel drop down menu is really common. On smaller screens you toggle the menu open and close.
• Off-canvas menu can mean lot’s of different implementations. Menu can appear from left or right, can be always invisible before user action and so on.
• Full screen menu or modal dialog fills most of the page content.
• Select menu where menu items are converted in select list on small screens.
• Mega menu where you try to put every possible menu items under same umbrella.
• Let’s not forget that Breadcrumbs, Pagination and Search are one form of navigation.

There are probably lot’s of others menu systems but accessibility worries me in every one of them.

What to expect from Accessible and Responsive navigation patterns

When I was testing different types of menu system, most of them looked really cool. And worked also on mobile pretty well. But in terms of accessibility most of them lacked the basics.

I personally expect these kind of thing from navigation menus.

• Easy to use.
• Users don’t have to think about where is the navigation and where to find the most important info. At least they should learn the navigation system first time they arrive to your site. Otherwise they won’t come back.
• Works on “every” device out there.
• Works on “every” screen size out there.
• Works without mouse and with only keyboard.
  • You should be able to navigate through menu items using Tab, Shift + Tab and Enter.
  • Arrow keys and Esc (for closing certain type of menus) functionality are big plus.
  • Menu items should only be focused when menu is “opened” by the user.
• Support for screen reader users.
  • Better use of ARIA markup.
• Using buttons instead of links for toggling menu open on close.
• Works without Javascript. Javascript can be disabled or doesn’t render for some reason.
• Vanilla Javascript is a big plus if we don’t need jQuery for anything else.

With that said I’ll be presenting more info about several accessible and responsive navigation patterns when I have live examples of them. Munsa theme off-canvas navigation could be the first one that we take a closer look.

Let me know if you have more ideas about the subject.