Menú Responsive Accesible

Aunque existen muchas ofertas de menús responsive, os quería compartir este que me ha parecido muy completo, fácil de implementar y que, además, cumple con las pautas de accesibilidad AA, tanto para desktop como para móvil.

El recurso original lo podéis encontrar en http://www.smartmenus.org/

Las características que cumple son:

• Menú basado en listados anidados.
• Toggle en el botón del menú en versión responsive.
• Adaptativo, manteniendo el cumplimiento de las pautas de accesibilidad:
  • WAI-ARIA y roles dinámicos.
  • Foco visible.
  • Se proporciona acceso a toda la funcionalidad mediante el teclado en desktop y móvil.

Pasos para implementar en el HTML:

• Enlace a menu.css 
• Incluir las siguientes clases / id en el <ul> principal:
  <ul id="main-menu" class="sm menu collapsed" role="menubar">
• Enlaces a los ficheros js<!--Código JS-->

  <script src="../js/jquery-1.11.3.js" type="text/javascript"></script>
  <!-- SmartMenus jQuery plugin -->
  <script src="../js/jquery.smartmenus.js" type="text/javascript"></script>
  <script>
  $(function() {
    $('#main-menu').smartmenus();
  });
  </script>

¡Espero que os sea útil!