Keyboard Accessible 'Tab-to' Menu
: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.
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.
- 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.
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.