A11y Menu

A keyboard accessible navigational menu script.

Transforms your inaccessible website navigational menu into a keyboard accessible one:

• Toggles a sub menu(*) when a menu item receives focus using TAB key,
• Adds a sub menu toggle button,
• Touching a menu item link once toggles a sub menu(*),
• Closes all sub menus(*) when ESC key pressed.

(*) Well, this should be done with your CSS styles. All the script is actually doing is toggling a has-expanded-sub-menu class (configurable) on menu items and setting & toggling proper ARIA attributes where needed.

Which file to use?

In your projects, load the a11y-menu.dist.min.js file. It is a distribution ready compiled and minified version of the development a11y-menu.js file.

Documentation

Please check out the project wiki pages for instructions on how to use the script.

Browser compatibility

All modern web browsers, back to Edge and IE11.

Included polyfills

The script includes a polyfill for NodeList.forEach() and Element.matches().

License

GPL-3.0-or-later

Copyright

© 2019 WebMan Design, Oliver Juhas, https://www.webmandesign.eu