Keyboard Accessible 'Tab-to' Menu

This is a multi-level CSS menu, where :hover activated sub-menus are accessible via a keyboard's TAB key. This cannot be done with CSS alone. The :hover sub-menu reveal is done with CSS, but tab focus sub-menu reveal is done with JavaScript.

The Problem

:hover activated CSS menus can only have their first-level buttons tabbed-to. While sub-menus can be momentarily revealed when a parent receives :focus, they will be hidden again once the user tabs off the parent button (when it loses focus). You can see the lost :focus issue here.

A Solution

The JavaScript at play below adds an ".active" class to buttons that have sub-menus, when they receive focus. This class is only removed when the previous or next sibling button is tabbed-to.

Note that this menu does not currently include ARIA attributes, which would further improve accessibility for screen readers. Please see Terrill Thompson's article on Accessible Dropdown Menus for more details.

Use your TAB key to navigate the menu below (TAB moves forwards, TAB+SHIFT moves backwards);

Works in all browsers and IE9+

Please view the source of this page for HTML markup, CSS and JS.

Usage

  1. Include menu :focus and .active styles in your CSS for tab-to visibility
  2. Put tabindex="0" in your menu's main <ul> element - the script uses it to hide any visible sub-menus when tabbed past
  3. Use properly structured / nested lists - invalid markup screws with the script
  4. Put id="menu" in your menu's container element, or change the "#menu" selector in the script

Pop the JS above the closing </body> tag.

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.