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
- Include menu :focus and .active styles in your CSS for tab-to visibility
- Put tabindex="0" in your menu's main <ul> element - the script uses it to hide any visible sub-menus when tabbed past
- Use properly structured / nested lists - invalid markup screws with the script
- 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.