Making mega-menus accessible for keyboard users

Here's the situation. A large corporate site has a mega-menu in the primary navigation. The secondary-level page areas are available from within this dropdown (in this example the secondary levels are 'Menu one' and 'Menu two'). There are also selected tertiary levels from these sections shown in the dropdown ('one-a', 'one-b' etc.) This way you can navigate directly to selected tertiary pages from anywhere in the site, all well and good. Full navigation (Primary and secondary levels) is also available on the site footer

mockup

download bmml source – Wireframes created with Balsamiq Mockups

HOWEVER, the issue here is with the accessibility. Keyboard navigation of this type of navigation means that they cannot open the nav dropdowns menus to select lower sections (they open on mouse hover) so the only selectable elements via keyboard are the Primary navigation options (Nav 1, Nav 2, Nav 3 etc). Selecting this can open up a landing page of sorts for that item, but the landing pages don't contain all the links available; just some headline promotion items. The only way to use full navigation via keyboard is through the navigation in the footer. However the footer is (obviously) right at the bottom of the page. There will be a lot of content within the main body content so the tab order means that keyboard users cannot easily access the navigation of the site.

So, what are my options here.

  1. Say, screw it; who uses keyboards to navigate in this day-and-age (not an ideal answer)
  2. Change the tab order so that the footer links are the first thing selected when using tab (this is unexpected behaviour so isn't really desirable)
  3. Force the whole website strategy to change to include links on these category landing pages for all the lower categories just for the benefit of keyboard-only users (No idea on the usage figures of people who browse via keyboard only, I would assume this is a very small number but I don't want to rely on this assumption)
  4. Other - Surely there is something better than the above options

Note: I'm not worried about screen-readers; the navigation will be configured correctly so that it is available for these type of users. This issue is primarily aimed at accessibility of keyboard users.

Tags: