A11Y Nav

Library for accessible navigations. Currently a work in progress, but it has bare minimum functionality needed for production use. Will be adding features as I need them.

The site navigation utilizes keyboard functionality using the arrow keys, enter, escape, and spacebar commands. Arrow keys can navigate between previous/next items and also move down into a nested menu. Enter will open a nested menu and escape will close the current menu. Spacebar will open the current menu.

Currently works in all modern browsers except IE 11 until I figure out how to correctly polyfill the UMD build.

Example Usage

const a11yNav = new A11YNav(document.querySelector(".a11y-nav"), options);
    

Default Options

{
  // adds delay for toggling menu open/close animation classes
  animate: true,
  // amount of time in ms for menu open/close animation
  duration: 300,
  // Enables use of arrow keys to navigate menus
  useArrowKeys: true,
  // Enables closing of menus when focus leaves the nav
  closeOnBlur: true,
  // Class to add to body when a menu is open. If false, no class is added.
  bodyClass: "a11y-nav-menu-open",
  // Focus menu that just opened
  focusOnOpen: true,
}
    

Methods

const a11yNav = new A11YNav(document.querySelector('.a11y-nav'));
a11yNav.destroy();
    

Events

// Example use of the 'afterOpen' event
const navEl = document.querySelector(".a11y-nav");

navEl.addEventListener("afterOpen", function (e) {
  console.log(e.detail.menu);
});

const a11yNav = new A11YNav(navEl);
    

| Event         | Detail                              | Description                         |
| ------------- | ----------------------------------- | ----------------------------------- |
| init          | a11yNav                             | Fires after nav initialization      |
| beforeOpen    | a11yNav, menu                       | Fires before menu open              |
| afterOpen     | a11yNav, menu                       | Fires after menu open               |
| beforeClose   | a11yNav, menu                       | Fires before menu close             |
| afterClose    | a11yNav, menu                       | Fires after menu close              |
| destroy       | a11yNav                             | Fires after the nav is destroyed    |
    

Events listeners should be added before initializing the nav if possible. For example `init` will require it.