Accessible Menu jQuery plugin

This plugin create with the right HTML a fully accessible menu based on the example of the W3C: Example Disclosure for Navigation Menus.

Example with basic CSS

Code

HTML structure example:

<nav id="my-menu" aria-label="My menu">
  <ul>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <button aria-expanded="false" aria-controls="submenu-2">
      Dropdown
      </button>
      <ul id="submenu-2">
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </li>
    <li>
      <button aria-expanded="false" aria-controls="submenu-3">
      Dropdown
      </button>
      <ul id="submenu-3">
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <button aria-expanded="false" aria-controls="submenu-3-2">
          Dropdown
          </button>
          <ul id="submenu-3-2">
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <button aria-expanded="false" aria-controls="submenu-5">
      Dropdown
      </button>
      <ul id="submenu-5">
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

The id="submenu-x" and aria-control="submenu-x" are just suggestions. The script only watch the HTML structure and the aria-expanded.

JS:

$("#my-menu").accessibleMenu();

Settings

Option	Type	Default	Possibilities
animation	string	none	fade: Fade(in/out) animation slide: Slide(up/down) animation
animationSpeed	string or int	fast	fast: fast animation slow: slow animation 1000: 1sec animation

$("#my-menu").accessibleMenu({
  animation: 'slide',
  animationSpeed: 300
});

Tips

1. Always make your a and button in display block
2. Style with [aria-expanded="true|false"] don't override the script to add an active class
3. Use an ID $("#id").accessibleMenu() not a class $(".class").accessibleMenu()

Browser support

All modern browsers and IE >=9.